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

Author: okwasniewski

.changeset/dirty-kids-attack.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+fix: properly handle labeled={false} on iOS

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',

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}

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?

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
     }

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)) {