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 ;
};
+const UnlabeledTabs = () => {
+ return ;
+};
+
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 (
({
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 = ({
inactiveTintColor={inactiveTintColor}
barTintColor={tabBarStyle?.backgroundColor}
rippleColor={rippleColor}
+ labeled={labeled}
>
{trimmedRoutes.map((route) => {
if (getLazy({ route }) !== false && !loaded.includes(route.key)) {