From 9e1022ef0822d5ff85e92646a5a0751383e927f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Wed, 28 Feb 2024 15:51:50 +0100
Subject: [PATCH 01/13] Migrate to static

---
 versioned_docs/version-7.x/use-navigation.md | 126 ++++++++++++++++++-
 versioned_docs/version-7.x/use-route.md      | 122 +++++++++++++++++-
 2 files changed, 238 insertions(+), 10 deletions(-)

diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md
index 07d0cfff595..71914c0cc77 100755
--- a/versioned_docs/version-7.x/use-navigation.md
+++ b/versioned_docs/version-7.x/use-navigation.md
@@ -4,31 +4,145 @@ title: useNavigation
 sidebar_label: useNavigation
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 `useNavigation` is a hook that gives access to `navigation` object. It's useful when you cannot pass the `navigation` object as a prop to the component directly, or don't want to pass it in case of a deeply nested child.
 
 The `useNavigation` hook returns the `navigation` object of the screen where it's used:
 
-<samp id="use-navigation-example" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
+```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { useNavigation } from '@react-navigation/native';
+
+function MyBackButton() {
+  // highlight-next-line
+  const navigation = useNavigation();
+
+  return (
+    <Button
+      onPress={() => {
+        navigation.goBack();
+      }}
+    >
+      Back
+    </Button>
+  );
+}
+// codeblock-focus-end
+
+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={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+      <MyBackButton />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Stack);
+
+function App() {
+  return <Navigation />;
+}
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
 import * as React from 'react';
-import { Button } from 'react-native';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
 import { useNavigation } from '@react-navigation/native';
 
 function MyBackButton() {
+  // highlight-next-line
   const navigation = useNavigation();
 
   return (
     <Button
-      title="Back"
       onPress={() => {
         navigation.goBack();
       }}
-    />
+    >
+      Back
+    </Button>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen({ navigation: { navigate } }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>This is the home screen of the app</Text>
+      <Button onPress={() => navigate('Profile')}>Go to Profile</Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+      <MyBackButton />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
+
+export default App;
 ```
 
+</TabItem>
+</Tabs>
+
 See the documentation for the [`navigation` object](navigation-object.md) for more info.
 
 ## Using with class component
@@ -44,7 +158,7 @@ class MyBackButton extends React.Component {
 }
 
 // Wrap and export
