diff --git a/apps/common-app/package.json b/apps/common-app/package.json
index 5778b89e732..b924363a1aa 100644
--- a/apps/common-app/package.json
+++ b/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"
diff --git a/apps/common-app/src/App.tsx b/apps/common-app/src/App.tsx
index 52b6bdf5f53..16d1451c8bd 100644
--- a/apps/common-app/src/App.tsx
+++ b/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')} />
   );
 }
 
diff --git a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx b/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
index 35959ae67f9..eb36fb162f3 100644
--- a/apps/common-app/src/examples/LayoutAnimations/LayoutTransitionExample.tsx
+++ b/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>
   );
 }
 
diff --git a/apps/common-app/src/examples/LayoutAnimations/NativeModals.tsx b/apps/common-app/src/examples/LayoutAnimations/NativeModals.tsx
index 3c92240044a..9f2503ce476 100644
--- a/apps/common-app/src/examples/LayoutAnimations/NativeModals.tsx
+++ b/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>
diff --git a/apps/common-app/src/examples/ScreenStackExample.tsx b/apps/common-app/src/examples/ScreenStackExample.tsx
index f2910b59b32..7ae31d41c96 100644
--- a/apps/common-app/src/examples/ScreenStackExample.tsx
+++ b/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>
   );
 }
 
diff --git a/apps/common-app/src/examples/SharedElementTransitions/BorderRadii.tsx b/apps/common-app/src/examples/SharedElementTransitions/BorderRadii.tsx
index b190bc53646..1f7a36aa7cb 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/BorderRadii.tsx
+++ b/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"
diff --git a/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx b/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx
index 451132256f3..fc77ddf9f39 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx
+++ b/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>
   );
diff --git a/apps/common-app/src/examples/SharedElementTransitions/CustomTransition.tsx b/apps/common-app/src/examples/SharedElementTransitions/CustomTransition.tsx
index 5b0b07d9d25..c2492bdd9dd 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/CustomTransition.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/FlatList.tsx b/apps/common-app/src/examples/SharedElementTransitions/FlatList.tsx
index 79dda15018d..6e6b27dfa9e 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/FlatList.tsx
+++ b/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}
diff --git a/apps/common-app/src/examples/SharedElementTransitions/LayoutAnimation.tsx b/apps/common-app/src/examples/SharedElementTransitions/LayoutAnimation.tsx
index d638a6efaea..cabdfe76b01 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/LayoutAnimation.tsx
+++ b/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>
diff --git a/apps/common-app/src/examples/SharedElementTransitions/ManyScreens.tsx b/apps/common-app/src/examples/SharedElementTransitions/ManyScreens.tsx
index a9a0d14af49..18df6501610 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/ManyScreens.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/ManyTags.tsx b/apps/common-app/src/examples/SharedElementTransitions/ManyTags.tsx
index fcd79f0c071..eceb822b89f 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/ManyTags.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/Modals.tsx b/apps/common-app/src/examples/SharedElementTransitions/Modals.tsx
index 5b3d8c69b6d..10fe8d625da 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/Modals.tsx
+++ b/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,
     });
diff --git a/apps/common-app/src/examples/SharedElementTransitions/NestedRotation.tsx b/apps/common-app/src/examples/SharedElementTransitions/NestedRotation.tsx
index a67facad6c4..f9a0f2aa867 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/NestedRotation.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/NestedStacks.tsx b/apps/common-app/src/examples/SharedElementTransitions/NestedStacks.tsx
index eab7e203837..d2ad729660d 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/NestedStacks.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/ReducedMotionSharedExample.tsx b/apps/common-app/src/examples/SharedElementTransitions/ReducedMotionSharedExample.tsx
index 97be5950a1b..c189efc246b 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/ReducedMotionSharedExample.tsx
+++ b/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>
   );
 }
diff --git a/apps/common-app/src/examples/SharedElementTransitions/RestoreState.tsx b/apps/common-app/src/examples/SharedElementTransitions/RestoreState.tsx
index c845d1d8b09..324fb8af3da 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/RestoreState.tsx
+++ b/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>
   );
