From f915225fd403e5b045691616b490de6b81bbca5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= <oskarkwasniewski@icloud.com>
Date: Fri, 7 Feb 2025 17:14:08 +0100
Subject: [PATCH] fix: properly handle labeled false on iOS (#291)

---
 .changeset/dirty-kids-attack.md                           | 5 +++++
 apps/example/src/App.tsx                                  | 7 ++++++-
 apps/example/src/Examples/Labeled.tsx                     | 8 ++++++--
 packages/react-native-bottom-tabs/ios/TabViewProps.swift  | 2 +-
 .../react-native-bottom-tabs/ios/TabViewProvider.swift    | 2 +-
 packages/react-native-bottom-tabs/src/TabView.tsx         | 3 +++
 6 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/dirty-kids-attack.md

diff --git a/.changeset/dirty-kids-attack.md b/.changeset/dirty-kids-attack.md
new file mode 100644
index 00000000..df9ff030
--- /dev/null
+++ 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
index 597dcec1..64cf1fbd 100644
--- 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
index 5200117d..2c1b41e6 100644
--- 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
index c898d2d2..cb01acec 100644
--- 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
index 8740b087..48647c13 100644
--- 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
index 7719f017..865bbb8e 100644
--- 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)) {