Feat/react navigation v7 (#159)

Author: okwasniewski

.changeset/brown-colts-dance.md

@@ -0,0 +1,5 @@
+---
+'@bottom-tabs/react-navigation': minor
+---
+
+feat: migrate to React Navigation v7

apps/example-expo/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@bottom-tabs/react-navigation": "*",
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native": "7.0.4",
     "expo": "~51.0.39",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
@@ -36,9 +36,9 @@
     "react-dom": "18.2.0",
     "react-native": "0.75.4",
     "react-native-bottom-tabs": "*",
-    "react-native-gesture-handler": "~2.20.0",
+    "react-native-gesture-handler": "2.21.2",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "^3.35.0"
+    "react-native-screens": "4.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/example/ios/Podfile.lock

@@ -1594,7 +1594,7 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
-  - RNGestureHandler (2.21.0):
+  - RNGestureHandler (2.21.2):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1615,7 +1615,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.35.0):
+  - RNScreens (4.3.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1636,9 +1636,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.35.0)
+    - RNScreens/common (= 4.3.0)
     - Yoga
-  - RNScreens/common (3.35.0):
+  - RNScreens/common (4.3.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1975,8 +1975,8 @@ SPEC CHECKSUMS:
   ReactNativeHost: a3cd2bc15b6deac7439318607ce5637d8a93a117
   ReactTestApp-DevSupport: ce66fc1bbcf598d7e90616db390a0274c13e14e7
   ReactTestApp-Resources: 9c387cfe7185736e6a9045e5aa3e085367be6aa3
-  RNGestureHandler: 4f0384d607f005e33ac8acae4a8ace325fea883f
-  RNScreens: d4551ceaec50b2fd6648e36d2e47dd42ef9ccfef
+  RNGestureHandler: 492b1d415a25506d1dc612e6a14932b1e697d835
+  RNScreens: 16a61c0a9fe4cd69af6489b8d10ba580b5e22ed0
   RNVectorIcons: a1344e212e80e6e0f4537a9960148201175f4225
   SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c

apps/example/package.json

@@ -17,17 +17,17 @@
     "@bottom-tabs/react-navigation": "*",
     "@callstack/react-native-visionos": "^0.75.0",
     "@react-navigation/bottom-tabs": "^6.6.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/native": "7.0.4",
+    "@react-navigation/native-stack": "^7.1.1",
+    "@react-navigation/stack": "^7.0.6",
     "color": "^4.2.3",
     "react": "18.3.1",
     "react-native": "0.75.4",
     "react-native-bottom-tabs": "*",
-    "react-native-gesture-handler": "^2.20.0",
+    "react-native-gesture-handler": "^2.21.2",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.11.0",
-    "react-native-screens": "^3.35.0",
+    "react-native-screens": "4.3.0",
     "react-native-vector-icons": "^10.2.0"
   },
   "devDependencies": {

packages/react-navigation/package.json

@@ -56,7 +56,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native": "7.0.4",
     "@types/color": "^3.0.6",
     "jest": "^29.7.0",
     "react": "18.3.1",
@@ -69,7 +69,7 @@
     "color": "^4.2.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": ">=6",
+    "@react-navigation/native": ">=7",
     "react": "*",
     "react-native": "*",
     "react-native-bottom-tabs": "*"

packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx

@@ -1,13 +1,14 @@
-import type {
-  DefaultNavigatorOptions,
-  ParamListBase,
-  TabActionHelpers,
-  TabNavigationState,
-  TabRouterOptions,
-} from '@react-navigation/native';
 import {
-  TabRouter,
   createNavigatorFactory,
+  type DefaultNavigatorOptions,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type StaticConfig,
+  type TabActionHelpers,
+  type TabNavigationState,
+  TabRouter,
+  type TabRouterOptions,
+  type TypedNavigator,
   useNavigationBuilder,
   useTheme,
 } from '@react-navigation/native';
@@ -17,14 +18,17 @@ import type {
   NativeBottomTabNavigationConfig,
   NativeBottomTabNavigationEventMap,
   NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationProp,
 } from '../types';
 import NativeBottomTabView from '../views/NativeBottomTabView';
 
 export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
+  string | undefined,
   TabNavigationState<ParamListBase>,
   NativeBottomTabNavigationOptions,
-  NativeBottomTabNavigationEventMap
+  NativeBottomTabNavigationEventMap,
+  NativeBottomTabNavigationProp<ParamListBase>
 > &
   TabRouterOptions &
   NativeBottomTabNavigationConfig;
@@ -34,10 +38,12 @@ function NativeBottomTabNavigator({
   initialRouteName,
   backBehavior,
   children,
+  layout,
   screenListeners,
   screenOptions,
   tabBarActiveTintColor: customActiveTintColor,
   tabBarInactiveTintColor: customInactiveTintColor,
+  UNSTABLE_getStateForRouteNamesChange,
   ...rest
 }: NativeBottomTabNavigatorProps) {
   const { colors } = useTheme();
@@ -63,8 +69,10 @@ function NativeBottomTabNavigator({
       initialRouteName,
       backBehavior,
       children,
+      layout,
       screenListeners,
       screenOptions,
+      UNSTABLE_getStateForRouteNamesChange,
     });
 
   return (
@@ -81,9 +89,25 @@ function NativeBottomTabNavigator({
   );
 }
 
-export default createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  NativeBottomTabNavigationOptions,
-  NativeBottomTabNavigationEventMap,
-  typeof NativeBottomTabNavigator
->(NativeBottomTabNavigator);
+export default function createNativeBottomTabNavigator<
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined = undefined,
+  const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: TabNavigationState<ParamList>;
+    ScreenOptions: NativeBottomTabNavigationOptions;
+    EventMap: NativeBottomTabNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: NativeBottomTabNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    Navigator: typeof NativeBottomTabNavigator;
+  },
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(NativeBottomTabNavigator)(config);
+}

packages/react-navigation/src/views/NativeBottomTabView.tsx

@@ -1,7 +1,8 @@
-import type {
-  ParamListBase,
-  TabNavigationState,
-  Route,
+import {
+  type ParamListBase,
+  type TabNavigationState,
+  type Route,
+  CommonActions,
 } from '@react-navigation/native';
 import type {
   NativeBottomTabDescriptorMap,
@@ -81,10 +82,9 @@ export default function NativeBottomTabView({
         if (event.defaultPrevented) {
           return;
         } else {
-          navigation.navigate({
-            key: route.key,
-            name: route.name,
-            merge: true,
+          navigation.dispatch({
+            ...CommonActions.navigate(route),
+            target: state.key,
           });
         }
       }}