diff --git a/apps/common-app/src/examples/SharedElementTransitions/TransitionRestart.tsx b/apps/common-app/src/examples/SharedElementTransitions/TransitionRestart.tsx
index f80f6276648..db4c62a8828 100644
--- a/apps/common-app/src/examples/SharedElementTransitions/TransitionRestart.tsx
+++ b/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>
   );
 }
diff --git a/apps/fabric-example/ios/Podfile.lock b/apps/fabric-example/ios/Podfile.lock
index 434613b03b6..03463c6c636 100644
--- a/apps/fabric-example/ios/Podfile.lock
+++ b/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
diff --git a/apps/fabric-example/package.json b/apps/fabric-example/package.json
index 2208f886602..1ff5cc17ce8 100644
--- a/apps/fabric-example/package.json
+++ b/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": {
diff --git a/apps/macos-example/package.json b/apps/macos-example/package.json
index fa614da8169..51f225b9245 100644
--- a/apps/macos-example/package.json
+++ b/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": {
diff --git a/apps/paper-example/ios/Podfile.lock b/apps/paper-example/ios/Podfile.lock
index b3b68dbb99a..64e1c430d9e 100644
--- a/apps/paper-example/ios/Podfile.lock
+++ b/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
diff --git a/apps/paper-example/package.json b/apps/paper-example/package.json
index 24cd2066577..49dbcb565a4 100644
--- a/apps/paper-example/package.json
+++ b/apps/paper-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": {
diff --git a/apps/web-example/package.json b/apps/web-example/package.json
index 35dc001a81c..5be8616a0f2 100644
--- a/apps/web-example/package.json
+++ b/apps/web-example/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
-    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native": "^7.0.0",
     "@shopify/flash-list": "^1.7.1",
     "common-app": "workspace:*",
     "expo": "~51.0.2",
diff --git a/yarn.lock b/yarn.lock
index d62ba14f112..6d3397c3d5a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6310,106 +6310,112 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/bottom-tabs@npm:^6.6.1":
-  version: 6.6.1
-  resolution: "@react-navigation/bottom-tabs@npm:6.6.1"
+"@react-navigation/bottom-tabs@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/bottom-tabs@npm:7.0.0"
   dependencies:
-    "@react-navigation/elements": "npm:^1.3.31"
+    "@react-navigation/elements": "npm:^2.0.0"
     color: "npm:^4.2.3"
-    warn-once: "npm:^0.1.0"
   peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
+    "@react-navigation/native": ^7.0.0
+    react: ">= 18.2.0"
     react-native: "*"
-    react-native-safe-area-context: ">= 3.0.0"
-    react-native-screens: ">= 3.0.0"
-  checksum: 10/572f67c1ea26ac52a0c599064957ec6ac5cd0eee810d2e3cd5b4f4beb1016fbd5c5e8eb54c4d62836e1afe90c5ef922b31a288f41e0c442123dcfc417aa8fd7f
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: 10/164b9ee4176aba8e0082ea163cae10cca2a6b59f11ab678ce271a6e2d203bb8297d30a97df525a0517fb149288134d0db9640165a1d49e709b6abcbcca1bdcd1
   languageName: node
   linkType: hard
 
-"@react-navigation/core@npm:^6.4.17":
-  version: 6.4.17
-  resolution: "@react-navigation/core@npm:6.4.17"
+"@react-navigation/core@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/core@npm:7.0.0"
   dependencies:
-    "@react-navigation/routers": "npm:^6.1.9"
+    "@react-navigation/routers": "npm:^7.0.0"
     escape-string-regexp: "npm:^4.0.0"
-    nanoid: "npm:^3.1.23"
+    nanoid: "npm:3.3.7"
     query-string: "npm:^7.1.3"
-    react-is: "npm:^16.13.0"
+    react-is: "npm:^18.2.0"
     use-latest-callback: "npm:^0.2.1"
+    use-sync-external-store: "npm:^1.2.2"
   peerDependencies:
     react: "*"
-  checksum: 10/481470361c7dd638d8af513ca559265829e8de5a2ff18c207d8d1c9e2d65606318061ffe369afbccfea3c6d027d38ad539ae5bae8863d9cedd8eaeafeb18426c
+  checksum: 10/bfc7f2d4141dc8ae021d2defa20c49e8bfdf02a2938bdfa3a2a2f8d2f82cd4f17c8264d47046d0ab462617e3dc2f5c2f8507cc9e99f4cc7614c35f08650a559f
   languageName: node
   linkType: hard
 
