fix: properly handle labeled false on iOS (#291)

callstackincubator · Feb 7, 2025 · f915225 · f915225
1 parent afc5a3f
commit f915225
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/dirty-kids-attack.md b/.changeset/dirty-kids-attack.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+fix: properly handle labeled={false} on iOS
diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -66,6 +66,10 @@ const FourTabsActiveIndicatorColor = () => {
   return <FourTabs activeIndicatorColor={'#87CEEB'} />;
 };
 
+const UnlabeledTabs = () => {
+  return <LabeledTabs showLabels={false} />;
+};
+
 const examples = [
   {
     component: ThreeTabs,
@@ -77,7 +81,8 @@ const examples = [
     name: 'SF Symbols',
     screenOptions: { headerShown: false },
   },
-  { component: LabeledTabs, name: 'Labeled Tabs', platform: 'android' },
+  { component: LabeledTabs, name: 'Labeled Tabs' },
+  { component: UnlabeledTabs, name: 'Unlabeled Tabs' },
   {
     component: NativeBottomTabsEmbeddedStacks,
     name: 'Embedded stacks',

diff --git a/apps/example/src/Examples/Labeled.tsx b/apps/example/src/Examples/Labeled.tsx
@@ -5,7 +5,11 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 
-export default function LabeledTabs() {
+export default function LabeledTabs({
+  showLabels = true,
+}: {
+  showLabels: boolean;
+}) {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
     {
@@ -41,7 +45,7 @@ export default function LabeledTabs() {
 
   return (
     <TabView
-      labeled
+      labeled={showLabels}
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}

diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift
@@ -9,7 +9,7 @@ class TabViewProps: ObservableObject {
   @Published var selectedPage: String?
   @Published var icons: [Int: PlatformImage] = [:]
   @Published var sidebarAdaptable: Bool?
-  @Published var labeled: Bool?
+  @Published var labeled: Bool = false
   @Published var scrollEdgeAppearance: String?
   @Published var barTintColor: PlatformColor?
   @Published var activeTintColor: PlatformColor?

diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift
@@ -79,7 +79,7 @@ public final class TabInfo: NSObject {
     }
   }
 
-  @objc public var labeled: Bool = true {
+  @objc public var labeled: Bool = false {
     didSet {
       props.labeled = labeled
     }

diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx
@@ -175,6 +175,8 @@ const TabView = <Route extends BaseRoute>({
   getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor,
   getTestID = ({ route }: { route: Route }) => route.testID,
   hapticFeedbackEnabled = false,
+  // Android's native behavior is to show labels when there are less than 4 tabs. We leave it as undefined to use the platform default behavior.
+  labeled = Platform.OS !== 'android' ? true : undefined,
   tabBar: renderCustomTabBar,
   tabBarStyle,
   tabLabelStyle,
@@ -300,6 +302,7 @@ const TabView = <Route extends BaseRoute>({
         inactiveTintColor={inactiveTintColor}
         barTintColor={tabBarStyle?.backgroundColor}
         rippleColor={rippleColor}
+        labeled={labeled}
       >
         {trimmedRoutes.map((route) => {
           if (getLazy({ route }) !== false && !loaded.includes(route.key)) {