feat: introduce config

Author: okwasniewski

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -117,6 +117,16 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  fun setConfig(config: TabViewConfig) {
+    labelVisibilityMode = if (config.labeled == false) {
+      LABEL_VISIBILITY_UNLABELED
+    } else if (config.labeled == true) {
+      LABEL_VISIBILITY_LABELED
+    } else {
+      LABEL_VISIBILITY_AUTO
+    }
+  }
+
   private fun getDrawable(imageSource: ImageSource): Drawable {
     // TODO: Check if this can be done using some built-in React Native class
     val imageRequest = ImageRequestBuilder.newBuilderWithSource(imageSource.uri).build()

android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -2,6 +2,7 @@ package com.rcttabview
 
 import android.view.View.MeasureSpec
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.LayoutShadowNode
@@ -22,6 +23,10 @@ data class TabInfo(
   val badge: String
 )
 
+data class TabViewConfig(
+  val labeled: Boolean?
+)
+
 @ReactModule(name = RCTTabViewViewManager.NAME)
 class RCTTabViewViewManager :
   SimpleViewManager<ReactBottomNavigationView>() {
@@ -55,6 +60,14 @@ class RCTTabViewViewManager :
     }
   }
 
+  @ReactProp(name = "config")
+  fun setConfig(view: ReactBottomNavigationView, config: ReadableMap?) {
+    val tabViewConfig = TabViewConfig(
+      labeled = if (config?.hasKey("labeled") == true) config.getBoolean("labeled") else null,
+    )
+    view.setConfig(tabViewConfig)
+  }
+
   @ReactProp(name = "icons")
   fun setIcons(view: ReactBottomNavigationView, icons: ReadableArray?) {
     view.setIcons(icons)

example/src/App.tsx

@@ -20,11 +20,13 @@ import ThreeTabs from './Examples/ThreeTabs';
 import FourTabs from './Examples/FourTabs';
 import MaterialBottomTabs from './Examples/MaterialBottomTabs';
 import SFSymbols from './Examples/SFSymbols';
+import LabeledTabs from './Examples/Labeled';
 
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
   { component: SFSymbols, name: 'SF Symbols' },
+  { component: LabeledTabs, name: 'Labeled Tabs' },
   {
     component: FourTabs,
     name: 'Four Tabs - No header',

example/src/Examples/FourTabs.tsx

@@ -42,6 +42,7 @@ export default function FourTabs() {
 
   return (
     <TabView
+      sidebarAdaptable
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}

example/src/Examples/Labeled.tsx

@@ -0,0 +1,50 @@
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+
+export default function LabeledTabs() {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'Albums',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      badge: '5',
+    },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'Chat',
+    },
+  ]);
+
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+    chat: Chat,
+  });
+
+  return (
+    <TabView
+      labeled
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
+  );
+}

ios/RCTTabViewViewManager.mm

@@ -22,5 +22,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(selectedPage, NSString)
 RCT_EXPORT_VIEW_PROPERTY(tabViewStyle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
+RCT_EXPORT_VIEW_PROPERTY(config, NSDictionary)
 
 @end

ios/TabViewImpl.swift

@@ -7,9 +7,9 @@ import React
  */
 class TabViewProps: ObservableObject {
   @Published var children: [UIView]?
+  @Published var config: TabViewConfig?
   @Published var items: TabData?
   @Published var selectedPage: String?
-  @Published var tabViewStyle: String?
   @Published var icons: [Int: UIImage] = [:]
 }
 
@@ -38,50 +38,56 @@ struct TabViewImpl: View {
         let child = props.children?[safe: index] ?? UIView()
         let tabData = props.items?.tabs[safe: index]
         let icon = props.icons[index]
+        
         RepresentableView(view: child)
           .frame(maxWidth: .infinity, maxHeight: .infinity)
           .tabItem {
-            TabItem(icon: icon, sfSymbol: tabData?.sfSymbol, title: tabData?.title)
+            TabItem(
+              title: tabData?.title,
+              icon: icon,
+              sfSymbol: tabData?.sfSymbol,
+              labeled: props.config?.labeled
+            )
           }
           .tag(tabData?.key)
           .tabBadge(tabData?.badge)
       }
-      .getTabViewStyle(name: props.tabViewStyle ?? "")
       .onChange(of: props.selectedPage ?? "") { newValue in
         onSelect(newValue)
       }
     }