-"@react-navigation/elements@npm:^1.3.31":
-  version: 1.3.31
-  resolution: "@react-navigation/elements@npm:1.3.31"
+"@react-navigation/elements@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@react-navigation/elements@npm:2.0.0"
+  dependencies:
+    color: "npm:^4.2.3"
   peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
+    "@react-native-masked-view/masked-view": ">= 0.2.0"
+    "@react-navigation/native": ^7.0.0
+    react: ">= 18.2.0"
     react-native: "*"
-    react-native-safe-area-context: ">= 3.0.0"
-  checksum: 10/379b3657300f9ab8043979f1ecaea95dce96253903db8d6954468e39dc7cf0710cc08345fa6625071a1505b6442a395e0e20bde39c0b997fd90fea370275fc08
+    react-native-safe-area-context: ">= 4.0.0"
+  peerDependenciesMeta:
+    "@react-native-masked-view/masked-view":
+      optional: true
+  checksum: 10/ea1a22763bcc2d336aaac3578340163f2878a70936a1574cac6e6c17be9ef937fced698a1033735024137efbb76ccac3d3d4e150f2d77964a0533468833e7b86
   languageName: node
   linkType: hard
 
-"@react-navigation/native-stack@npm:^6.11.0":
-  version: 6.11.0
-  resolution: "@react-navigation/native-stack@npm:6.11.0"
+"@react-navigation/native-stack@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/native-stack@npm:7.0.0"
   dependencies:
-    "@react-navigation/elements": "npm:^1.3.31"
-    warn-once: "npm:^0.1.0"
+    "@react-navigation/elements": "npm:^2.0.0"
+    warn-once: "npm:^0.1.1"
   peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
+    "@react-navigation/native": ^7.0.0
+    react: ">= 18.2.0"
     react-native: "*"
-    react-native-safe-area-context: ">= 3.0.0"
-    react-native-screens: ">= 3.0.0"
-  checksum: 10/d27212088dde4ca16c78d8f85187d452d56cc9243506c049d2595b61c10eda44368ab01c53e729777d9900fe5c3a4dfeae2598b1a534508d6a1df8ab35c1a4dc
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: 10/c81f5e2e98506057cb6e7e878371f7cf1e633432bd2742380439fb7c09becf1bdf83252b20bce90427d9fb9b58f796d56b3d2c2704f59d4e3348bc0f4b1df6dd
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^6.1.18":
-  version: 6.1.18
-  resolution: "@react-navigation/native@npm:6.1.18"
+"@react-navigation/native@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/native@npm:7.0.0"
   dependencies:
-    "@react-navigation/core": "npm:^6.4.17"
+    "@react-navigation/core": "npm:^7.0.0"
     escape-string-regexp: "npm:^4.0.0"
     fast-deep-equal: "npm:^3.1.3"
-    nanoid: "npm:^3.1.23"
+    nanoid: "npm:3.3.7"
+    use-latest-callback: "npm:^0.2.1"
   peerDependencies:
-    react: "*"
+    react: ">= 18.2.0"
     react-native: "*"
-  checksum: 10/1c16813e7d1d796519d0c3a9163de8be6d4af0afa74d9d88ec6729f8c0f533540250f09e39063f4a1eafb9ff71c3f3a9cc9d420ba75aa3eb7f42834f4ba0ee20
+  checksum: 10/7e135eeca9db6ed1f7b3d42c00d03d9ac56c5bf7e04d55177261bd655bd14b613ed8cf261e2f6e705113d38e7b885ff1d6be108b12f0686cd62b6fbbff07e813
   languageName: node
   linkType: hard
 
-"@react-navigation/routers@npm:^6.1.9":
-  version: 6.1.9
-  resolution: "@react-navigation/routers@npm:6.1.9"
+"@react-navigation/routers@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/routers@npm:7.0.0"
   dependencies:
