chore: migrate to screens v4 and navigation v7

apps/common-app/package.json

@@ -36,10 +36,10 @@
     "@react-native-community/slider": "patch:@react-native-community/slider@npm%3A4.5.3#~/.yarn/patches/@react-native-community-slider-npm-4.5.3-6fedb47a11.patch",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "patch:@react-native-picker/picker@npm%3A2.8.0#~/.yarn/patches/@react-native-picker-picker-npm-2.8.0-9d55144b66.patch",
-    "@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-rc.33",
+    "@react-navigation/native": "^7.0.0-rc.20",
+    "@react-navigation/native-stack": "^7.0.0-rc.28",
+    "@react-navigation/stack": "^7.0.0-rc.27",
     "@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": "patch:react-native-pager-view@npm%3A6.4.1#~/.yarn/patches/react-native-pager-view-npm-6.4.1-2322ade6e0.patch",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "patch:react-native-safe-area-context@npm%3A4.11.0#~/.yarn/patches/react-native-safe-area-context-npm-4.11.0-f8b3b898df.patch",
-    "react-native-screens": "patch:react-native-screens@npm%3A3.34.0#~/.yarn/patches/react-native-screens-npm-3.34.0-3babbb1374.patch",
+    "react-native-screens": "4.0.0-beta.13",
     "react-native-svg": "15.8.0-rc.1",
     "react-strict-dom": "0.0.27",
     "typescript": "~5.3.0"

apps/common-app/src/App.tsx

@@ -171,7 +171,7 @@ function BackButton(props: HeaderBackButtonProps) {
   const navigation = useNavigation<NavigationProp<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.34.0):
+  - RNScreens (4.0.0-beta.13):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1855,9 +1855,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.34.0)
+    - RNScreens/common (= 4.0.0-beta.13)
     - Yoga
-  - RNScreens/common (3.34.0):
+  - RNScreens/common (4.0.0-beta.13):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2230,11 +2230,11 @@ SPEC CHECKSUMS:
   RNFlashList: 6f169ad83e52579b7754cbbcec1b004c27d82c93
   RNGestureHandler: c374c750a0a9bacd95f5c740d146ab9428549d6b
   RNReanimated: 2db902281618797873d75426f334ede4e503baf8
-  RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
+  RNScreens: 4e3efc2486e31429d0b1fb20a75be5aa85d71945
   RNSVG: 08750404f92a36162a92522cc77dee437be1d257
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 8833bd4378ffd79f1dea711d6dc7231c09e63590
+  Yoga: 2a74e67570a7902969ff44f35dd41f47a9693be8
 
 PODFILE CHECKSUM: 3eb88d49c8fe32af0ac2c85501e29d29171f1070
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

apps/fabric-example/package.json

@@ -16,8 +16,8 @@
     "@react-native-community/slider": "patch:@react-native-community/slider@npm%3A4.5.3#~/.yarn/patches/@react-native-community-slider-npm-4.5.3-6fedb47a11.patch",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "patch:@react-native-picker/picker@npm%3A2.8.0#~/.yarn/patches/@react-native-picker-picker-npm-2.8.0-9d55144b66.patch",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/native": "^7.0.0-rc.20",
+    "@react-navigation/native-stack": "^7.0.0-rc.28",
     "@shopify/flash-list": "^1.7.1",
     "common-app": "workspace:*",
     "react": "18.3.1",
@@ -26,7 +26,7 @@
     "react-native-pager-view": "patch:react-native-pager-view@npm%3A6.4.1#~/.yarn/patches/react-native-pager-view-npm-6.4.1-2322ade6e0.patch",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "patch:react-native-safe-area-context@npm%3A4.11.0#~/.yarn/patches/react-native-safe-area-context-npm-4.11.0-f8b3b898df.patch",
-    "react-native-screens": "patch:react-native-screens@npm%3A3.34.0#~/.yarn/patches/react-native-screens-npm-3.34.0-3babbb1374.patch",
+    "react-native-screens": "4.0.0-beta.13",
     "react-native-svg": "15.8.0-rc.1"
   },
   "devDependencies": {

apps/macos-example/macos/Podfile.lock

@@ -1270,11 +1270,11 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
   RNCPicker: 0173dedc74776227ec6dcc61bb85cd9f07bbb2ac
   RNGestureHandler: bb81850add626ddd265294323310fec6e861c96b
-  RNReanimated: d3f3b578b15878865911addbea874b3e5cfb1f2a
+  RNReanimated: e9af702223a21fb8cf3d5336303bfa3522d88541
   RNSVG: 01eb8d8a0e2289ec3ecc9626ce920e00d2174992
   SocketRocket: f6c6249082c011e6de2de60ed641ef8bbe0cfac9
-  Yoga: 329461de6a23b9e0c108d197fd0f6e87c8c8ecf2
+  Yoga: 0639c9c8a20ae8043b0b64e2ef6d7a2cd5806aac
 
 PODFILE CHECKSUM: ddae34ca2842288eb8f70e6df3c2d638c2f56027
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

apps/macos-example/package.json

@@ -14,9 +14,9 @@
     "@react-native-community/slider": "patch:@react-native-community/slider@npm%3A4.5.3#~/.yarn/patches/@react-native-community-slider-npm-4.5.3-6fedb47a11.patch",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "patch:@react-native-picker/picker@npm%3A2.8.0#~/.yarn/patches/@react-native-picker-picker-npm-2.8.0-9d55144b66.patch",
-    "@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-rc.20",
+    "@react-navigation/native-stack": "^7.0.0-rc.28",
+    "@react-navigation/stack": "^7.0.0-rc.27",
     "@shopify/flash-list": "^1.7.1",
     "common-app": "workspace:*",
     "react": "18.2.0",
@@ -26,7 +26,7 @@
     "react-native-pager-view": "patch:react-native-pager-view@npm%3A6.4.1#~/.yarn/patches/react-native-pager-view-npm-6.4.1-2322ade6e0.patch",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "patch:react-native-safe-area-context@npm%3A4.11.0#~/.yarn/patches/react-native-safe-area-context-npm-4.11.0-f8b3b898df.patch",
-    "react-native-screens": "patch:react-native-screens@npm%3A3.34.0#~/.yarn/patches/react-native-screens-npm-3.34.0-3babbb1374.patch",
+    "react-native-screens": "4.0.0-beta.13",
     "react-native-svg": "15.8.0-rc.1"
   },
   "devDependencies": {

apps/paper-example/ios/Podfile.lock

@@ -1688,7 +1688,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.34.0):
+  - RNScreens (4.0.0-beta.13):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2019,12 +2019,12 @@ SPEC CHECKSUMS:
   RNCPicker: 0173dedc74776227ec6dcc61bb85cd9f07bbb2ac
   RNFlashList: 115dd44377580761bff386a0caebf165424cf16f
   RNGestureHandler: 6dfe7692a191ee224748964127114edf057a1475
-  RNReanimated: 85f840df2d1e8d23bd2c05ca2d9b3aa6497ecc5f
-  RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06
+  RNReanimated: 9ef3b1908a15b0b778edd6dacad9c71e7fe9e849
+  RNScreens: 553584d07373a55d615a2db7d4cddd53c22f9e91
   RNSVG: 01eb8d8a0e2289ec3ecc9626ce920e00d2174992
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 8833bd4378ffd79f1dea711d6dc7231c09e63590
+  Yoga: 2a74e67570a7902969ff44f35dd41f47a9693be8
 
 PODFILE CHECKSUM: 44956aee8c836a85949aa1fa8dde2c10e661633e
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2