-export default function(props) {
+export default function (props) {
   const navigation = useNavigation();
 
   return <MyBackButton {...props} navigation={navigation} />;
diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index 0b5d74891af..bdecd8a3b19 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -4,26 +4,140 @@ title: useRoute
 sidebar_label: useRoute
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 `useRoute` is a hook which gives access to `route` object. It's useful when you cannot pass down the `route` object from props to the component, or don't want to pass it in case of a deeply nested child.
 
 `useRoute()` returns the `route` object of the screen it's inside.
 
 ## Example
 
-<samp id="use-route-example" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
+```js name="useRoute hook" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import { Button } from '@react-navigation/elements';
+import { View, Text } from 'react-native';
+import {
+  createStaticNavigation,
+  useNavigation,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { useRoute } from '@react-navigation/native';
+
+function MyText() {
+  // highlight-next-line
+  const route = useRoute();
+
+  return <Text>{route.params.caption}</Text>;
+}
+// codeblock-focus-end
+
+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={() =>
+          navigation.navigate('Profile', { caption: 'Some caption' })
+        }
+      >
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+      <MyText />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Stack);
+
+function App() {
+  return <Navigation />;
+}
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useRoute hook" snack version=7 dependencies=@react-navigation/elements
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
 import { useRoute } from '@react-navigation/native';
 
 function MyText() {
+  // highlight-next-line
   const route = useRoute();
 
   return <Text>{route.params.caption}</Text>;
 }
+// codeblock-focus-end
+
+function HomeScreen({ navigation: { navigate } }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>This is the home screen of the app</Text>
+      <Button onPress={() => navigate('Profile', { caption: 'Some caption' })}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile Screen</Text>
+      <MyText />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;
 ```
 
+</TabItem>
+</Tabs>
+
 See the documentation for the [`route` object](route-object.md) for more info.
 
 ## Using with class component
@@ -39,7 +153,7 @@ class MyText extends React.Component {
 }
 
 // Wrap and export
-export default function(props) {
+export default function (props) {
   const route = useRoute();
 
   return <MyText {...props} route={route} />;

From 354c3e5fe60c66f51590d9a8b47ae56bdea80e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Thu, 29 Feb 2024 10:09:02 +0100
Subject: [PATCH 02/13] Add hook static examples

---
 .../version-7.x/use-focus-effect.md           | 105 ++++++-
 versioned_docs/version-7.x/use-is-focused.md  |  88 +++++-
 .../version-7.x/use-navigation-state.md       | 204 +++++++++++++-
 .../version-7.x/use-scroll-to-top.md          | 259 +++++++++++++++++-
 versioned_docs/version-7.x/use-theme.md       | 222 ++++++++++++++-
 5 files changed, 833 insertions(+), 45 deletions(-)

diff --git a/versioned_docs/version-7.x/use-focus-effect.md b/versioned_docs/version-7.x/use-focus-effect.md
index e7494fa394b..37692469b88 100755
--- a/versioned_docs/version-7.x/use-focus-effect.md
+++ b/versioned_docs/version-7.x/use-focus-effect.md
@@ -4,30 +4,109 @@ title: useFocusEffect
 sidebar_label: useFocusEffect
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using `focus` and `blur` events, it's not very ergonomic.
 
 To make this easier, the library exports a `useFocusEffect` hook:
 
-<samp id="simple-focus-effect" />
-
-```js
-import { useFocusEffect } from '@react-navigation/native';
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-function Profile({ userId }) {
-  const [user, setUser] = React.useState(null);
+```js name="useFocusEffect hook" snack version=7
+import * as React from 'react';
+import { View } from 'react-native';
+import {
+  createStaticNavigation,
+  useFocusEffect,
+} from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
+// codeblock-focus-start
+function ProfileScreen() {
   useFocusEffect(
     React.useCallback(() => {
-      const unsubscribe = API.subscribe(userId, user => setUser(user));
+      alert('Screen was focused');
+      // Do something when the screen is focused
+      return () => {
+        alert('Screen was unfocused');
+        // Do something when the screen is unfocused
+        // Useful for cleanup functions
+      };
+    }, [])
+  );
 
-      return () => unsubscribe();
-    }, [userId])
+  return <View />;
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator({
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Tab);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useFocusEffect hook" snack version=7
+import * as React from 'react';
+import { View } from 'react-native';
+import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// codeblock-focus-start
+function ProfileScreen() {
+  useFocusEffect(
+    React.useCallback(() => {
+      alert('Screen was focused');
+      // Do something when the screen is focused
+      return () => {
+        alert('Screen was unfocused');
+        // Do something when the screen is unfocused
+        // Useful for cleanup functions
+      };
+    }, [])
   );
 
-  return <ProfileContent user={user} />;
+  return <View />;
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Profile" component={ProfileScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
 }
 ```
 
+</TabItem>
+</Tabs>
+
 :::warning
 
 To avoid the running the effect too often, it's important to wrap the callback in `useCallback` before passing it to `useFocusEffect` as shown in the example.
@@ -107,7 +186,7 @@ useFocusEffect(
   React.useCallback(() => {
     return () => {
       // Do something that should run on blur
-    }
+    };
   }, [])
 );
 ```
@@ -116,7 +195,7 @@ The cleanup function runs whenever the effect needs to cleanup, i.e. on `blur`,
 
 ```js
 React.useEffect(() => {
-    const unsubscribe = navigation.addListener('blur', () => {
+  const unsubscribe = navigation.addListener('blur', () => {
     // Do something when the screen blurs
   });
 
@@ -146,7 +225,7 @@ function FetchUserData({ userId, onUpdate }) {
 // ...
 
 class Profile extends React.Component {
-  _handleUpdate = user => {
+  _handleUpdate = (user) => {
     // Do something with user object
   };
 
diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md
index 69ab01fdc82..fdee55e6664 100755
--- a/versioned_docs/version-7.x/use-is-focused.md
+++ b/versioned_docs/version-7.x/use-is-focused.md
@@ -4,22 +4,96 @@ title: useIsFocused
 sidebar_label: useIsFocused
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
 
-<samp id="use-is-focused" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
-import { useIsFocused } from '@react-navigation/native';
+```js name="useIsFocused hook" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+// codeblock-focus-start
+import { createStaticNavigation, useIsFocused } from '@react-navigation/native';
+
+function ProfileScreen() {
+  // This hook returns `true` if the screen is focused, `false` otherwise
+  // highlight-next-line
+  const isFocused = useIsFocused();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>{isFocused ? 'focused' : 'unfocused'}</Text>
+    </View>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createMaterialTopTabNavigator({
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Tab);
 
-// ...
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
 
-function Profile() {
+```js name="useIsFocused hook" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+// codeblock-focus-start
+import { NavigationContainer, useIsFocused } from '@react-navigation/native';
+
+function ProfileScreen() {
+  // This hook returns `true` if the screen is focused, `false` otherwise
+  // highlight-next-line
   const isFocused = useIsFocused();
 
-  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>{isFocused ? 'focused' : 'unfocused'}</Text>
+    </View>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createMaterialTopTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Profile" component={ProfileScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
 }
 ```
 
+</TabItem>
+</Tabs>
+
 Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them.
 
 ## Using with class component
@@ -35,7 +109,7 @@ class Profile extends React.Component {
 }
 
 // Wrap and export
-export default function(props) {
+export default function (props) {
   const isFocused = useIsFocused();
 
   return <Profile {...props} isFocused={isFocused} />;
diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md
index 59bdc9b67f3..563d466e19c 100755
--- a/versioned_docs/version-7.x/use-navigation-state.md
+++ b/versioned_docs/version-7.x/use-navigation-state.md
@@ -4,6 +4,9 @@ title: useNavigationState
 sidebar_label: useNavigationState
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 `useNavigationState` is a hook which gives access to the [navigation state](navigation-state.md) of the navigator which contains the screen. It's useful in rare cases where you want to render something based on the navigation state.
 
 :::warning
@@ -15,13 +18,13 @@ Consider the navigator's state object to be internal and subject to change in a
 It takes a selector function as an argument. The selector will receive the full [navigation state](navigation-state.md) and can return a specific value from the state:
 
 ```js
-const index = useNavigationState(state => state.index);
+const index = useNavigationState((state) => state.index);
 ```
 
 The selector function helps to reduce unnecessary re-renders, so your screen will re-render only when that's something you care about. If you actually need the whole state object, you can do this explicitly:
 
 ```js
-const state = useNavigationState(state => state);
+const state = useNavigationState((state) => state);
 ```
 
 :::warning
@@ -44,16 +47,199 @@ function Profile() {
 
 In this example, even if you push a new screen, this text won't update. If you use the hook, it'll work as expected:
 
-<samp id="use-navigation-state" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
-function Profile() {
-  const routesLength = useNavigationState(state => state.routes.length);
+```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import Button from '@react-navigation/elements';
+import { View, Text } from 'react-native';
+import {
+  createStaticNavigation,
+  useNavigation,
+  useRoute,
+  useNavigationState,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-  return <Text>Number of routes: {routesLength}</Text>;
+// codeblock-focus-start
+function useIsFirstRouteInParent() {
+  const route = useRoute();
+  const isFirstRouteInParent = useNavigationState(
+    (state) => state.routes[0].key === route.key
+  );
+
+  return isFirstRouteInParent;
+}
+
+function usePreviousRouteName() {
+  return useNavigationState((state) =>
+    state.routes[state.index - 1]?.name
+      ? state.routes[state.index - 1].name
+      : 'None'
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  const navigation = useNavigation();
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  const navigation = useNavigation();
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  const navigation = useNavigation();
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator({
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+    Settings: SettingsScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Stack);
+
+export default function App() {
+  return <Navigation />;
 }
 ```
 
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useNavigationState hook" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+import Button from '@react-navigation/elements';
+import { View, Text } from 'react-native';
+import {
+  NavigationContainer,
+  useRoute,
+  useNavigationState,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+// codeblock-focus-start
+function useIsFirstRouteInParent() {
+  const route = useRoute();
+  const isFirstRouteInParent = useNavigationState(
+    (state) => state.routes[0].key === route.key
+  );
+
+  return isFirstRouteInParent;
+}
+
+function usePreviousRouteName() {
+  return useNavigationState((state) =>
+    state.routes[state.index - 1]?.name
+      ? state.routes[state.index - 1].name
+      : 'None'
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }) {
+  const isFirstRoute = useIsFirstRouteInParent();
+  const previousRouteName = usePreviousRouteName();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>It is {isFirstRoute ? '' : 'not '}first route in navigator</Text>
+      <Text>Previous route name: {previousRouteName}</Text>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+function MyStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+    </Stack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <MyStack />
+    </NavigationContainer>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
+
 So when do you use `navigation.getState()`? It's mostly useful within event listeners where you don't care about what's rendered. In most cases, using the hook should be preferred.
 
 ## Using with class component
@@ -69,8 +255,8 @@ class Profile extends React.Component {
 }
 
 // Wrap and export
-export default function(props) {
-  const routesLength = useNavigationState(state => state.routes.length);
+export default function (props) {
+  const routesLength = useNavigationState((state) => state.routes.length);
 
   return <Profile {...props} routesLength={routesLength} />;
 }
diff --git a/versioned_docs/version-7.x/use-scroll-to-top.md b/versioned_docs/version-7.x/use-scroll-to-top.md
index a4153d0dda1..915a820df09 100755
--- a/versioned_docs/version-7.x/use-scroll-to-top.md
+++ b/versioned_docs/version-7.x/use-scroll-to-top.md
@@ -4,28 +4,147 @@ title: useScrollToTop
 sidebar_label: useScrollToTop
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.
 
 In order to achieve it we export `useScrollToTop` which accept ref to scrollable component (e,g. `ScrollView` or `FlatList`).
 
 Example:
 
-<samp id="use-scroll-to-top" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
+```js name="useScrollToTop hook" snack version=7
+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// codeblock-focus-start
+import { View, ScrollView, Image } from 'react-native';
+import {
+  createStaticNavigation,
+  useScrollToTop,
+} from '@react-navigation/native';
+
+function Albums() {
+  const ref = React.useRef(null);
+
+  // highlight-next-line
+  useScrollToTop(ref);
+
+  return (
+    <ScrollView ref={ref}>
+      {/*content*/}
+      // codeblock-focus-end
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+      // codeblock-focus-start
+    </ScrollView>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator({
+  Home: HomeScreen,
+  Albums: Albums,
+});
+
+const Navigation = createStaticNavigation(Tab);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useScrollToTop hook" snack version=7
 import * as React from 'react';
-import { ScrollView } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// codeblock-focus-start
+import { View, ScrollView, Image } from 'react-native';
+import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);
 
+  // highlight-next-line
   useScrollToTop(ref);
 
-  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
+  return (
+    <ScrollView ref={ref}>
+      {/* content */}
+      // codeblock-focus-end
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+      // codeblock-focus-start
+    </ScrollView>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Albums" component={Albums} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
 }
 ```
 
+</TabItem>
+</Tabs>
+
 ## Using with class component
 
 You can wrap your class component in a function component to use the hook:
@@ -51,12 +170,18 @@ export default function (props) {
 
 If you require offset to scroll position you can wrap and decorate passed reference:
 
-<samp id="use-scroll-to-top-offset" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
+```js name="useScrollToTop hook - providing scroll offset" snack version=7
 import * as React from 'react';
-import { ScrollView } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// codeblock-focus-start
+import { View, ScrollView, Image } from 'react-native';
+import {
+  createStaticNavigation,
+  useScrollToTop,
+} from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);
@@ -67,6 +192,120 @@ function Albums() {
     })
   );
 
-  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
+  return (
+    <ScrollView ref={ref}>
+      {/* content */}
+      // codeblock-focus-end
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+      // codeblock-focus-start
+    </ScrollView>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator({
+  screens: {
+    Home: HomeScreen,
+    Albums: Albums,
+  },
+});
+
+const Navigation = createStaticNavigation(Tab);
+
+export default function App() {
+  return <Navigation />;
 }
 ```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useScrollToTop hook - providing scroll offset" snack version=7
+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// codeblock-focus-start
+import { View, ScrollView, Image } from 'react-native';
+import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
+
+function Albums() {
+  const ref = React.useRef(null);
+
+  useScrollToTop(
+    React.useRef({
+      scrollToTop: () => ref.current?.scrollTo({ y: 100 }),
+    })
+  );
+
+  return (
+    <ScrollView ref={ref}>
+      {/* content */}
+      // codeblock-focus-end
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+      // codeblock-focus-start
+    </ScrollView>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Albums" component={Albums} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index 7807e031e70..07464c20856 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -4,16 +4,169 @@ title: useTheme
 sidebar_label: useTheme
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 The `useTheme` hook lets us access the currently active theme. You can use it in your own components to have them respond to changes in the theme.
 
-<samp id="system-themes" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
 
-```js
+```js name="useTheme hook" snack version=7 dependencies=@react-navigation/elements
+import * as React from 'react';
+// codeblock-focus-start
+import {
+  useNavigation,
+  createStaticNavigation,
+  DefaultTheme,
+  DarkTheme,
+  useTheme,
+} from '@react-navigation/native';
+import { Button, View, Text, TouchableOpacity, Appearance } from 'react-native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+function SettingsScreen({ route }) {
+  const navigation = useNavigation();
+  const { user } = route.params;
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Settings Screen</Text>
+      <Text style={{ color: colors.text }}>
+        userParam: {JSON.stringify(user)}
+      </Text>
+      <Button
+        title="Go to Profile"
+        onPress={() => navigation.navigate('Profile')}
+      />
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Profile Screen</Text>
+    </View>
+  );
+}
+
+function MyButton() {
+  const { colors } = useTheme();
+
+  return (
+    <TouchableOpacity style={{ backgroundColor: colors.card }}>
+      <Text style={{ color: colors.text }}>Button!</Text>
+    </TouchableOpacity>
+  );
+}
+
+function HomeScreen() {
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Home Screen</Text>
+      <MyButton />
+      <Button
+        title="Go to Settings"
+        onPress={() =>
+          navigation.navigate('Root', {
+            screen: 'Settings',
+            params: { user: 'jane' },
+          })
+        }
+      />
+    </View>
+  );
+}
+
+const PanelStack = createNativeStackNavigator({
+  screens: {
+    Profile: ProfileScreen,
+    Settings: SettingsScreen,
+  },
+});
+
+const Drawer = createDrawerNavigator({
+  initialRouteName: 'Panel',
+  screens: {
+    Home: HomeScreen,
+    Panel: {
+      screen: PanelStack,
+      options: {
+        headerShown: false,
+      },
+    },
+  },
+});
+
+// codeblock-focus-start
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+  // highlight-next-line
+  const scheme = Appearance.getColorScheme();
+
+  // highlight-next-line
+  return <Navigation theme={scheme === 'dark' ? DarkTheme : DefaultTheme} />;
+}
+
+// codeblock-focus-end
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
+```js name="useTheme hook" snack version=7 dependencies=@react-navigation/elements
 import * as React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+// codeblock-focus-start
+import { Button, View, Text, TouchableOpacity, Appearance } from 'react-native';
+import {
+  NavigationContainer,
+  DefaultTheme,
+  DarkTheme,
+  useTheme,
+} from '@react-navigation/native';
+// codeblock-focus-end
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+function SettingsScreen({ route, navigation }) {
+  const { user } = route.params;
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Settings Screen</Text>
+      <Text style={{ color: colors.text }}>
+        userParam: {JSON.stringify(user)}
+      </Text>
+      <Button
+        title="Go to Profile"
+        onPress={() => navigation.navigate('Profile')}
+      />
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Profile Screen</Text>
+    </View>
+  );
+}
 
-// Black background and white text in light theme, inverted on dark theme
 function MyButton() {
   const { colors } = useTheme();
 
@@ -23,8 +176,65 @@ function MyButton() {
     </TouchableOpacity>
   );
 }
+
+function HomeScreen({ navigation }) {
+  const { colors } = useTheme();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: colors.text }}>Home Screen</Text>
+      <MyButton />
+      <Button
+        title="Go to Settings"
+        onPress={() =>
+          navigation.navigate('Root', {
+            screen: 'Settings',
+            params: { user: 'jane' },
+          })
+        }
+      />
+    </View>
+  );
+}
+
+const Drawer = createDrawerNavigator();
+const Stack = createNativeStackNavigator();
+
+function Root() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Profile" component={ProfileScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+    </Stack.Navigator>
+  );
+}
+
+// codeblock-focus-start
+
+export default function App() {
+  // highlight-next-line
+  const scheme = Appearance.getColorScheme();
+
+  return (
+    // highlight-next-line
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Drawer.Navigator useLegacyImplementation>
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen
+          name="Root"
+          component={Root}
+          options={{ headerShown: false }}
+        />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}
+// codeblock-focus-end
 ```
 
+</TabItem>
+</Tabs>
+
 See [theming guide](themes.md) for more details and usage guide around how to configure themes.
 
 ## Using with class component
@@ -40,7 +250,7 @@ class MyButton extends React.Component {
 }
 
 // Wrap and export
-export default function(props) {
+export default function (props) {
   const theme = useTheme();
 
   return <MyButton {...props} theme={theme} />;

From ac7796b8c70a53a39a8f1b3a0403106f38cd6937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Thu, 29 Feb 2024 14:01:18 +0100
Subject: [PATCH 03/13] Remove redundant dependencies

---
 versioned_docs/version-7.x/use-navigation-state.md | 4 ++--
 versioned_docs/version-7.x/use-navigation.md       | 4 ++--
 versioned_docs/version-7.x/use-theme.md            | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md
index 563d466e19c..1b511115d2d 100755
--- a/versioned_docs/version-7.x/use-navigation-state.md
+++ b/versioned_docs/version-7.x/use-navigation-state.md
@@ -50,7 +50,7 @@ In this example, even if you push a new screen, this text won't update. If you u
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useNavigation hook" snack version=7
 import * as React from 'react';
 import Button from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -144,7 +144,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic" default>
 
-```js name="useNavigationState hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useNavigationState hook" snack version=7
 import * as React from 'react';
 import Button from '@react-navigation/elements';
 import { View, Text } from 'react-native';
diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md
index 71914c0cc77..b8c3b215df2 100755
--- a/versioned_docs/version-7.x/use-navigation.md
+++ b/versioned_docs/version-7.x/use-navigation.md
@@ -14,7 +14,7 @@ The `useNavigation` hook returns the `navigation` object of the screen where it'
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useNavigation hook" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
@@ -81,7 +81,7 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic" default>
 
-```js name="useNavigation hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useNavigation hook" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index 07464c20856..f820ff59f84 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -12,7 +12,7 @@ The `useTheme` hook lets us access the currently active theme. You can use it in
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="useTheme hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useTheme hook" snack version=7
 import * as React from 'react';
 // codeblock-focus-start
 import {
@@ -125,7 +125,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic" default>
 
-```js name="useTheme hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useTheme hook" snack version=7
 import * as React from 'react';
 // codeblock-focus-start
 import { Button, View, Text, TouchableOpacity, Appearance } from 'react-native';

From 020b1c2840cb1c61141172323e61818c48f9787c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Thu, 29 Feb 2024 14:05:27 +0100
Subject: [PATCH 04/13] Use useNavigation instead of navigation prop

---
 versioned_docs/version-7.x/use-navigation-state.md | 10 +++++++---
 versioned_docs/version-7.x/use-route.md            | 10 ++++++----
 versioned_docs/version-7.x/use-theme.md            |  7 +++++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md
index 1b511115d2d..b5a75750f24 100755
--- a/versioned_docs/version-7.x/use-navigation-state.md
+++ b/versioned_docs/version-7.x/use-navigation-state.md
@@ -151,6 +151,7 @@ import { View, Text } from 'react-native';
 import {
   NavigationContainer,
   useRoute,
+  useNavigation,
   useNavigationState,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -174,7 +175,8 @@ function usePreviousRouteName() {
 }
 // codeblock-focus-end
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (
@@ -189,7 +191,8 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (
@@ -204,7 +207,8 @@ function ProfileScreen({ navigation }) {
   );
 }
 
-function SettingsScreen({ navigation }) {
+function SettingsScreen() {
+  const navigation = useNavigation();
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (
diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index bdecd8a3b19..e01281d70b0 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem';
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="useRoute hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useRoute hook" snack version=7
 import * as React from 'react';
 import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
@@ -82,11 +82,11 @@ export default App;
 </TabItem>
 <TabItem value="dynamic" label="Dynamic" default>
 
-```js name="useRoute hook" snack version=7 dependencies=@react-navigation/elements
+```js name="useRoute hook" snack version=7
 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';
 // codeblock-focus-start
 import { useRoute } from '@react-navigation/native';
@@ -99,7 +99,9 @@ function MyText() {
 }
 // codeblock-focus-end
 
-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>
diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index f820ff59f84..db54c5af02d 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -134,12 +134,14 @@ import {
   DefaultTheme,
   DarkTheme,
   useTheme,
+  useNavigation,
 } from '@react-navigation/native';
 // codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
-function SettingsScreen({ route, navigation }) {
+function SettingsScreen({ route }) {
+  const navigation = useNavigation();
   const { user } = route.params;
   const { colors } = useTheme();
 
@@ -177,7 +179,8 @@ function MyButton() {
   );
 }
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const { colors } = useTheme();
 
   return (

From 9b3d16b0f8501eb24aab08d8fe7bcda24c58c5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Thu, 29 Feb 2024 14:08:18 +0100
Subject: [PATCH 05/13] Remove default from dynamic example

---
 versioned_docs/version-7.x/use-focus-effect.md     | 2 +-
 versioned_docs/version-7.x/use-is-focused.md       | 2 +-
 versioned_docs/version-7.x/use-navigation-state.md | 2 +-
 versioned_docs/version-7.x/use-navigation.md       | 2 +-
 versioned_docs/version-7.x/use-route.md            | 2 +-
 versioned_docs/version-7.x/use-scroll-to-top.md    | 4 ++--
 versioned_docs/version-7.x/use-theme.md            | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/versioned_docs/version-7.x/use-focus-effect.md b/versioned_docs/version-7.x/use-focus-effect.md
index 37692469b88..2aa710cc8f1 100755
--- a/versioned_docs/version-7.x/use-focus-effect.md
+++ b/versioned_docs/version-7.x/use-focus-effect.md
@@ -60,7 +60,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useFocusEffect hook" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md
index fdee55e6664..d1035b7465d 100755
--- a/versioned_docs/version-7.x/use-is-focused.md
+++ b/versioned_docs/version-7.x/use-is-focused.md
@@ -51,7 +51,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useIsFocused hook" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md
index b5a75750f24..cadab51b906 100755
--- a/versioned_docs/version-7.x/use-navigation-state.md
+++ b/versioned_docs/version-7.x/use-navigation-state.md
@@ -142,7 +142,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useNavigationState hook" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md
index b8c3b215df2..7c994cc0a2f 100755
--- a/versioned_docs/version-7.x/use-navigation.md
+++ b/versioned_docs/version-7.x/use-navigation.md
@@ -79,7 +79,7 @@ export default App;
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useNavigation hook" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index e01281d70b0..d94496eec96 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -80,7 +80,7 @@ export default App;
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useRoute hook" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-scroll-to-top.md b/versioned_docs/version-7.x/use-scroll-to-top.md
index 915a820df09..175e9b9d396 100755
--- a/versioned_docs/version-7.x/use-scroll-to-top.md
+++ b/versioned_docs/version-7.x/use-scroll-to-top.md
@@ -79,7 +79,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useScrollToTop hook" snack version=7
 import * as React from 'react';
@@ -241,7 +241,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useScrollToTop hook - providing scroll offset" snack version=7
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index db54c5af02d..7ef28b332a8 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -123,7 +123,7 @@ export default function App() {
 ```
 
 </TabItem>
-<TabItem value="dynamic" label="Dynamic" default>
+<TabItem value="dynamic" label="Dynamic">
 
 ```js name="useTheme hook" snack version=7
 import * as React from 'react';

From 35686ecaba01fd97c8d1a8d27df28f187db65322 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:12:22 +0100
Subject: [PATCH 06/13] Use focus effect

---
 versioned_docs/version-7.x/use-focus-effect.md | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/versioned_docs/version-7.x/use-focus-effect.md b/versioned_docs/version-7.x/use-focus-effect.md
index 2aa710cc8f1..b6c7a5b1527 100755
--- a/versioned_docs/version-7.x/use-focus-effect.md
+++ b/versioned_docs/version-7.x/use-focus-effect.md
@@ -17,20 +17,16 @@ To make this easier, the library exports a `useFocusEffect` hook:
 ```js name="useFocusEffect hook" snack version=7
 import * as React from 'react';
 import { View } from 'react-native';
-import {
-  createStaticNavigation,
-  useFocusEffect,
-} from '@react-navigation/native';
+import { createStaticNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
 // codeblock-focus-start
+import { useFocusEffect } from '@react-navigation/native';
+
 function ProfileScreen() {
   useFocusEffect(
     React.useCallback(() => {
-      alert('Screen was focused');
       // Do something when the screen is focused
       return () => {
-        alert('Screen was unfocused');
         // Do something when the screen is unfocused
         // Useful for cleanup functions
       };
@@ -65,17 +61,17 @@ export default function App() {
 ```js name="useFocusEffect hook" snack version=7
 import * as React from 'react';
 import { View } from 'react-native';
-import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 // codeblock-focus-start
+import { useFocusEffect } from '@react-navigation/native';
+
 function ProfileScreen() {
   useFocusEffect(
     React.useCallback(() => {
-      alert('Screen was focused');
       // Do something when the screen is focused
       return () => {
-        alert('Screen was unfocused');
         // Do something when the screen is unfocused
         // Useful for cleanup functions
       };

From b35593d0b1d7db9de29df1f3a2f5d6b8b931c4bd Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:17:30 +0100
Subject: [PATCH 07/13] use is focused

---
 versioned_docs/version-7.x/use-is-focused.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md
index d1035b7465d..73e03e44b06 100755
--- a/versioned_docs/version-7.x/use-is-focused.md
+++ b/versioned_docs/version-7.x/use-is-focused.md
@@ -15,9 +15,10 @@ We might want to render different content based on the current focus state of th
 ```js name="useIsFocused hook" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 // codeblock-focus-start
-import { createStaticNavigation, useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from '@react-navigation/native';
 
 function ProfileScreen() {
   // This hook returns `true` if the screen is focused, `false` otherwise
@@ -56,9 +57,10 @@ export default function App() {
 ```js name="useIsFocused hook" snack version=7
 import * as React from 'react';
 import { View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 // codeblock-focus-start
-import { NavigationContainer, useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from '@react-navigation/native';
 
 function ProfileScreen() {
   // This hook returns `true` if the screen is focused, `false` otherwise

From 6e17da2014bff7e092cd932152a38a06913f41d7 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:23:29 +0100
Subject: [PATCH 08/13] use navigation state

---
 .../version-7.x/use-navigation-state.md          | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md
index cadab51b906..fa66274eb3f 100755
--- a/versioned_docs/version-7.x/use-navigation-state.md
+++ b/versioned_docs/version-7.x/use-navigation-state.md
@@ -58,11 +58,11 @@ import {
   createStaticNavigation,
   useNavigation,
   useRoute,
-  useNavigationState,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
 // codeblock-focus-start
+import { useNavigationState } from '@react-navigation/native';
+
 function useIsFirstRouteInParent() {
   const route = useRoute();
   const isFirstRouteInParent = useNavigationState(
@@ -152,11 +152,12 @@ import {
   NavigationContainer,
   useRoute,
   useNavigation,
-  useNavigationState,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // codeblock-focus-start
+import { useNavigationState } from '@react-navigation/native';
+
 function useIsFirstRouteInParent() {
   const route = useRoute();
   const isFirstRouteInParent = useNavigationState(
@@ -175,8 +176,7 @@ function usePreviousRouteName() {
 }
 // codeblock-focus-end
 
-function HomeScreen() {
-  const navigation = useNavigation();
+function HomeScreen({ navigation }) {
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (
@@ -191,8 +191,7 @@ function HomeScreen() {
   );
 }
 
-function ProfileScreen() {
-  const navigation = useNavigation();
+function ProfileScreen({ navigation }) {
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (
@@ -207,8 +206,7 @@ function ProfileScreen() {
   );
 }
 
-function SettingsScreen() {
-  const navigation = useNavigation();
+function SettingsScreen({ navigation }) {
   const isFirstRoute = useIsFirstRouteInParent();
   const previousRouteName = usePreviousRouteName();
   return (

From 7bcb12fb50fdbca01cc44ddddf29bcaaa99c2e96 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:27:17 +0100
Subject: [PATCH 09/13] use route

---
 versioned_docs/version-7.x/use-route.md | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index d94496eec96..58d1658ac7c 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -18,8 +18,8 @@ import TabItem from '@theme/TabItem';
 
 ```js name="useRoute hook" snack version=7
 import * as React from 'react';
-import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
@@ -43,9 +43,9 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
       <Button
-        onPress={() =>
-          navigation.navigate('Profile', { caption: 'Some caption' })
-        }
+        onPress={() => {
+          navigation.navigate('Profile', { caption: 'Some caption' });
+        }}
       >
         Go to Profile
       </Button>
@@ -99,13 +99,15 @@ function MyText() {
 }
 // codeblock-focus-end
 
-function HomeScreen() {
-  const navigation = useNavigation();
-
+function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>This is the home screen of the app</Text>
-      <Button onPress={() => navigate('Profile', { caption: 'Some caption' })}>
+      <Button
+        onPress={() => {
+          navigation.navigate('Profile', { caption: 'Some caption' });
+        }}
+      >
         Go to Profile
       </Button>
     </View>

From 848e95731579f1a0ca3729ec92604308d5bb2eaf Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:27:45 +0100
Subject: [PATCH 10/13] use route

---
 versioned_docs/version-7.x/use-route.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index 58d1658ac7c..22ea8c3effa 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -84,8 +84,8 @@ export default App;
 
 ```js name="useRoute hook" snack version=7
 import * as React from 'react';
-import { Button } from '@react-navigation/elements';
 import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 // codeblock-focus-start

From 3e8d2fed6cd003d8bfa00dbe445c30c28cc0aa95 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:30:52 +0100
Subject: [PATCH 11/13] use scroll to top

---
 .../version-7.x/use-scroll-to-top.md          | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/versioned_docs/version-7.x/use-scroll-to-top.md b/versioned_docs/version-7.x/use-scroll-to-top.md
index 175e9b9d396..23b353c8b4c 100755
--- a/versioned_docs/version-7.x/use-scroll-to-top.md
+++ b/versioned_docs/version-7.x/use-scroll-to-top.md
@@ -19,12 +19,11 @@ Example:
 ```js name="useScrollToTop hook" snack version=7
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStaticNavigation } from '@react-navigation/native';
+import { View, Image } from 'react-native';
 // codeblock-focus-start
-import { View, ScrollView, Image } from 'react-native';
-import {
-  createStaticNavigation,
-  useScrollToTop,
-} from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);
@@ -34,7 +33,7 @@ function Albums() {
 
   return (
     <ScrollView ref={ref}>
-      {/*content*/}
+      {/* content */}
       // codeblock-focus-end
       <Image
         source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
@@ -84,9 +83,11 @@ export default function App() {
 ```js name="useScrollToTop hook" snack version=7
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Image } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 // codeblock-focus-start
-import { View, ScrollView, Image } from 'react-native';
-import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);
@@ -176,12 +177,12 @@ If you require offset to scroll position you can wrap and decorate passed refere
 ```js name="useScrollToTop hook - providing scroll offset" snack version=7
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Image } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+
 // codeblock-focus-start
-import { View, ScrollView, Image } from 'react-native';
-import {
-  createStaticNavigation,
-  useScrollToTop,
-} from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);
@@ -246,9 +247,11 @@ export default function App() {
 ```js name="useScrollToTop hook - providing scroll offset" snack version=7
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Image } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 // codeblock-focus-start
-import { View, ScrollView, Image } from 'react-native';
-import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 function Albums() {
   const ref = React.useRef(null);

From fa869f375810807206cc8ead773137bddee42e88 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:36:43 +0100
Subject: [PATCH 12/13] use theme

---
 versioned_docs/version-7.x/use-theme.md | 33 +++++++++++--------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index 7ef28b332a8..aa388012776 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -14,19 +14,20 @@ The `useTheme` hook lets us access the currently active theme. You can use it in
 
 ```js name="useTheme hook" snack version=7
 import * as React from 'react';
-// codeblock-focus-start
 import {
   useNavigation,
   createStaticNavigation,
   DefaultTheme,
   DarkTheme,
-  useTheme,
 } from '@react-navigation/native';
 import { Button, View, Text, TouchableOpacity, Appearance } from 'react-native';
-// codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
+// codeblock-focus-start
+import { useTheme } from '@react-navigation/native';
+// codeblock-focus-end
+
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
   const { user } = route.params;
@@ -46,7 +47,9 @@ function SettingsScreen({ route }) {
   );
 }
 
+// codeblock-focus-start
 function ProfileScreen() {
+  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -55,6 +58,7 @@ function ProfileScreen() {
     </View>
   );
 }
+// codeblock-focus-end
 
 function MyButton() {
   const { colors } = useTheme();
@@ -107,19 +111,12 @@ const Drawer = createDrawerNavigator({
   },
 });
 
-// codeblock-focus-start
-
 const Navigation = createStaticNavigation(Drawer);
 
 export default function App() {
-  // highlight-next-line
   const scheme = Appearance.getColorScheme();
-
-  // highlight-next-line
   return <Navigation theme={scheme === 'dark' ? DarkTheme : DefaultTheme} />;
 }
-
-// codeblock-focus-end
 ```
 
 </TabItem>
@@ -127,19 +124,20 @@ export default function App() {
 
 ```js name="useTheme hook" snack version=7
 import * as React from 'react';
-// codeblock-focus-start
 import { Button, View, Text, TouchableOpacity, Appearance } from 'react-native';
 import {
   NavigationContainer,
   DefaultTheme,
   DarkTheme,
-  useTheme,
   useNavigation,
 } from '@react-navigation/native';
-// codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
+// codeblock-focus-start
+import { useTheme } from '@react-navigation/native';
+// codeblock-focus-end
+
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
   const { user } = route.params;
@@ -158,8 +156,9 @@ function SettingsScreen({ route }) {
     </View>
   );
 }
-
+// codeblock-focus-start
 function ProfileScreen() {
+  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -168,6 +167,7 @@ function ProfileScreen() {
     </View>
   );
 }
+// codeblock-focus-end
 
 function MyButton() {
   const { colors } = useTheme();
@@ -212,14 +212,10 @@ function Root() {
   );
 }
 
-// codeblock-focus-start
-
 export default function App() {
-  // highlight-next-line
   const scheme = Appearance.getColorScheme();
 
   return (
-    // highlight-next-line
     <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Drawer.Navigator useLegacyImplementation>
         <Drawer.Screen name="Home" component={HomeScreen} />
@@ -232,7 +228,6 @@ export default function App() {
     </NavigationContainer>
   );
 }
-// codeblock-focus-end
 ```
 
 </TabItem>

From 6fa7b4f5d7103f84b0ce4a98da3f8ce3276eb1f5 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 5 Mar 2024 13:39:11 +0100
Subject: [PATCH 13/13] use theme

---
 versioned_docs/version-7.x/use-theme.md | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index aa388012776..fcda6bc6203 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -26,6 +26,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 
 // codeblock-focus-start
 import { useTheme } from '@react-navigation/native';
+
 // codeblock-focus-end
 
 function SettingsScreen({ route }) {
@@ -47,9 +48,7 @@ function SettingsScreen({ route }) {
   );
 }
 
-// codeblock-focus-start
 function ProfileScreen() {
-  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -58,9 +57,10 @@ function ProfileScreen() {
     </View>
   );
 }
-// codeblock-focus-end
 
+// codeblock-focus-start
 function MyButton() {
+  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -69,6 +69,7 @@ function MyButton() {
     </TouchableOpacity>
   );
 }
+// codeblock-focus-end
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -136,8 +137,8 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 
 // codeblock-focus-start
 import { useTheme } from '@react-navigation/native';
-// codeblock-focus-end
 
+// codeblock-focus-end
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
   const { user } = route.params;
@@ -156,9 +157,7 @@ function SettingsScreen({ route }) {
     </View>
   );
 }
-// codeblock-focus-start
 function ProfileScreen() {
-  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -167,9 +166,10 @@ function ProfileScreen() {
     </View>
   );
 }
-// codeblock-focus-end
 
+// codeblock-focus-start
 function MyButton() {
+  // highlight-next-line
   const { colors } = useTheme();
 
   return (
@@ -178,6 +178,7 @@ function MyButton() {
     </TouchableOpacity>
   );
 }
+// codeblock-focus-end
 
 function HomeScreen() {
   const navigation = useNavigation();