[iOS] Tabs aren't shown on iOS/iPadOS 26 for dynamic routes #360
Description
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed.
- I tested using a supported version of react native.
- I checked for possible duplicate issues, with possible answers.
Bug summary
Hi!
We've a tab bar shown in a dynamic route. When I go on the route for showing the tab bar, the index page is shown correctly, but when I go on a tab, the screen is blank, with only the tab bar on the bottom.
Library version
0.9.2
Environment info
"dependencies": {
"@bottom-tabs/react-navigation": "^0.9.2",
"@clerk/clerk-expo": "^2.9.6",
"@cloudinary/url-gen": "^1.21.0",
"@expo/html-elements": "^0.4.2",
"@expo/vector-icons": "^14.0.2",
"@neondatabase/serverless": "^1.0.0",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.2.0",
"@react-native-community/netinfo": "^11.4.1",
"@react-native-firebase/app": "^21.10.0",
"@react-native-firebase/database": "^21.10.0",
"@react-native-menu/menu": "^1.2.2",
"@react-native-picker/picker": "2.9.0",
"@react-navigation/native": "^7.0.0",
"@supabase/supabase-js": "^2.46.1",
"babel-plugin-module-resolver": "^5.0.2",
"cloudinary": "^2.6.0",
"dotenv": "^16.4.7",
"expo": "~52.0.46",
"expo-application": "~6.0.2",
"expo-auth-session": "~6.0.3",
"expo-build-properties": "~0.13.3",
"expo-constants": "~17.0.5",
"expo-dev-client": "~5.0.20",
"expo-device": "~7.0.3",
"expo-file-system": "~18.0.4",
"expo-font": "~13.0.3",
"expo-image": "~2.0.7",
"expo-linear-gradient": "~14.0.2",
"expo-linking": "~7.0.5",
"expo-localization": "~16.0.1",
"expo-location": "~18.0.10",
"expo-notifications": "~0.29.14",
"expo-router": "~4.0.21",
"expo-secure-store": "^14.0.1",
"expo-splash-screen": "~0.29.24",
"expo-status-bar": "~2.0.1",
"expo-system-ui": "~4.0.9",
"expo-updates": "~0.27.4",
"expo-web-browser": "~14.0.2",
"firebase": "^11.0.2",
"geolib": "^3.3.4",
"graphql": "^16.9.0",
"graphql-ws": "^5.16.0",
"html-entities": "^2.5.2",
"i18next": "^23.16.0",
"intl-pluralrules": "^2.0.1",
"jsencrypt": "^3.3.2",
"lightningcss": "^1.27.0",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",
"nativewind": "^4.1.23",
"next": "^14.2.26",
"posthog-react-native": "^3.3.13",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-i18next": "^15.0.3",
"react-native": "~0.77.1",
"react-native-bottom-tabs": "^0.9.1",
"react-native-country-flag": "^2.0.2",
"react-native-css-interop": "^0.1.22",
"react-native-gesture-handler": "~2.22.0",
"react-native-live-activity": "^0.1.0",
"react-native-map-clustering": "^3.4.2",
"react-native-maps": "1.18.0",
"react-native-paper": "^5.13.1",
"react-native-rate": "^1.2.12",
"react-native-reanimated": "~3.16.7",
"react-native-safe-area-context": "~5.1.0",
"react-native-screens": "~4.8.0",
"react-native-svg": "15.8.0",
"react-native-ui-lib": "^7.39.0",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.13",
"react-native-websocket": "^1.0.2",
"react-native-webview": "~13.13.1",
"tailwindcss": "^3.4.17"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/fs-extra": "^11.0.4",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.0.7",
"expo-module-scripts": "^4.0.4",
"fs-extra": "^10.1.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.6",
"jscodeshift": "^0.15.2",
"prettier": "^3.3.3",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
MacOS, iPadOS, iOS 26 beta 1Steps to reproduce
Create a simple Tab Bar in a nested routed page.
Reproducible sample code
import { useTranslation } from "react-i18next";
import { TabProvider, useTabContext } from "@/services/tabcontext";
import { ActivityIndicator } from "react-native";
import { useTheme } from "react-native-paper";
import ConnectionErrorSnackBar from "@/components/ConnectionErrorSnackBar";
import { withLayoutContext } from "expo-router";
import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation";
export const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);
export function TabLayout() {
const { t } = useTranslation("destination");
const theme = useTheme();
const { destination, parks, attractions, shows } = useTabContext();
if (!destination || !parks || !attractions || !shows)
return <ActivityIndicator size="large" />;
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: theme.colors.tertiaryContainer,
// tabBarInactiveTintColor: theme.colors.secondary,
// headerShown: false,
// tabBarStyle: {
// backgroundColor: theme.colors.background,
// },
}}
>
<Tabs.Screen
name="index"
options={{
title: t("attractions"),
tabBarIcon: () => require("../../assets/images/attractions.svg"),
}}
/>
<Tabs.Screen
name="schedule"
options={{
title: t("horaires"),
tabBarIcon: () => require("../../assets/images/date_range.svg"),
}}
/>
<Tabs.Screen
name="map"
options={{
title: t("carte"),
tabBarIcon: () => require("../../assets/images/place.svg"),
}}
/>
<Tabs.Screen
name="weather"
options={{
title: t("weather"),
tabBarIcon: () => require("../../assets/images/cloud.svg"),
}}
/>
</Tabs>
);
}
export default function DestinationDetail() {
return (
<TabProvider>
<TabLayout />
<ConnectionErrorSnackBar />
</TabProvider>
);
}