diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md
index 3673051ab0c..1f5202436ee 100755
--- a/versioned_docs/version-7.x/drawer-based-navigation.md
+++ b/versioned_docs/version-7.x/drawer-based-navigation.md
@@ -78,9 +78,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -91,7 +93,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function NotificationsScreen({ navigation }) {
+function NotificationsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.goBack()} title="Go back home" />
@@ -203,7 +207,7 @@ export default function App() {
 ```js name="Drawer open and close" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
@@ -211,7 +215,9 @@ import {
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
@@ -359,7 +365,7 @@ export default function App() {
 ```js name="Drawer toggle" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
@@ -367,7 +373,9 @@ import {
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
@@ -522,7 +530,7 @@ export default function App() {
 ```js name="Navigation dispatcher" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer, DrawerActions } from '@react-navigation/native';
+import { NavigationContainer, useNavigation, DrawerActions } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
@@ -530,7 +538,9 @@ import {
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md
index a220345143a..c9ce92789ae 100644
--- a/versioned_docs/version-7.x/elements.md
+++ b/versioned_docs/version-7.x/elements.md
@@ -234,14 +234,16 @@ export default App;
 ```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
 import { Button, View, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 // codeblock-focus-start
 import { BlurView } from 'expo-blur';
 
 // codeblock-focus-end
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -252,7 +254,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
diff --git a/versioned_docs/version-7.x/function-after-focusing-screen.md b/versioned_docs/version-7.x/function-after-focusing-screen.md
index e7d5344f624..146806dfc9e 100755
--- a/versioned_docs/version-7.x/function-after-focusing-screen.md
+++ b/versioned_docs/version-7.x/function-after-focusing-screen.md
@@ -84,11 +84,13 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 // codeblock-focus-end
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 // codeblock-focus-start
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       alert('Screen is focused');
diff --git a/versioned_docs/version-7.x/group.md b/versioned_docs/version-7.x/group.md
index 8a8e3bb98b8..a4778dd6427 100644
--- a/versioned_docs/version-7.x/group.md
+++ b/versioned_docs/version-7.x/group.md
@@ -110,11 +110,13 @@ import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
diff --git a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
index 73fa23e6851..cd3cbb10c67 100644
--- a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
+++ b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
@@ -137,7 +137,7 @@ export default function App() {
 ```js name="Hiding tabbar" snack version=7
 import * as React from 'react';
 import { Text, View, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -148,7 +148,9 @@ function EmptyScreen() {
   return <View />;
 }
 
-function Home({ navigation }) {
+function Home() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md
index eadd0405783..87a2eec8785 100755
--- a/versioned_docs/version-7.x/modal.md
+++ b/versioned_docs/version-7.x/modal.md
@@ -116,11 +116,13 @@ export default function App() {
 ```js name="Modal" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // codeblock-focus-start
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
@@ -132,7 +134,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ModalScreen({ navigation }) {
+function ModalScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is a modal!</Text>
diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md
index a5b1ca8cd13..189a46af746 100644
--- a/versioned_docs/version-7.x/multiple-drawers.md
+++ b/versioned_docs/version-7.x/multiple-drawers.md
@@ -80,9 +80,12 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
+import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -211,11 +214,13 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
+import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 const RightDrawerContext = React.createContext();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const { openRightDrawer } = React.useContext(RightDrawerContext);
 
   return (
@@ -340,9 +345,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -472,9 +479,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, Text, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
diff --git a/versioned_docs/version-7.x/navigation-context.md b/versioned_docs/version-7.x/navigation-context.md
index 148d31269cd..3b57228a98f 100755
--- a/versioned_docs/version-7.x/navigation-context.md
+++ b/versioned_docs/version-7.x/navigation-context.md
@@ -111,7 +111,9 @@ function SomeComponent() {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = React.useContext(NavigationContext);
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.goBack()}>Go back</Button>
diff --git a/versioned_docs/version-7.x/navigation-events.md b/versioned_docs/version-7.x/navigation-events.md
index f442487b8e5..b23f364a10d 100644
--- a/versioned_docs/version-7.x/navigation-events.md
+++ b/versioned_docs/version-7.x/navigation-events.md
@@ -58,7 +58,9 @@ Normally, you'd add an event listener in `React.useEffect` for function componen
 <samp id="simple-focus-and-blur" />
 
 ```js
-function Profile({ navigation }) {
+function Profile() {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       // do something
diff --git a/versioned_docs/version-7.x/navigation-object.md b/versioned_docs/version-7.x/navigation-object.md
index 48f2f00e0b9..72884c767e6 100755
--- a/versioned_docs/version-7.x/navigation-object.md
+++ b/versioned_docs/version-7.x/navigation-object.md
@@ -147,18 +147,22 @@ export default App;
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // codeblock-focus-start
-function HomeScreen({ navigation: { navigate } }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
       <Button
         onPress={() => {
           // highlight-start
-          navigate('Profile', { names: ['Brent', 'Satya', 'Michaś'] });
+          navigation.navigate('Profile', {
+            names: ['Brent', 'Satya', 'Michaś'],
+          });
           // highlight-end
         }}
       >
@@ -169,7 +173,9 @@ function HomeScreen({ navigation: { navigate } }) {
 }
 // codeblock-focus-end
 
-function ProfileScreen({ navigation, route }) {
+function ProfileScreen({ route }) {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
@@ -320,16 +326,20 @@ export default App;
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function HomeScreen({ navigation: { navigate } }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
       <Button
         onPress={() => {
-          navigate('Profile', { names: ['Brent', 'Satya', 'Michaś'] });
+          navigation.navigate('Profile', {
+            names: ['Brent', 'Satya', 'Michaś'],
+          });
         }}
       >
         Go to Brent's profile
@@ -339,7 +349,9 @@ function HomeScreen({ navigation: { navigate } }) {
 }
 
 // codeblock-focus-start
-function ProfileScreen({ navigation, route }) {
+function ProfileScreen({ route }) {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
@@ -502,16 +514,20 @@ export default App;
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function HomeScreen({ navigation: { navigate } }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
       <Button
         onPress={() => {
-          navigate('Profile', { names: ['Brent', 'Satya', 'Michaś'] });
+          navigation.navigate('Profile', {
+            names: ['Brent', 'Satya', 'Michaś'],
+          });
         }}
       >
         Go to Brents profile
@@ -520,7 +536,9 @@ function HomeScreen({ navigation: { navigate } }) {
   );
 }
 
-function ProfileScreen({ navigation, route }) {
+function ProfileScreen({ route }) {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
@@ -566,7 +584,9 @@ function ProfileScreen({ navigation, route }) {
   );
 }
 
-function SettingsScreen({ navigation, route }) {
+function SettingsScreen({ route }) {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings screen</Text>
@@ -712,16 +732,18 @@ export default App;
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function HomeScreen({ navigation: { navigate } }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
       <Button
         onPress={() => {
-          navigate('Profile', {
+          navigation.navigate('Profile', {
             friends: ['Brent', 'Satya', 'Michaś'],
             title: "Brent's Profile",
           });
@@ -734,7 +756,9 @@ function HomeScreen({ navigation: { navigate } }) {
 }
 
 // codeblock-focus-start
-function ProfileScreen({ navigation, route }) {
+function ProfileScreen({ route }) {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
@@ -876,10 +900,12 @@ export default App;
 import * as React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { Button } from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function HomeScreen({ navigation: { navigate } }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
@@ -891,7 +917,8 @@ function HomeScreen({ navigation: { navigate } }) {
 }
 
 // codeblock-focus-start
-function ProfileScreen({ navigation, route }) {
+function ProfileScreen({ route }) {
+  const navigation = useNavigation();
   const [value, onChangeText] = React.useState(route.params.title);
 
   React.useEffect(() => {
@@ -1026,10 +1053,12 @@ export default function App() {
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function SettingsScreen({ navigation }) {
+function SettingsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
@@ -1041,7 +1070,9 @@ function SettingsScreen({ navigation }) {
 }
 
 // codeblock-focus-start
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   React.useEffect(
     () => navigation.addListener('focus', () => alert('Screen was focused')),
     [navigation]
diff --git a/versioned_docs/version-7.x/preventing-going-back.md b/versioned_docs/version-7.x/preventing-going-back.md
index 847ee91abcf..9a703ad3911 100644
--- a/versioned_docs/version-7.x/preventing-going-back.md
+++ b/versioned_docs/version-7.x/preventing-going-back.md
@@ -129,11 +129,12 @@ const styles = StyleSheet.create({
 ```js name="Prevent going back" snack version=7
 import * as React from 'react';
 import { Button, Alert, View, TextInput, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // codeblock-focus-start
-const EditTextScreen = ({ navigation }) => {
+const EditTextScreen = () => {
+  const navigation = useNavigation();
   const [text, setText] = React.useState('');
 
   const hasUnsavedChanges = Boolean(text);
@@ -178,7 +179,9 @@ const EditTextScreen = ({ navigation }) => {
 };
 // codeblock-focus-end
 
-const HomeScreen = ({ navigation }) => {
+const HomeScreen = () => {
+  const navigation = useNavigation();
+
   return (
     <View style={styles.buttons}>
       <Button
diff --git a/versioned_docs/version-7.x/screen-options-resolution.md b/versioned_docs/version-7.x/screen-options-resolution.md
index 16055b9c0df..65e12558c06 100755
--- a/versioned_docs/version-7.x/screen-options-resolution.md
+++ b/versioned_docs/version-7.x/screen-options-resolution.md
@@ -326,11 +326,13 @@ export default function App() {
 ```js name="Parent options from a child" snack version=7
 import * as React from 'react';
 import { View, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function FeedScreen({ navigation }) {
+function FeedScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -506,6 +508,7 @@ import * as React from 'react';
 import { View, Button } from 'react-native';
 import {
   NavigationContainer,
+  useNavigation,
   getFocusedRouteNameFromRoute,
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -527,7 +530,9 @@ function getHeaderTitle(route) {
   }
 }
 
-function FeedScreen({ navigation }) {
+function FeedScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -676,11 +681,13 @@ export default function App() {
 ```js name="Reorganized navigators" snack version=7
 import * as React from 'react';
 import { View, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-function FeedScreen({ navigation }) {
+function FeedScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md
index 8a0ad063bb8..93be50ac853 100644
--- a/versioned_docs/version-7.x/screen-options.md
+++ b/versioned_docs/version-7.x/screen-options.md
@@ -87,12 +87,14 @@ export default function App() {
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import Button from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home Screen</Text>
@@ -103,7 +105,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Profile Screen</Text>
@@ -252,13 +256,15 @@ export default function App() {
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 function ScreenWithButton(screenName, navigateTo) {
-  return function ({ navigation }) {
+  return function () {
+    const navigation = useNavigation();
+
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>{screenName} Screen</Text>
@@ -272,6 +278,11 @@ function ScreenWithButton(screenName, navigateTo) {
   };
 }
 
+const HomeScreen = ScreenWithButton('Home', 'Profile');
+const ProfileScreen = ScreenWithButton('Profile', 'Settings');
+const SettingsScreen = ScreenWithButton('Settings', 'Share');
+const ShareScreen = ScreenWithButton('Share');
+
 export default function App() {
   return (
     <NavigationContainer>
@@ -282,19 +293,19 @@ export default function App() {
         >
           <Stack.Screen
             name="Home"
-            component={ScreenWithButton('Home', 'Profile')}
+            component={HomeScreen}
           />
           <Stack.Screen
             name="Profile"
-            component={ScreenWithButton('Profile', 'Settings')}
+            component={ProfileScreen}
           />
         </Stack.Group>
         <Stack.Group screenOptions={{ presentation: 'modal' }}>
           <Stack.Screen
             name="Settings"
-            component={ScreenWithButton('Settings', 'Share')}
+            component={SettingsScreen}
           />
-          <Stack.Screen name="Share" component={ScreenWithButton('Share')} />
+          <Stack.Screen name="Share" component={ShareScreen} />
         </Stack.Group>
       </Stack.Navigator>
       // codeblock-focus-end
diff --git a/versioned_docs/version-7.x/screen-tracking.md b/versioned_docs/version-7.x/screen-tracking.md
index 8f9cf17ee42..ae157d1493a 100644
--- a/versioned_docs/version-7.x/screen-tracking.md
+++ b/versioned_docs/version-7.x/screen-tracking.md
@@ -107,13 +107,16 @@ import { View } from 'react-native';
 // codeblock-focus-start
 import {
   NavigationContainer,
+  useNavigation,
   useNavigationContainerRef,
 } from '@react-navigation/native';
 // codeblock-focus-end
 import { Button } from '@react-navigation/elements';
 import { createStackNavigator } from '@react-navigation/stack';
 
-function Home({ navigation }) {
+function Home() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('Settings')}>
@@ -123,7 +126,9 @@ function Home({ navigation }) {
   );
 }
 
-function Settings({ navigation }) {
+function Settings() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
diff --git a/versioned_docs/version-7.x/shared-element-transitions.md b/versioned_docs/version-7.x/shared-element-transitions.md
index 6ddb7988371..718bc300a89 100644
--- a/versioned_docs/version-7.x/shared-element-transitions.md
+++ b/versioned_docs/version-7.x/shared-element-transitions.md
@@ -114,7 +114,7 @@ const styles = StyleSheet.create({
 ```js name="Shared transition"
 import * as React from 'react';
 import { View, Button, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Animated from 'react-native-reanimated';
@@ -122,7 +122,9 @@ import Animated from 'react-native-reanimated';
 // highlight-next-line
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={styles.container}>
       <Button
@@ -139,7 +141,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={styles.container}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md
index 49dd475bc89..3a14dda0d17 100755
--- a/versioned_docs/version-7.x/stack-navigator.md
+++ b/versioned_docs/version-7.x/stack-navigator.md
@@ -1040,10 +1040,11 @@ import {
   Button,
   StyleSheet,
 } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { useTheme, useNavigation } from '@react-navigation/native';
 import { useCardAnimation } from '@react-navigation/stack';
 
-function ModalScreen({ navigation }) {
+function ModalScreen() {
+  const navigation = useNavigation();
   const { colors } = useTheme();
   const { current } = useCardAnimation();
 
diff --git a/versioned_docs/version-7.x/state-persistence.md b/versioned_docs/version-7.x/state-persistence.md
index 836a4fdb560..ca128389535 100755
--- a/versioned_docs/version-7.x/state-persistence.md
+++ b/versioned_docs/version-7.x/state-persistence.md
@@ -151,7 +151,7 @@ import * as React from 'react';
 // codeblock-focus-start
 import { Platform, View, Linking } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 // codeblock-focus-end
 import { Button } from '@react-navigation/elements';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -165,7 +165,9 @@ function A() {
   return <View />;
 }
 
-function B({ navigation }) {
+function B() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('C')}>Go to C</Button>
@@ -173,7 +175,9 @@ function B({ navigation }) {
   );
 }
 
-function C({ navigation }) {
+function C() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('D')}>Go to D</Button>
diff --git a/versioned_docs/version-7.x/status-bar.md b/versioned_docs/version-7.x/status-bar.md
index c005f06aa32..847cd1ec95d 100755
--- a/versioned_docs/version-7.x/status-bar.md
+++ b/versioned_docs/version-7.x/status-bar.md
@@ -112,14 +112,15 @@ const styles = StyleSheet.create({
 ```js name="Different status bar" snack version=7
 import * as React from 'react';
 import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 
-function Screen1({ navigation }) {
+function Screen1() {
+  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
   return (
@@ -147,7 +148,8 @@ function Screen1({ navigation }) {
   );
 }
 
-function Screen2({ navigation }) {
+function Screen2() {
+  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
   return (
@@ -334,7 +336,7 @@ const styles = StyleSheet.create({
 import * as React from 'react';
 import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   SafeAreaProvider,
@@ -348,7 +350,8 @@ function FocusAwareStatusBar(props) {
 }
 
 // codeblock-focus-start
-function Screen1({ navigation }) {
+function Screen1() {
+  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
   return (
@@ -374,7 +377,8 @@ function Screen1({ navigation }) {
   );
 }
 
-function Screen2({ navigation }) {
+function Screen2() {
+  const navigation = useNavigation();
   const insets = useSafeAreaInsets();
 
   return (
diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md
index 5cac7cba594..de788c54467 100755
--- a/versioned_docs/version-7.x/tab-based-navigation.md
+++ b/versioned_docs/version-7.x/tab-based-navigation.md
@@ -376,7 +376,9 @@ Switching from one tab to another has a familiar API &mdash; `navigation.navigat
 <samp id="tab-based-navigation-switching" />
 
 ```js
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home!</Text>
@@ -388,7 +390,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function SettingsScreen({ navigation }) {
+function SettingsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings!</Text>
@@ -407,7 +411,7 @@ Usually tabs don't just display one screen &mdash; for example, on your Twitter
 ```js
 import * as React from 'react';
 import { Button, Text, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -419,7 +423,9 @@ function DetailsScreen() {
   );
 }
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home screen</Text>
@@ -431,7 +437,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function SettingsScreen({ navigation }) {
+function SettingsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings screen</Text>
diff --git a/versioned_docs/version-7.x/themes.md b/versioned_docs/version-7.x/themes.md
index cde26fcffc4..d1a153667e9 100755
--- a/versioned_docs/version-7.x/themes.md
+++ b/versioned_docs/version-7.x/themes.md
@@ -118,7 +118,7 @@ export default function App() {
 ```js name="Simple theme" snack version=7
 // codeblock-focus-start
 import * as React from 'react';
-import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import { NavigationContainer, DefaultTheme, useNavigation } from '@react-navigation/native';
 // codeblock-focus-end
 import { Button, View, Text } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -136,8 +136,10 @@ const MyTheme = {
 };
 // codeblock-focus-end
 
-function SettingsScreen({ route, navigation }) {
+function SettingsScreen({ route }) {
+  const navigation = useNavigation();
   const { user } = route.params;
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
@@ -150,7 +152,9 @@ function SettingsScreen({ route, navigation }) {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
@@ -158,7 +162,9 @@ function ProfileScreen({ navigation }) {
   );
 }
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -491,7 +497,8 @@ function MyButton() {
   );
 }
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const { colors } = useTheme();
 
   return (
@@ -671,6 +678,7 @@ import {
   DefaultTheme,
   DarkTheme,
   useTheme,
+  useNavigation,
 } from '@react-navigation/native';
 // codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -718,7 +726,8 @@ function MyButton() {
 }
 // codeblock-focus-end
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const { colors } = useTheme();
 
   return (