chore: migrate to screens v4 and navigation v7

apps/common-app/package.json

@@ -36,10 +36,10 @@
     "@react-native-community/slider": "^4.5.5",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.9.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/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
+    "@react-navigation/stack": "^7.0.0",
     "@shopify/flash-list": "^1.7.1",
     "@stylexjs/babel-plugin": "^0.7.5",
     "@tsconfig/react-native": "^3.0.0",
@@ -55,7 +55,7 @@
     "react-native-pager-view": "^6.4.1",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "^4.13.1",
-    "react-native-screens": "3.35.0",
+    "react-native-screens": "^4.0.0",
     "react-native-svg": "^15.8.0",
     "react-strict-dom": "0.0.27",
     "typescript": "~5.3.0"

apps/common-app/src/App.tsx

@@ -19,11 +19,7 @@ import type { HeaderBackButtonProps } from '@react-navigation/elements';
 import { HeaderBackButton } from '@react-navigation/elements';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import type {
-  NavigationProp,
-  NavigationState,
-  PathConfigMap,
-} from '@react-navigation/native';
+import type { NavigationState, PathConfigMap } from '@react-navigation/native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -168,10 +164,13 @@ const linking = {
 };
 
 function BackButton(props: HeaderBackButtonProps) {
-  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const navigation = useNavigation<
+    | StackNavigationProp<RootStackParamList>
+    | NativeStackNavigationProp<RootStackParamList>
+  >();
 
   return (
-    <HeaderBackButton {...props} onPress={() => navigation.navigate('Home')} />
+    <HeaderBackButton {...props} onPress={() => navigation.popTo('Home')} />
   );
 }
 

apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx

@@ -19,7 +19,10 @@ import Animated, {
   FlipOutYRight,
 } from 'react-native-reanimated';
 import { createStackNavigator } from '@react-navigation/stack';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  NavigationIndependentTree,