+    .getSidebarAdaptable(enabled: props.config?.sidebarAdaptable ?? false)
   }
 }
 
 struct TabItem: View {
+  var title: String?
   var icon: UIImage?
   var sfSymbol: String?
-  var title: String?
+  var labeled: Bool?
 
   var body: some View {
     if let icon {
       Image(uiImage: icon)
     } else if let sfSymbol, !sfSymbol.isEmpty {
       Image(systemName: sfSymbol)
     }
-    Text(title ?? "")
+    if (labeled != false) {
+      Text(title ?? "")
+    }
   }
 }
 
 extension View {
   @ViewBuilder
-  func getTabViewStyle(name: String) -> some View {
-    switch name {
-    case "automatic":
-      self.tabViewStyle(.automatic)
-    case "sidebarAdaptable":
-      if #available(iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, *) {
+  func getSidebarAdaptable(enabled: Bool) -> some View {
+    if #available(iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, *) {
+      if (enabled) {
         self.tabViewStyle(.sidebarAdaptable)
       } else {
         self
       }
-    default:
+    } else {
       self
     }
   }

ios/TabViewProvider.swift

@@ -9,6 +9,11 @@ struct TabInfo: Codable {
   let sfSymbol: String
 }
 
+struct TabViewConfig: Codable {
+  let sidebarAdaptable: Bool
+  let labeled: Bool?
+}
+
 struct TabData: Codable {
   let tabs: [TabInfo]
 }
@@ -30,15 +35,15 @@ struct TabData: Codable {
     }
   }
 
-  @objc var selectedPage: NSString? {
+  @objc var config: NSDictionary? {
     didSet {
-      props.selectedPage = selectedPage as? String
+      props.config = parseTabViewConfig(from: config)
     }
   }
 
-  @objc var tabViewStyle: NSString? {
+  @objc var selectedPage: NSString? {
     didSet {
-      props.tabViewStyle = tabViewStyle as? String
+      props.selectedPage = selectedPage as? String
     }
   }
 
@@ -129,4 +134,16 @@ struct TabData: Codable {
 
     return TabData(tabs: items)
   }
+  
+  private func parseTabViewConfig(from dict: NSDictionary?) -> TabViewConfig? {
+    guard let configDict = dict as? [String: Any] else { return nil }
+    let sidebarAdaptable = configDict["sidebarAdaptable"] as? Bool ?? false
+    let labeled = configDict["labeled"] as? Bool ?? nil
+
+    return TabViewConfig(
+      sidebarAdaptable: sidebarAdaptable,
+      labeled: labeled
+    )
+  }
+  
 }

src/TabView.tsx

@@ -1,4 +1,4 @@
-import type { TabViewItems } from './TabViewNativeComponent';
+import type { TabViewConfig, TabViewItems } from './TabViewNativeComponent';
 import { Image, Platform, StyleSheet, View } from 'react-native';
 
 //@ts-ignore
@@ -12,6 +12,14 @@ const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
   icon.sfSymbol;
 
 interface Props<Route extends BaseRoute> {
+  /*
+   * Whether to show labels in tabs. When false, only icons will be displayed.
+   */
+  labeled?: boolean;
+  /*
+   * Whether to show labels in tabs. When false, only icons will be displayed.
+   */
+  sidebarAdaptable?: boolean;
   navigationState: NavigationState<Route>;
   renderScene: (props: {
     route: Route;
@@ -96,6 +104,14 @@ const TabView = <Route extends BaseRoute>({
     [icons]
   );
 
+  const nativeConfig: TabViewConfig = useMemo(
+    () => ({
+      labeled: props.labeled,
+      sidebarAdaptable: props.sidebarAdaptable,
+    }),
+    [props.labeled, props.sidebarAdaptable]
+  );
+
   const jumpTo = useLatestCallback((key: string) => {
     const index = navigationState.routes.findIndex(
       (route) => route.key === key
@@ -110,6 +126,7 @@ const TabView = <Route extends BaseRoute>({
       items={items}
       icons={resolvedIconAssets}
       selectedPage={focusedKey}
+      config={nativeConfig}
       onPageSelected={({ nativeEvent: { key } }) => {
         jumpTo(key);
       }}

src/TabViewNativeComponent.ts

@@ -1,9 +1,6 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native';
-import type {
-  DirectEventHandler,
-  WithDefault,
-} from 'react-native/Libraries/Types/CodegenTypes';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
 
@@ -18,12 +15,17 @@ export type TabViewItems = ReadonlyArray<{
   badge?: string;
 }>;
 
+export type TabViewConfig = {
+  labeled?: boolean;
+  sidebarAdaptable?: boolean;
+};
+
 export interface TabViewProps extends ViewProps {
   items: TabViewItems;
   selectedPage: string;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
-  tabViewStyle?: WithDefault<'automatic' | 'sidebarAdaptable', 'automatic'>;
   icons?: ReadonlyArray<ImageSource>;
+  config?: TabViewConfig;
 }
 
 export default codegenNativeComponent<TabViewProps>('RCTTabView');