callstack · thiagobrez · Apr 14, 2026 · Apr 14, 2026
diff --git a/.changeset/grumpy-laws-mix.md b/.changeset/grumpy-laws-mix.md
@@ -0,0 +1,6 @@
+---
+'@bottom-tabs/react-navigation': minor
+'@bottom-tabs/expo-template': minor
+---
+
+Add missing props from react-navigation to NativeBottomTabNavigator
diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock
@@ -1748,7 +1748,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-bottom-tabs (1.0.5):
+  - react-native-bottom-tabs (1.1.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -1766,7 +1766,7 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-bottom-tabs/common (= 1.0.5)
+    - react-native-bottom-tabs/common (= 1.1.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -1778,7 +1778,7 @@ PODS:
     - SocketRocket
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
-  - react-native-bottom-tabs/common (1.0.5):
+  - react-native-bottom-tabs/common (1.1.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2842,7 +2842,7 @@ SPEC CHECKSUMS:
   React-logger: a3cb5b29c32b8e447b5a96919340e89334062b48
   React-Mapbuffer: 9d2434a42701d6144ca18f0ca1c4507808ca7696
   React-microtasksnativemodule: 75b6604b667d297292345302cc5bfb6b6aeccc1b
-  react-native-bottom-tabs: 8e918142554e3878f043b23bdf93049b34a78ca6
+  react-native-bottom-tabs: e33312fc663d163f0be73d3474dfb448ba38dad8
   react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d

diff --git a/apps/example/package.json b/apps/example/package.json
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@bottom-tabs/react-navigation": "*",
-    "@react-navigation/bottom-tabs": "^7.4.7",
+    "@react-navigation/bottom-tabs": "^7.15.9",
     "@react-navigation/devtools": "^7.0.44",
-    "@react-navigation/native": "^7.1.17",
-    "@react-navigation/native-stack": "^7.3.26",
-    "@react-navigation/stack": "^7.4.8",
+    "@react-navigation/native": "^7.2.2",
+    "@react-navigation/native-stack": "^7.14.11",
+    "@react-navigation/stack": "^7.8.10",
     "color": "^5.0.0",
     "react": "^19.1.0",
     "react-native": "^0.81.4",

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -35,6 +35,7 @@ import NativeBottomTabsRemoteIcons from './Examples/NativeBottomTabsRemoteIcons'
 import NativeBottomTabsUnmounting from './Examples/NativeBottomTabsUnmounting';
 import NativeBottomTabsCustomTabBar from './Examples/NativeBottomTabsCustomTabBar';
 import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlur';
+import NativeBottomTabsScreenLayout from './Examples/NativeBottomTabsScreenLayout';
 import BottomAccessoryView from './Examples/BottomAccessoryView';
 import { useLogger } from '@react-navigation/devtools';
 
@@ -151,6 +152,10 @@ const examples = [
     component: NativeBottomTabsCustomTabBar,
     name: 'Native Bottom Tabs with Custom Tab Bar',
   },
+  {
+    component: NativeBottomTabsScreenLayout,
+    name: 'Native Bottom Tabs with screenLayout',
+  },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {

diff --git a/apps/example/src/Examples/NativeBottomTabsScreenLayout.tsx b/apps/example/src/Examples/NativeBottomTabsScreenLayout.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
+
+const Tab = createNativeBottomTabNavigator();
+
+function ScreenLayout({
+  children,
+  route,
+}: {
+  children: React.ReactNode;
+  route: { name: string };
+}) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.banner}>
+        <Text style={styles.bannerTitle}>screenLayout active</Text>
+        <Text style={styles.bannerSubtitle}>{route.name}</Text>
+      </View>
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+}
+
+export default function NativeBottomTabsScreenLayout() {
+  return (
+    <Tab.Navigator screenLayout={ScreenLayout}>
+      <Tab.Screen
+        name="Article"
+        component={Article}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/article_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={Albums}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={Contacts}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/person_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Chat"
+        component={Chat}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F3F0E8',
+  },
+  banner: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#1E2D2F',
+  },
+  bannerTitle: {
+    color: '#F7DBA7',
+    fontSize: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  bannerSubtitle: {
+    marginTop: 4,
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  content: {
+    flex: 1,
+  },
+});
diff --git a/packages/expo-template/package.json b/packages/expo-template/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@bottom-tabs/react-navigation": "1.1.0",
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/native": "^7.1.17",
+    "@react-navigation/native": "^7.2.2",
     "expo": "^54.0.1",
     "expo-blur": "^15.0.6",
     "expo-build-properties": "^1.0.7",

diff --git a/packages/react-navigation/package.json b/packages/react-navigation/package.json
@@ -56,7 +56,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.1.17",
+    "@react-navigation/native": "^7.2.2",
     "@types/color": "^4.2.0",
     "jest": "^29.7.0",
     "react": "^19.1.0",

diff --git a/packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx b/packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx
@@ -37,10 +37,13 @@ function NativeBottomTabNavigator({
   id,
   initialRouteName,
   backBehavior,
+  UNSTABLE_routeNamesChangeBehavior,
   children,
   layout,
   screenListeners,
   screenOptions,
+  screenLayout,
+  UNSTABLE_router,
   tabBarActiveTintColor: customActiveTintColor,
   tabBarInactiveTintColor: customInactiveTintColor,
   layoutDirection = 'locale',
@@ -68,10 +71,13 @@ function NativeBottomTabNavigator({
       id,
       initialRouteName,
       backBehavior,
+      UNSTABLE_routeNamesChangeBehavior,
       children,
       layout,
       screenListeners,
       screenOptions,
+      screenLayout,
+      UNSTABLE_router,
     });
 
   return (