-    nanoid: "npm:^3.1.23"
-  checksum: 10/35af21aa89074b6c4ef8e7a52701694cf393eda4bc3b237e8c908b27468a2f14c04acfaf702acfe833713730e65cac31733e411a3bdf459859e9b1c823d0c06e
+    nanoid: "npm:3.3.7"
+  checksum: 10/ce51c7a5f8ea67dca34b40666d31262d28a3350f34d1bbb6addfb42d9ade4ac2bf74fcf97859a27587bc1dc15267d5f682a88638ff0811acadc07e42c6a0389e
   languageName: node
   linkType: hard
 
-"@react-navigation/stack@npm:^6.4.1":
-  version: 6.4.1
-  resolution: "@react-navigation/stack@npm:6.4.1"
+"@react-navigation/stack@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@react-navigation/stack@npm:7.0.0"
   dependencies:
-    "@react-navigation/elements": "npm:^1.3.31"
+    "@react-navigation/elements": "npm:^2.0.0"
     color: "npm:^4.2.3"
-    warn-once: "npm:^0.1.0"
   peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
+    "@react-navigation/native": ^7.0.0
+    react: ">= 18.2.0"
     react-native: "*"
-    react-native-gesture-handler: ">= 1.0.0"
-    react-native-safe-area-context: ">= 3.0.0"
-    react-native-screens: ">= 3.0.0"
-  checksum: 10/8eb7ae7cfffae1963ed4b386165f08517c42ff05a00f9c6d3d28827016810135dd96033f36916e1b58ddd73bf7d8a6f38f3afc782e5f0f84c1d722d3d296968c
+    react-native-gesture-handler: ">= 2.0.0"
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: 10/da77d65728fe0d690a84432ea730467d894d3faa1e276847d9c96d3c95cdb64a49ec67a11601ae5e21b1e745495fcf4e60faef8060a77924b83f912af5880f11
   languageName: node
   linkType: hard
 
@@ -9217,10 +9223,10 @@ __metadata:
     "@react-native-community/slider": "npm:^4.5.5"
     "@react-native-masked-view/masked-view": "npm:^0.3.1"
     "@react-native-picker/picker": "npm:^2.9.0"
-    "@react-navigation/bottom-tabs": "npm:^6.6.1"
-    "@react-navigation/native": "npm:^6.1.18"
-    "@react-navigation/native-stack": "npm:^6.11.0"
-    "@react-navigation/stack": "npm:^6.4.1"
+    "@react-navigation/bottom-tabs": "npm:^7.0.0"
+    "@react-navigation/native": "npm:^7.0.0"
+    "@react-navigation/native-stack": "npm:^7.0.0"
+    "@react-navigation/stack": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
     "@stylexjs/babel-plugin": "npm:^0.7.5"
     "@tsconfig/react-native": "npm:^3.0.0"
@@ -9236,7 +9242,7 @@ __metadata:
     react-native-pager-view: "npm:^6.4.1"
     react-native-reanimated: "workspace:*"
     react-native-safe-area-context: "npm:^4.13.1"
-    react-native-screens: "npm:3.35.0"
+    react-native-screens: "npm:^4.0.0"
     react-native-svg: "npm:^15.8.0"
     react-strict-dom: "npm:0.0.27"
     typescript: "npm:~5.3.0"
@@ -11750,8 +11756,8 @@ __metadata:
     "@react-native/eslint-config": "npm:0.76.1"
     "@react-native/metro-config": "npm:0.76.1"
     "@react-native/typescript-config": "npm:0.76.1"
-    "@react-navigation/native": "npm:^6.1.18"
-    "@react-navigation/native-stack": "npm:^6.11.0"
+    "@react-navigation/native": "npm:^7.0.0"
+    "@react-navigation/native-stack": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
     "@types/react": "npm:^18.2.6"
     "@types/react-test-renderer": "npm:^18.0.0"
@@ -11767,7 +11773,7 @@ __metadata:
     react-native-pager-view: "npm:^6.4.1"
     react-native-reanimated: "workspace:*"
     react-native-safe-area-context: "npm:^4.13.1"
-    react-native-screens: "npm:3.35.0"
+    react-native-screens: "npm:^4.0.0"
     react-native-svg: "npm:^15.8.0"
     react-test-renderer: "npm:18.3.1"
     typescript: "npm:~5.3.0"