+} from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 
 interface Item {
@@ -92,12 +95,14 @@ const Stack = createStackNavigator<RootStackParamList>();
 
 export default function Layout() {
   return (
-    <NavigationContainer independent={true}>
-      <Stack.Navigator screenOptions={{ title: 'Layout Transitions 🔥' }}>
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="TransitionScreen" component={Transition} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <NavigationIndependentTree>
+      <NavigationContainer>
+        <Stack.Navigator screenOptions={{ title: 'Layout Transitions 🔥' }}>
+          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen name="TransitionScreen" component={Transition} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </NavigationIndependentTree>
   );
 }
 

apps/common-app/src/examples/LayoutAnimations/NativeModals.tsx

@@ -66,7 +66,7 @@ const App = ({
       </Pressable>
       <Pressable
         style={[styles.button, styles.buttonOpen]}
-        onPress={() => navigation.navigate('Home')}>
+        onPress={() => navigation.popTo('Home')}>
         <Text style={styles.textStyle}>Go back</Text>
       </Pressable>
     </View>

apps/common-app/src/examples/ScreenStackExample.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  NavigationIndependentTree,
+  useNavigation,
+} from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Animated, {
@@ -60,12 +64,14 @@ function SecondScreen() {
 
 export default function ScreenStackExample() {
   return (
-    <NavigationContainer independent={true}>
-      <Stack.Navigator>
-        <Stack.Screen name="First" component={FirstScreen} />
-        <Stack.Screen name="Second" component={SecondScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <NavigationIndependentTree>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="First" component={FirstScreen} />
+          <Stack.Screen name="Second" component={SecondScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </NavigationIndependentTree>
   );
 }
 

apps/common-app/src/examples/SharedElementTransitions/BorderRadii.tsx

@@ -42,7 +42,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
 function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <View style={styles.flexOne}>
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
       <Animated.View
         style={styles.greenBoxScreenTwo}
         sharedTransitionTag="tag"

apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx

@@ -212,7 +212,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
       />
       <Button
         title="go to Screen1"
-        onPress={() => navigation.navigate('Screen1')}
+        onPress={() => navigation.popTo('Screen1')}
       />
     </View>
   );
@@ -266,12 +266,12 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
         </Animated.Text>
       </Animated.View>
       <Button
-        onPress={() => navigation.navigate('Screen1')}
+        onPress={() => navigation.popTo('Screen1')}
         title="go to screen1"
       />
       <Button
         title="go to Screen2"
-        onPress={() => navigation.navigate('Screen2')}
+        onPress={() => navigation.popTo('Screen2')}
       />
     </View>
   );

apps/common-app/src/examples/SharedElementTransitions/CustomTransition.tsx

@@ -63,7 +63,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
         sharedTransitionTag="tag"
         sharedTransitionStyle={transition}
       />
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/FlatList.tsx

@@ -109,7 +109,7 @@ function Screen2({
 }: NativeStackScreenProps<ParamList, 'Screen2'>) {
   return (
     <View style={styles.flexOne}>
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
       <Animated.Image
         sharedTransitionTag={route.params.sharedTransitionTag + 'image'}
         source={photo}

apps/common-app/src/examples/SharedElementTransitions/LayoutAnimation.tsx

@@ -53,7 +53,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
       <Animated.View entering={SlideInLeft.delay(1000)} exiting={SlideOutLeft}>
         <Button
           title="go back"
-          onPress={() => navigation.navigate('Screen1')}
+          onPress={() => navigation.popTo('Screen1')}
         />
       </Animated.View>
     </View>

apps/common-app/src/examples/SharedElementTransitions/ManyScreens.tsx

@@ -21,7 +21,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <View style={styles.container}>
       <Animated.View style={styles.greenBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
       <Button title="Screen3" onPress={() => navigation.navigate('Screen3')} />
     </View>
   );
@@ -31,8 +31,8 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <View style={styles.flexOne}>
       <Animated.View style={styles.blueBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
-      <Button title="Screen2" onPress={() => navigation.navigate('Screen2')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
+      <Button title="Screen2" onPress={() => navigation.popTo('Screen2')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/ManyTags.tsx

@@ -63,7 +63,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
         sharedTransitionTag="placeholder1"
         style={styles.greenBoxScreenTwo}
       />
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/Modals.tsx

@@ -100,7 +100,7 @@ function Screen2({
   const { title, sharedTransitionTag } = route.params;
 
   const goNext = () => {
-    navigation.navigate('Screen1', {
+    navigation.popTo('Screen1', {
       title,
       sharedTransitionTag,
     });

apps/common-app/src/examples/SharedElementTransitions/NestedRotation.tsx

@@ -55,7 +55,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
           />
         </Animated.View>
       </Animated.View>
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/NestedStacks.tsx

@@ -21,7 +21,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <View style={styles.container}>
       <Animated.View style={styles.greenBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
       <Button title="Screen3" onPress={() => navigation.navigate('Screen3')} />
     </View>
   );
@@ -31,8 +31,8 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (
     <View style={styles.flexOne}>
       <Animated.View style={styles.blueBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
-      <Button title="Screen2" onPress={() => navigation.navigate('Screen2')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
+      <Button title="Screen2" onPress={() => navigation.popTo('Screen2')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/ReducedMotionSharedExample.tsx

@@ -117,7 +117,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
           </Animated.Text>
         </Animated.View>
       ))}
-      <Button title="go back" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
     </View>
   );
 }

apps/common-app/src/examples/SharedElementTransitions/RestoreState.tsx

@@ -45,11 +45,11 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
     <View style={styles.container}>
       <Button
         title="go to screen1"
-        onPress={() => navigation.navigate('Screen1')}
+        onPress={() => navigation.popTo('Screen1')}
       />
       <Button
         title="go to screen2"
-        onPress={() => navigation.navigate('Screen2')}
+        onPress={() => navigation.popTo('Screen2')}
       />
     </View>
   );

apps/common-app/src/examples/SharedElementTransitions/TransitionRestart.tsx

@@ -67,7 +67,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
         title="1 -> 2"
         onPress={() => navigationSequence(navigation, 'Screen1', 'Screen2')}
       />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
       <Button title="Screen3" onPress={() => navigation.navigate('Screen3')} />
     </View>
   );
@@ -78,8 +78,8 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
     <View style={styles.flexOne}>
       <SharedView style={styles.blueBox} />
       <SharedViewWithAnimation style={styles.blueBox} />
-      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
-      <Button title="Screen2" onPress={() => navigation.navigate('Screen2')} />
+      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
+      <Button title="Screen2" onPress={() => navigation.popTo('Screen2')} />
     </View>
   );
 }

apps/fabric-example/ios/Podfile.lock

@@ -1834,7 +1834,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.35.0):
+  - RNScreens (4.0.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1855,9 +1855,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.35.0)
+    - RNScreens/common (= 4.0.0)
     - Yoga
-  - RNScreens/common (3.35.0):
+  - RNScreens/common (4.0.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2230,7 +2230,7 @@ SPEC CHECKSUMS:
   RNFlashList: 6f169ad83e52579b7754cbbcec1b004c27d82c93
   RNGestureHandler: fc5ce5bf284640d3af6431c3a5c3bc121e98d045
   RNReanimated: 2db902281618797873d75426f334ede4e503baf8
-  RNScreens: e389d6a6a66a4f0d3662924ecae803073ccce8ec
+  RNScreens: 2fe13c8d610ef2d9d5ace2e7d85b716ec0f5217c
   RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: db69236006b8b1c6d55ab453390c882306cbf219

apps/fabric-example/package.json

@@ -16,8 +16,8 @@
     "@react-native-community/slider": "^4.5.5",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.9.0",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
     "@shopify/flash-list": "^1.7.1",
     "common-app": "workspace:*",
     "react": "18.3.1",
@@ -26,7 +26,7 @@
     "react-native-pager-view": "^6.4.1",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "^4.13.1",
-    "react-native-screens": "3.35.0",
+    "react-native-screens": "^4.0.0",
     "react-native-svg": "^15.8.0"
   },
   "devDependencies": {

apps/macos-example/package.json

@@ -14,9 +14,9 @@
     "@react-native-community/slider": "^4.5.5",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.9.0",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
+    "@react-navigation/stack": "^7.0.0",
     "@shopify/flash-list": "^1.7.1",
     "common-app": "workspace:*",
     "react": "18.3.1",
@@ -26,7 +26,7 @@
     "react-native-pager-view": "^6.4.1",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "^4.13.1",
-    "react-native-screens": "3.35.0",
+    "react-native-screens": "^4.0.0",
     "react-native-svg": "^15.8.0"
   },
   "devDependencies": {

apps/paper-example/ios/Podfile.lock

@@ -1688,7 +1688,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.35.0):
+  - RNScreens (4.0.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2020,7 +2020,7 @@ SPEC CHECKSUMS:
   RNFlashList: 115dd44377580761bff386a0caebf165424cf16f
   RNGestureHandler: 511250b190a284388f9dd0d2e56c1df76f14cfb8
   RNReanimated: 9ef3b1908a15b0b778edd6dacad9c71e7fe9e849
-  RNScreens: c7ceced6a8384cb9be5e7a5e88e9e714401fd958
+  RNScreens: de948b09c9a30f3ea52f9840dd6f8ce92b4e33d3
   RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: db69236006b8b1c6d55ab453390c882306cbf219