@@ -15156,9 +15162,9 @@ __metadata:
     "@react-native/eslint-config": "npm:0.75.4"
     "@react-native/metro-config": "npm:0.75.4"
     "@react-native/typescript-config": "npm:0.75.4"
-    "@react-navigation/native": "npm:^6.1.18"
-    "@react-navigation/native-stack": "npm:^6.11.0"
-    "@react-navigation/stack": "npm:^6.4.1"
+    "@react-navigation/native": "npm:^7.0.0"
+    "@react-navigation/native-stack": "npm:^7.0.0"
+    "@react-navigation/stack": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
     "@types/react": "npm:^18.2.6"
     "@types/react-test-renderer": "npm:^18.0.0"
@@ -15174,7 +15180,7 @@ __metadata:
     react-native-pager-view: "npm:^6.4.1"
     react-native-reanimated: "workspace:*"
     react-native-safe-area-context: "npm:^4.13.1"
-    react-native-screens: "npm:3.35.0"
+    react-native-screens: "npm:^4.0.0"
     react-native-svg: "npm:^15.8.0"
     react-test-renderer: "npm:18.2.0"
     typescript: "npm:~5.3.0"
@@ -16511,7 +16517,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.6, nanoid@npm:^3.3.7":
+"nanoid@npm:3.3.7, nanoid@npm:^3.3.6, nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
   bin:
@@ -17198,8 +17204,8 @@ __metadata:
     "@react-native/eslint-config": "npm:0.76.1"
     "@react-native/metro-config": "npm:0.76.1"
     "@react-native/typescript-config": "npm:0.76.1"
-    "@react-navigation/native": "npm:^6.1.18"
-    "@react-navigation/native-stack": "npm:^6.11.0"
+    "@react-navigation/native": "npm:^7.0.0"
+    "@react-navigation/native-stack": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
     "@types/jest": "npm:^29.2.1"
     "@types/react": "npm:^18.2.6"
@@ -17216,7 +17222,7 @@ __metadata:
     react-native-pager-view: "npm:^6.4.1"
     react-native-reanimated: "workspace:*"
     react-native-safe-area-context: "npm:^4.13.1"
-    react-native-screens: "npm:3.35.0"
+    react-native-screens: "npm:^4.0.0"
     react-native-svg: "npm:^15.8.0"
     react-test-renderer: "npm:18.3.1"
     typescript: "npm:~5.3.0"
@@ -17998,7 +18004,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10/5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
@@ -18225,16 +18231,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:3.35.0":
-  version: 3.35.0
-  resolution: "react-native-screens@npm:3.35.0"
+"react-native-screens@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "react-native-screens@npm:4.0.0"
   dependencies:
     react-freeze: "npm:^1.0.0"
     warn-once: "npm:^0.1.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10/18085fb68bb2349330cb9b536f79161474788bc478b4b13e23de26d80b68000c60c0b79ba19d430ed0693350c062863f0620da6397d3bd24da08c09181c0fcfd
+  checksum: 10/460867348d9293ea92efb9d9083654ee6ae0adcde15bed54dd57c0512d7fe3d2206bfdd8686eb770a397cb37e4e896ea40af2add8772f38d54fccd55765b1872
   languageName: node
   linkType: hard
 
@@ -21169,6 +21175,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "use-sync-external-store@npm:1.2.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/671e9c190aab9a8374a5d468c6ba17f52c38b6fae970110bc196fc1e2b57204149aea9619be49a1bb5207fb6e51d8afd19c3bcb94afe61813fed039821461dc0
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -21307,7 +21322,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:0.1.1, warn-once@npm:^0.1.0":
+"warn-once@npm:0.1.1, warn-once@npm:^0.1.0, warn-once@npm:^0.1.1":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: 10/e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d
@@ -21330,7 +21345,7 @@ __metadata:
     "@babel/core": "npm:^7.20.0"
     "@expo/metro-runtime": "npm:^3.2.1"
     "@expo/vector-icons": "npm:^14.0.0"
-    "@react-navigation/native": "npm:^6.1.18"
+    "@react-navigation/native": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
     "@types/eslint": "npm:^8"
     common-app: "workspace:*"