From 9d13c4df89304b66324cda84fbe84e31793093a8 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Mon, 25 Dec 2023 21:33:58 +0100
Subject: [PATCH] Rework fundamentals to accomodate static API (#1293)

---
 sidebars.js                                   |   3 -
 static/examples/7.x/go-back.js                |  10 +-
 static/examples/7.x/multiple-navigate.js      |  10 +-
 static/examples/7.x/multiple-push.js          |  10 +-
 static/examples/7.x/new-screen.js             |   6 +-
 .../examples/7.x/params-nested-navigators.js  |  14 +-
 static/examples/7.x/passing-params-back.js    |   9 +-
 static/examples/7.x/passing-params.js         |  10 +-
 static/examples/7.x/pop-to-top.js             |  10 +-
 .../version-7.x/bottom-tab-navigator.md       |   4 +-
 .../version-7.x/connecting-navigation-prop.md |  48 ---
 .../version-7.x/custom-navigators.md          |   2 +-
 versioned_docs/version-7.x/custom-routers.md  |   2 +-
 .../version-7.x/drawer-navigator.md           |   4 +-
 versioned_docs/version-7.x/getting-started.md |  27 +-
 .../version-7.x/glossary-of-terms.md          |  55 +--
 versioned_docs/version-7.x/group.md           |   2 +-
 versioned_docs/version-7.x/header-buttons.md  |  90 ++++-
 versioned_docs/version-7.x/headers.md         | 175 +++++++++-
 .../version-7.x/hello-react-navigation.md     | 200 ++++++++++-
 .../version-7.x/material-top-tab-navigator.md |   4 +-
 .../version-7.x/multiple-drawers.md           |   6 +-
 .../version-7.x/native-stack-navigator.md     |  10 +-
 .../navigating-without-navigation-prop.md     |   2 +-
 versioned_docs/version-7.x/navigating.md      |  28 +-
 .../version-7.x/navigation-container.md       |   2 +-
 .../version-7.x/navigation-context.md         |   2 +-
 .../version-7.x/navigation-events.md          |   6 +-
 .../version-7.x/navigation-lifecycle.md       |  38 +-
 ...avigation-prop.md => navigation-object.md} |  24 +-
 .../version-7.x/nesting-navigators.md         | 324 +++++++++++++++---
 versioned_docs/version-7.x/params.md          |  45 ++-
 .../{route-prop.md => route-object.md}        |   8 +-
 versioned_docs/version-7.x/screen-options.md  |   8 +-
 versioned_docs/version-7.x/screen.md          |   4 +-
 versioned_docs/version-7.x/stack-navigator.md |   4 +-
 .../version-7.x/static-api-reference.md       |   4 +-
 .../version-7.x/static-configuration.md       | 181 ----------
 versioned_docs/version-7.x/typescript.md      |  14 +-
 .../version-7.x/use-link-builder.md           |   2 +-
 versioned_docs/version-7.x/use-navigation.md  |   8 +-
 versioned_docs/version-7.x/use-route.md       |   6 +-
 versioned_sidebars/version-7.x-sidebars.json  |  14 +-
 43 files changed, 964 insertions(+), 471 deletions(-)
 delete mode 100755 sidebars.js
 delete mode 100755 versioned_docs/version-7.x/connecting-navigation-prop.md
 rename versioned_docs/version-7.x/{navigation-prop.md => navigation-object.md} (89%)
 rename versioned_docs/version-7.x/{route-prop.md => route-object.md} (76%)
 delete mode 100644 versioned_docs/version-7.x/static-configuration.md

diff --git a/sidebars.js b/sidebars.js
deleted file mode 100755
index 2c1f4c9e5de..00000000000
--- a/sidebars.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  docs: { }
-};
diff --git a/static/examples/7.x/go-back.js b/static/examples/7.x/go-back.js
index e2417a2cf9d..ed6b1dbbc07 100755
--- a/static/examples/7.x/go-back.js
+++ b/static/examples/7.x/go-back.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -15,7 +17,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
diff --git a/static/examples/7.x/multiple-navigate.js b/static/examples/7.x/multiple-navigate.js
index 8e4ecc94b25..ddb83a07768 100755
--- a/static/examples/7.x/multiple-navigate.js
+++ b/static/examples/7.x/multiple-navigate.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -15,7 +17,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
diff --git a/static/examples/7.x/multiple-push.js b/static/examples/7.x/multiple-push.js
index 32c8f1126a9..21f2213a1b1 100755
--- a/static/examples/7.x/multiple-push.js
+++ b/static/examples/7.x/multiple-push.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -15,7 +17,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
diff --git a/static/examples/7.x/new-screen.js b/static/examples/7.x/new-screen.js
index 7d7e4991edb..21c7b472f92 100755
--- a/static/examples/7.x/new-screen.js
+++ b/static/examples/7.x/new-screen.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
diff --git a/static/examples/7.x/params-nested-navigators.js b/static/examples/7.x/params-nested-navigators.js
index dbb8959679b..d2a20a7cad8 100755
--- a/static/examples/7.x/params-nested-navigators.js
+++ b/static/examples/7.x/params-nested-navigators.js
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Button, 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';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
-function SettingsScreen({ route, navigation }) {
+function SettingsScreen({ route }) {
+  const navigation = useNavigation();
+
   const { user } = route.params;
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -18,7 +20,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>
@@ -26,7 +30,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>
diff --git a/static/examples/7.x/passing-params-back.js b/static/examples/7.x/passing-params-back.js
index 5a2a6051c5d..3c392ef963e 100755
--- a/static/examples/7.x/passing-params-back.js
+++ b/static/examples/7.x/passing-params-back.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Text, TextInput, 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';
 
-function HomeScreen({ navigation, route }) {
+function HomeScreen({ route }) {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     if (route.params?.post) {
       // Post updated, do something with `route.params.post`
@@ -22,7 +24,8 @@ function HomeScreen({ navigation, route }) {
   );
 }
 
-function CreatePostScreen({ navigation, route }) {
+function CreatePostScreen({ route }) {
+  const navigation = useNavigation();
   const [postText, setPostText] = React.useState('');
 
   return (
diff --git a/static/examples/7.x/passing-params.js b/static/examples/7.x/passing-params.js
index 5a43e8c6d51..78a3586dd0e 100755
--- a/static/examples/7.x/passing-params.js
+++ b/static/examples/7.x/passing-params.js
@@ -1,9 +1,11 @@
 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';
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -21,7 +23,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ route, navigation }) {
+function DetailsScreen({ route }) {
+  const navigation = useNavigation();
+
   /* 2. Get the param */
   const { itemId } = route.params;
   const { otherParam } = route.params;
diff --git a/static/examples/7.x/pop-to-top.js b/static/examples/7.x/pop-to-top.js
index 83dd5f08a7c..4d108ad612e 100755
--- a/static/examples/7.x/pop-to-top.js
+++ b/static/examples/7.x/pop-to-top.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -15,7 +17,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md
index 35ac873c811..1582b919c58 100755
--- a/versioned_docs/version-7.x/bottom-tab-navigator.md
+++ b/versioned_docs/version-7.x/bottom-tab-navigator.md
@@ -53,7 +53,7 @@ The `Tab.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -442,7 +442,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The tab navigator adds the following methods to the navigation prop:
+The tab navigator adds the following methods to the navigation object:
 
 #### `jumpTo`
 
diff --git a/versioned_docs/version-7.x/connecting-navigation-prop.md b/versioned_docs/version-7.x/connecting-navigation-prop.md
deleted file mode 100755
index 628cedd792e..00000000000
--- a/versioned_docs/version-7.x/connecting-navigation-prop.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: connecting-navigation-prop
-title: Access the navigation prop from any component
-sidebar_label: Access the navigation prop from any component
----
-
-[`useNavigation`](use-navigation.md) is a hook which gives access to the `navigation` object. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
-
-An ordinary component that is not a screen component will not receive the navigation prop automatically. For example in this `GoToButton` component:
-
-```js
-import * as React from 'react';
-import { Button } from 'react-native';
-
-function GoToButton({ navigation, screenName }) {
-  return (
-    <Button
-      title={`Go to ${screenName}`}
-      onPress={() => navigation.navigate(screenName)}
-    />
-  );
-}
-```
-
-To resolve this exception, you could pass the `navigation` prop in to `GoToButton` when you render it from a screen, like so: `<GoToButton navigation={props.navigation} />`.
-
-Alternatively, you can use the `useNavigation` to provide the `navigation` prop automatically (through React context, if you're curious).
-
-<samp id="navigation-in-component" >useNavigation in component</samp>
-
-```js
-import * as React from 'react';
-import { Button } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-
-function GoToButton({ screenName }) {
-  const navigation = useNavigation();
-
-  return (
-    <Button
-      title={`Go to ${screenName}`}
-      onPress={() => navigation.navigate(screenName)}
-    />
-  );
-}
-```
-
-Using this approach, you can render `GoToButton` anywhere in your app without passing in a `navigation` prop explicitly and it will work as expected.
diff --git a/versioned_docs/version-7.x/custom-navigators.md b/versioned_docs/version-7.x/custom-navigators.md
index 70acaeba829..606cd0fadda 100755
--- a/versioned_docs/version-7.x/custom-navigators.md
+++ b/versioned_docs/version-7.x/custom-navigators.md
@@ -40,7 +40,7 @@ The hook returns an object with following properties:
 - `navigation` - The navigation object containing various helper methods for the navigator to manipulate the [navigation state](navigation-state.md). This isn't the same as the navigation object for the screen and includes some helpers such as `emit` to emit events to the screens.
 - `descriptors` - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by `descriptors[route.key]`. Each descriptor contains the following properties:
 
-  - `navigation` - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive `navigation` prop as well, such as a header component.
+  - `navigation` - The navigation object for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive `navigation` prop as well, such as a header component.
   - `options` - A getter which returns the options such as `title` for the screen if they are specified.
   - `render` - A function which can be used to render the actual screen. Calling `descriptors[route.key].render()` will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.
 
diff --git a/versioned_docs/version-7.x/custom-routers.md b/versioned_docs/version-7.x/custom-routers.md
index 7ee96cfb149..02ca5f30b47 100755
--- a/versioned_docs/version-7.x/custom-routers.md
+++ b/versioned_docs/version-7.x/custom-routers.md
@@ -182,7 +182,7 @@ const MyTabRouter = options => {
 };
 ```
 
-Instead of writing a custom router to handle custom actions, you can [pass a function to `dispatch`](navigation-prop.md#dispatch) instead. It's cleaner and recommended instead of overriding routers.
+Instead of writing a custom router to handle custom actions, you can [pass a function to `dispatch`](navigation-object.md#dispatch) instead. It's cleaner and recommended instead of overriding routers.
 
 ### Blocking Navigation Actions
 
diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md
index ae74f9c6f24..090de68f41b 100644
--- a/versioned_docs/version-7.x/drawer-navigator.md
+++ b/versioned_docs/version-7.x/drawer-navigator.md
@@ -91,7 +91,7 @@ The `Drawer.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -529,7 +529,7 @@ If you have custom drawer content, make sure to emit this event.
 
 ### Helpers
 
-The drawer navigator adds the following methods to the navigation prop:
+The drawer navigator adds the following methods to the navigation object:
 
 #### `openDrawer`
 
diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md
index 235b8383cc3..da0aecb24c8 100755
--- a/versioned_docs/version-7.x/getting-started.md
+++ b/versioned_docs/version-7.x/getting-started.md
@@ -4,6 +4,9 @@ title: Getting started
 sidebar_label: Getting started
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 What follows within the _Fundamentals_ section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.
 
 ## Pre-requisites
@@ -114,9 +117,25 @@ When you use a navigator (such as stack navigator), you'll need to follow the in
 
 :::
 
-## Wrapping your app in `NavigationContainer`
+## Setting up React Navigation
+
+Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.
+
+When using React Navigation, you configure [**navigators**](glossary-of-terms.md#navigator) in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.
+
+There are 2 primary ways to configure the navigators:
+
+### Static configuration
 
-Now, we need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
+The static configuration API has reduced boilerplate and simplifies things such as TypeScript types and deep linking. If you're starting a new project or are new to React Navigation, this is the **recommended way** to set up your app. If you need more flexibility in the future, you can always mix and match with the dynamic configuration.
+
+Continue to ["Hello React Navigation"](hello-react-navigation.md?config=static) to start writing some code with the static API.
+
+### Dynamic configuration
+
+The dynamic configuration allows for more flexibility but requires more boilerplate and configuration (e.g. for deep links, typescript etc.).
+
+To get started with dynamic configuration, first, we need to wrap your app in `NavigationContainer`. Usually, you'd do this in your entry file, such as `index.js` or `App.js`:
 
 ```js
 import * as React from 'react';
@@ -135,6 +154,4 @@ In a typical React Native app, the `NavigationContainer` should be only used onc
 
 :::
 
-Now you are ready to build and run your app on the device/simulator.
-
-Continue to ["Hello React Navigation"](hello-react-navigation.md) to start writing some code.
+Continue to ["Hello React Navigation"](hello-react-navigation.md?config=dynamic) to start writing some code with the dynamic API.
diff --git a/versioned_docs/version-7.x/glossary-of-terms.md b/versioned_docs/version-7.x/glossary-of-terms.md
index 23c5a694c41..70edc366942 100755
--- a/versioned_docs/version-7.x/glossary-of-terms.md
+++ b/versioned_docs/version-7.x/glossary-of-terms.md
@@ -55,41 +55,32 @@ const StackNavigator = (
 
 The suffix `Screen` in the component name is entirely optional, but a frequently used convention; we could call it `Michael` and this would work just the same.
 
-We saw earlier that our screen components are provided with the `navigation` prop. It's important to note that _this only happens if the screen is rendered as a route by React Navigation_ (for example, in response to `navigation.navigate`). For example, if we render `DetailsScreen` as a child of `HomeScreen`, then `DetailsScreen` won't be provided with the `navigation` prop, and when you press the "Go to Details... again" button on the Home screen, the app will throw one of the quintessential JavaScript exceptions "undefined is not an object".
+## Navigation object
 
-```js
-function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
-      <DetailsScreen />
-    </View>
-  );
-}
-```
-
-The ["Navigation prop reference"](navigation-prop.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `navigation` prop.
-
-## Navigation Prop
-
-This prop will be passed to all screens, and it can be used for the following:
+The navigation object contains methods used for navigation. It contains methods such as:
 
 - `dispatch` will send an action up to the router
 - `navigate`, `goBack`, etc are available to dispatch actions in a convenient way
 
-Navigators can also accept a navigation prop, which they should get from the parent navigator, if there is one.
+This object can be accessed with the [`useNavigation`](use-navigation.md) hook. It's also passed as a prop to screens defined with the dynamic API.
 
-For more details, see the ["Navigation prop document"](navigation-prop.md).
+For more details, see the ["Navigation object docs"](navigation-object.md).
 
-The ["Route prop reference"](route-prop.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `route` prop.
+The ["Route object reference"](route-object.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `route` object.
 
-## Route Prop
+## Route object
 
-This prop will be passed to all screens. Contains information about current route i.e. `params`, `key` and `name`.
+This prop will be passed to all screens. Contains information about the current route i.e. `params`, `key` and `name`. It can also contain arbitrary params:
+
+```js
+{
+  key: 'B',
+  name: 'Profile',
+  params: { id: '123' }
+}
+```
+
+For more details, see the ["Route object reference"](route-object.md).
 
 ## Navigation State
 
@@ -110,18 +101,6 @@ For this navigation state, there are two routes (which may be tabs, or cards in
 
 You can read more about the navigation state [here](navigation-state.md).
 
-## Route
-
-Each route is an object which contains a key to identify it, and a "name" to designate the type of route. It can also contain arbitrary params:
-
-```js
-{
-  key: 'B',
-  name: 'Profile',
-  params: { id: '123' }
-}
-```
-
 ## Header
 
 Also known as navigation header, navigation bar, app bar, and probably many other things. This is the rectangle at the top of your screen that contains the back button and the title for your screen. The entire rectangle is often referred to as the header in React Navigation.
diff --git a/versioned_docs/version-7.x/group.md b/versioned_docs/version-7.x/group.md
index 10a702b8626..95dae48a557 100644
--- a/versioned_docs/version-7.x/group.md
+++ b/versioned_docs/version-7.x/group.md
@@ -49,7 +49,7 @@ Options to configure how the screens inside the group get presented in the navig
 </Stack.Group>
 ```
 
-When you pass a function, it'll receive the [`route`](route-prop.md) and [`navigation`](navigation-prop.md):
+When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
 
 ```js
 <Stack.Group
diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md
index 833b94d429f..11cb7c8c41d 100755
--- a/versioned_docs/version-7.x/header-buttons.md
+++ b/versioned_docs/version-7.x/header-buttons.md
@@ -4,16 +4,45 @@ title: Header buttons
 sidebar_label: Header buttons
 ---
 
-Now that we know how to customize the look of our headers, let's make them sentient! Actually perhaps that's ambitious, let's just make them able to respond to our touches in very well defined ways.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Now that we know how to customize the look of our headers, let's make them sentient! Actually perhaps that's ambitious, let's just make them able to respond to our touches in very well-defined ways.
 
 ## Adding a button to the header
 
 The most common way to interact with a header is by tapping on a button either to the left or the right of the title. Let's add a button to the right side of the header (one of the most difficult places to touch on your entire screen, depending on finger and phone size, but also a normal place to put buttons).
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        headerTitle: (props) => <LogoTitle {...props} />,
+        headerRight: () => (
+          <Button
+            onPress={() => alert('This is a button!')}
+            title="Info"
+            color="#fff"
+          />
+        ),
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="simple-header-button">header button</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -35,18 +64,62 @@ function StackScreen() {
 }
 ```
 
-When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's extremely common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
+</TabItem>
+</Tabs>
+
+When we define our button this way, the `this` variable in `options` is _not_ the `HomeScreen` instance, so you can't call `setState` or any instance methods on it. This is pretty important because it's common to want the buttons in your header to interact with the screen that the header belongs to. So, we will look how to do this next.
+
+:::tip
+
+Note that a community-developed library for rendering buttons in the header with the correct styling is available: [react-navigation-header-buttons](https://github.com/vonovak/react-navigation-header-buttons).
 
-> 💡 Please note that a community-developed library for rendering buttons in the header with the correct styling is available: [react-navigation-header-buttons](https://github.com/vonovak/react-navigation-header-buttons).
+:::
 
 ## Header interaction with its screen component
 
 In some cases, components in the header need to interact with the screen component. For this use case, we need to use `navigation.setOptions` to update our options. By using `navigation.setOptions` inside the screen component, we get access to screen's props, state, context etc.
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        headerTitle: (props) => <LogoTitle {...props} />,
+        // Add a placeholder button without the `onPress` to avoid flicker
+        headerRight: () => <Button title="Update count" />,
+      },
+    },
+  },
+});
+
+function HomeScreen({ navigation }) {
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    // Use `setOptions` to update the button that we previously specified
+    // Now the button includes an `onPress` handler to update the count
+    navigation.setOptions({
+      headerRight: () => (
+        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
+      ),
+    });
+  }, [navigation]);
+
+  return <Text>Count: {count}</Text>;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="header-interaction">header interaction</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -55,9 +128,7 @@ function StackScreen() {
         options={({ navigation, route }) => ({
           headerTitle: (props) => <LogoTitle {...props} />,
           // Add a placeholder button without the `onPress` to avoid flicker
-          headerRight: () => (
-            <Button title="Update count" />
-          ),
+          headerRight: () => <Button title="Update count" />,
         })}
       />
     </Stack.Navigator>
@@ -81,6 +152,9 @@ function HomeScreen({ navigation }) {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 Here we update the `headerRight` with a button with `onPress` handler that has access to the component's state and can update it.
 
 ## Customizing the back button
diff --git a/versioned_docs/version-7.x/headers.md b/versioned_docs/version-7.x/headers.md
index 24e5774211e..117d9c3e822 100755
--- a/versioned_docs/version-7.x/headers.md
+++ b/versioned_docs/version-7.x/headers.md
@@ -4,16 +4,38 @@ title: Configuring the header bar
 sidebar_label: Configuring the header bar
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 We've seen how to configure the header title already, but let's go over that again before moving on to some other options &mdash; repetition is key to learning!
 
 ## Setting the header title
 
-A Screen component accepts `options` prop which is either an object or a function that returns an object, that contains various configuration options. The one we use for the header title is `title`, as shown in the following example.
+Each screen has `options` which is either an object or a function that returns an object, that contains various configuration options. The one we use for the header title is `title`, as shown in the following example.
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'My home',
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
 <samp id="basic-header-config">header title</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -26,14 +48,40 @@ function StackScreen() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 ## Using params in the title
 
-In order to use params in the title, we need to make `options` prop for the screen a function that returns a configuration object. It might be tempting to try to use `this.props` inside of `options`, but because it is defined before the component is rendered, `this` does not refer to an instance of the component and therefore no props are available. Instead, if we make `options` a function then React Navigation will call it with an object containing `{ navigation, route }` - in this case, all we care about is `route`, which is the same object that is passed to your screen props as `route` prop. You may recall that we can get the params through `route.params`, and so we do this below to extract a param and use it as a title.
+In order to use params in the title, we need to make `options` for the screen a function that returns a configuration object. If we make `options` a function then React Navigation will call it with an object containing `{ navigation, route }` - in this case, all we care about is `route`, which is the same object that is passed to your screen props as `route` prop. You may recall that we can get the params through `route.params`, and so we do this below to extract a param and use it as a title.
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'My home',
+      },
+    },
+    Profile: {
+      screen: ProfileScreen,
+      options: ({ route }) => ({ title: route.params.name }),
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
 <samp id="params-in-title">params in title</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -51,12 +99,15 @@ function StackScreen() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 The argument that is passed in to the `options` function is an object with the following properties:
 
-- `navigation` - The [navigation prop](navigation-prop.md) for the screen.
-- `route` - The [route prop](route-prop.md) for the screen
+- `navigation` - The [navigation object](navigation-object.md) for the screen.
+- `route` - The [route object](route-object.md) for the screen
 
-We only needed the `route` prop in the above example but you may in some cases want to use `navigation` as well.
+We only needed the `route` object in the above example but you may in some cases want to use `navigation` as well.
 
 ## Updating `options` with `setOptions`
 
@@ -65,7 +116,6 @@ It's often necessary to update the `options` configuration for the active screen
 <samp id="updating-options-with-setoptions">updating navigation options</samp>
 
 ```js
-/* Inside of render() of React class */
 <Button
   title="Update the title"
   onPress={() => navigation.setOptions({ title: 'Updated!' })}
@@ -76,14 +126,40 @@ It's often necessary to update the `options` configuration for the active screen
 
 There are three key properties to use when customizing the style of your header: `headerStyle`, `headerTintColor`, and `headerTitleStyle`.
 
-- `headerStyle`: a style object that will be applied to the `View` that wraps the header. If you set `backgroundColor` on it, that will be the color of your header.
+- `headerStyle`: a style object that will be applied to the view that wraps the header. If you set `backgroundColor` on it, that will be the color of your header.
 - `headerTintColor`: the back button and title both use this property as their color. In the example below, we set the tint color to white (`#fff`) so the back button and the header title would be white.
 - `headerTitleStyle`: if we want to customize the `fontFamily`, `fontWeight` and other `Text` style properties for the title, we can use this to do it.
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'My home',
+        headerStyle: {
+          backgroundColor: '#f4511e',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: 'bold',
+        },
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="header-styles">header styles</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -105,6 +181,9 @@ function StackScreen() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 ![Custom header styles](/assets/headers/custom_headers.png)
 
 There are a couple of things to notice here:
@@ -114,12 +193,40 @@ There are a couple of things to notice here:
 
 ## Sharing common `options` across screens
 
-It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the `DetailsScreen` the colors go back to the defaults. Wouldn't it be awful if we had to copy the `options` header style properties from `HomeScreen` to `DetailsScreen`, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the native stack navigator under the prop `screenOptions`.
+It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and the tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the `DetailsScreen` the colors go back to the defaults. Wouldn't it be awful if we had to copy the `options` header style properties from `Home` to `Details`, and for every single screen we use in our app? Thankfully, we do not. We can instead move the configuration up to the native stack navigator under `screenOptions`:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screenOptions: {
+    headerStyle: {
+      backgroundColor: '#f4511e',
+    },
+    headerTintColor: '#fff',
+    headerTitleStyle: {
+      fontWeight: 'bold',
+    },
+  },
+  screens: {
+    Home: {
+      screen: HomeScreen,
+    },
+    Details: {
+      screen: DetailsScreen,
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
 <samp id="sharing-header-styles">sharing header styles</samp>
 
 ```js
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator
       screenOptions={{
@@ -142,12 +249,43 @@ function StackScreen() {
 }
 ```
 
-Now, any screen that belongs to the `Stack.Navigator` will have our wonderful branded styles. Surely though, there must be a way to override these options if we need to?
+</TabItem>
+</Tabs>
+
+Now, any screen that belongs to this navigator will have our wonderful branded styles. Surely though, there must be a way to override these options if we need to?
 
 ## Replacing the title with a custom component
 
 Sometimes you need more control than just changing the text and styles of your title -- for example, you may want to render an image in place of the title, or make the title into a button. In these cases you can completely override the component used for the title and provide your own.
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+function LogoTitle() {
+  return (
+    <Image
+      style={{ width: 50, height: 50 }}
+      source={require('@expo/snack-static/react-native-logo.png')}
+    />
+  );
+}
+
+const MyStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        headerTitle: (props) => <LogoTitle {...props} />,
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="custom-header-title-component">custom header title component</samp>
 
 ```js
@@ -160,7 +298,7 @@ function LogoTitle() {
   );
 }
 
-function StackScreen() {
+function MyStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -173,6 +311,9 @@ function StackScreen() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 :::note
 
 You might be wondering, why `headerTitle` when we provide a component and not `title`, like before? The reason is that `headerTitle` is a property that is specific to headers, whereas `title` will be used for tab bars, drawers etc. as well. The `headerTitle` defaults to a `Text` component that displays the `title`.
@@ -185,6 +326,6 @@ You can read the full list of available `options` for screens inside of a native
 
 ## Summary
 
-- You can customize the header inside of the `options` prop of your screen components. Read the full list of options [in the API reference](native-stack-navigator.md#options).
-- The `options` prop can be an object or a function. When it is a function, it is provided with an object with the `navigation` and `route` prop.
-- You can also specify shared `screenOptions` in the stack navigator configuration when you initialize it. The prop takes precedence over that configuration.
+- You can customize the header inside of the `options` property of your screens. Read the full list of options [in the API reference](native-stack-navigator.md#options).
+- The `options` property can be an object or a function. When it is a function, it is provided with an object with the `navigation` and `route` objects.
+- You can also specify shared `screenOptions` in the stack navigator configuration when you initialize it. This will apply to all screens in the navigator.
diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md
index b318c2c74ff..90476e835c2 100755
--- a/versioned_docs/version-7.x/hello-react-navigation.md
+++ b/versioned_docs/version-7.x/hello-react-navigation.md
@@ -4,6 +4,9 @@ title: Hello React Navigation
 sidebar_label: Hello React Navigation
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 In a web browser, you can link to different pages using an anchor (`<a>`) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.
 
 React Navigation's native stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's native stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.
@@ -18,13 +21,58 @@ The libraries we've installed so far are the building blocks and shared foundati
 npm install @react-navigation/native-stack@next
 ```
 
-> 💡 `@react-navigation/native-stack` depends on `react-native-screens` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions.
+:::info
+
+`@react-navigation/native-stack` depends on `react-native-screens` and the other libraries that we installed in [Getting started](getting-started.md). If you haven't installed those yet, head over to that page and follow the installation instructions.
+
+:::
 
 ### Creating a native stack navigator
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+`createNativeStackNavigator` is a function that takes a configuration object containing the screens and customization options. The screens are React Components that render the content displayed by the navigator.
+
+`createStaticNavigation` is a function that takes the navigator defined earlier and returns a component that can be rendered in the app. It's only called once in the app.
+
+```js
+// In App.js in a new project
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: HomeScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 `createNativeStackNavigator` is a function that returns an object containing 2 properties: `Screen` and `Navigator`. Both of them are React components used for configuring the navigator. The `Navigator` should contain `Screen` elements as its children to define the configuration for routes.
 
-`NavigationContainer` is a component which manages our navigation tree and contains the [navigation state](navigation-state.md). This component must wrap all navigators structure. Usually, we'd render this component at the root of our app, which is usually the component exported from `App.js`.
+`NavigationContainer` is a component that manages our navigation tree and contains the [navigation state](navigation-state.md). This component must wrap all the navigators in the app. Usually, we'd render this component at the root of our app, which is usually the component exported from `App.js`.
 
 <samp id="hello-react-navigation" />
 
@@ -59,6 +107,9 @@ function App() {
 export default App;
 ```
 
+</TabItem>
+</Tabs>
+
 ![Basic app using stack navigator](/assets/navigators/stack/basic_stack_nav.png)
 
 If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your `HomeScreen` component (shown above). The styles you see for the navigation bar and the content area are the default configuration for a stack navigator, we'll learn how to configure those later.
@@ -75,6 +126,36 @@ All of the route configuration is specified as props to our navigator. We haven'
 
 Let's add a second screen to our native stack navigator and configure the `Home` screen to render first:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+function DetailsScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: HomeScreen,
+    Details: DetailsScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="hello-react-navigation-full" />
 
 ```js
@@ -100,19 +181,81 @@ function App() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 Now our stack has two _routes_, a `Home` route and a `Details` route. A route can be specified by using the `Screen` component. The `Screen` component accepts a `name` prop which corresponds to the name of the route we will use to navigate, and a `component` prop which corresponds to the component it'll render.
 
 Here, the `Home` route corresponds to the `HomeScreen` component, and the `Details` route corresponds to the `DetailsScreen` component. The initial route for the stack is the `Home` route. Try changing it to `Details` and reload the app (React Native's Fast Refresh won't update changes from `initialRouteName`, as you might expect), notice that you will now see the `Details` screen. Then change it back to `Home` and reload once more.
 
 :::warning
 
-The `component` prop accepts component, not a render function. Don't pass an inline function (e.g. `component={() => <HomeScreen />}`), or your component will unmount and remount losing all state when the parent component re-renders. See [Passing additional props](#passing-additional-props) for alternatives.
+When using the dynamic API, the `component` prop accepts a component, not a render function. Don't pass an inline function (e.g. `component={() => <HomeScreen />}`), or your component will unmount and remount losing all state when the parent component re-renders. See [Passing additional props](#passing-additional-props) for alternatives.
 
 :::
 
 ### Specifying options
 
-Each screen in the navigator can specify some options for the navigator, such as the title to render in the header. These options can be passed in the `options` prop for each screen component:
+Each screen in the navigator can specify some options for the navigator, such as the title to render in the header.
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+To specify the options, we'll change how we have specified the screen component:
+
+```js
+const RootStack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: {
+      screen: HomeScreen,
+    },
+    Details: DetailsScreen,
+  },
+});
+```
+
+Now, we can add an `options` property:
+
+```js
+const RootStack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'Overview',
+      },
+    },
+    Details: DetailsScreen,
+  },
+});
+```
+
+Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can add a `screenOptions` property to the configuration:
+
+```js
+const RootStack = createNativeStackNavigator({
+  initialRouteName: 'Home',
+  screenOptions: {
+    headerStyle: { backgroundColor: 'tomato' },
+  },
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        title: 'Overview',
+      },
+    },
+    Details: DetailsScreen,
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+Any customization options can be passed in the `options` prop for each screen component:
 
 <samp id="hello-react-navigation-with-options" />
 
@@ -124,10 +267,37 @@ Each screen in the navigator can specify some options for the navigator, such as
 />
 ```
 
-Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can pass a `screenOptions` prop to the navigator.
+Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can pass a `screenOptions` prop to the navigator:
+
+```js
+<Stack.Navigator
+  initialRouteName="Home"
+  screenOptions={{
+    headerStyle: { backgroundColor: 'tomato' },
+  }}
+>
+  <Stack.Screen
+    name="Home"
+    component={HomeScreen}
+    options={{ title: 'Overview' }}
+  />
+  <Stack.Screen name="Details" component={DetailsScreen} />
+</Stack.Navigator>
+```
+
+</TabItem>
+</Tabs>
 
 ### Passing additional props
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+Passing additional props to a screen is not supported in the static API.
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:
 
 1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended).
@@ -145,14 +315,32 @@ By default, React Navigation applies optimizations to screen components to preve
 
 :::
 
+</TabItem>
+</Tabs>
+
 ## What's next?
 
 The natural question at this point is: "how do I go from the `Home` route to the `Details` route?". That is covered in the [next section](navigating.md).
 
 ## Summary
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+- React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
+- `createNativeStackNavigator` is a function that takes the screens configuration and renders our content.
+- Each property under screens refers to the name of the route, and the value is the component to render for the route.
+- To specify what the initial route in a stack is, provide an `initialRouteName` option for the navigator.
+- To specify screen-specific options, we can specify an `options` property, and for common options, we can specify `screenOptions`.
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 - React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
 - `Stack.Navigator` is a component that takes route configuration as its children with additional props for configuration and renders our content.
 - Each `Stack.Screen` component takes a `name` prop which refers to the name of the route and `component` prop which specifies the component to render for the route. These are the 2 required props.
 - To specify what the initial route in a stack is, provide an `initialRouteName` as the prop for the navigator.
-- To specify screen-specific options, we can pass an `options` prop to `Stack.Screen`, and for common options, we can pass `screenOptions` to `Stack.Navigator`
+- To specify screen-specific options, we can pass an `options` prop to `Stack.Screen`, and for common options, we can pass `screenOptions` to `Stack.Navigator`.
+
+</TabItem>
+</Tabs>
diff --git a/versioned_docs/version-7.x/material-top-tab-navigator.md b/versioned_docs/version-7.x/material-top-tab-navigator.md
index e9d3f541100..21635e487e2 100755
--- a/versioned_docs/version-7.x/material-top-tab-navigator.md
+++ b/versioned_docs/version-7.x/material-top-tab-navigator.md
@@ -75,7 +75,7 @@ The `Tab.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -408,7 +408,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The tab navigator adds the following methods to the navigation prop:
+The tab navigator adds the following methods to the navigation object:
 
 #### `jumpTo`
 
diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md
index 02ca5134f2b..7726ea98674 100644
--- a/versioned_docs/version-7.x/multiple-drawers.md
+++ b/versioned_docs/version-7.x/multiple-drawers.md
@@ -64,7 +64,7 @@ export default function App() {
 }
 ```
 
-But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer. We don't have access to the right drawer via the `navigation` prop since it's not a navigator.
+But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer. We don't have access to the right drawer via the `navigation` object since it's not a navigator.
 
 To solve this, we need to use context API to pass down a function to control the right drawer:
 
@@ -192,7 +192,7 @@ export default function App() {
 
 But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer since it's the immediate parent of the screen.
 
-To solve this, we need to use [`navigation.getParent`](navigation-prop.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like:
+To solve this, we need to use [`navigation.getParent`](navigation-object.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like:
 
 ```js
 <Button onPress={() => navigation.openDrawer()} title="Open left drawer" />
@@ -282,4 +282,4 @@ Here, we are passing `"LeftDrawer"` and `"RightDrawer"` strings (you can use any
 - To have multiple drawers, you can use [`react-native-drawer-layout`](drawer-layout.md) directly in combination with a drawer navigator.
 - The [`drawerPosition`](drawer-layout.md#drawerposition) prop can be used to position the drawer on the right.
 - The methods to control the drawer can be passed down using context API when using [`react-native-drawer-layout`](drawer-layout.md).
-- When nesting multiple navigators, you can use [`navigation.getParent`](navigation-prop.md#getparent) in combination with the [`id` prop](drawer-navigator.md#id) to refer to the desired drawer.
+- When nesting multiple navigators, you can use [`navigation.getParent`](navigation-object.md#getparent) in combination with the [`id` prop](drawer-navigator.md#id) to refer to the desired drawer.
diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md
index c7307c6448c..9258c409f58 100755
--- a/versioned_docs/version-7.x/native-stack-navigator.md
+++ b/versioned_docs/version-7.x/native-stack-navigator.md
@@ -20,7 +20,11 @@ npm install @react-navigation/native-stack@next
 
 ## API Definition
 
-> 💡 If you encounter any bugs while using `createNativeStackNavigator`, please open issues on [`react-native-screens`](https://github.com/software-mansion/react-native-screens) rather than the `react-navigation` repository!
+:::info
+
+If you encounter any bugs while using `createNativeStackNavigator`, please open issues on [`react-native-screens`](https://github.com/software-mansion/react-native-screens) rather than the `react-navigation` repository!
+
+:::
 
 To use this navigator, import it from `@react-navigation/native-stack`:
 
@@ -49,7 +53,7 @@ The `Stack.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -650,7 +654,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The nativestack navigator adds the following methods to the navigation prop:
+The nativestack navigator adds the following methods to the navigation object:
 
 #### `replace`
 
diff --git a/versioned_docs/version-7.x/navigating-without-navigation-prop.md b/versioned_docs/version-7.x/navigating-without-navigation-prop.md
index 783c8529f78..e5c1fa10822 100755
--- a/versioned_docs/version-7.x/navigating-without-navigation-prop.md
+++ b/versioned_docs/version-7.x/navigating-without-navigation-prop.md
@@ -4,7 +4,7 @@ title: Navigating without the navigation prop
 sidebar_label: Navigating without the navigation prop
 ---
 
-Sometimes you need to trigger a navigation action from places where you do not have access to the `navigation` prop, such as a Redux middleware. For such cases, you can dispatch navigation actions use a [`ref` on the navigation container](navigation-container.md#ref).
+Sometimes you need to trigger a navigation action from places where you do not have access to the `navigation` object, such as a Redux middleware. For such cases, you can dispatch navigation actions use a [`ref` on the navigation container](navigation-container.md#ref).
 
 **Do not** use the `ref` if:
 
diff --git a/versioned_docs/version-7.x/navigating.md b/versioned_docs/version-7.x/navigating.md
index 5177d0dd3b9..8fce9e37230 100755
--- a/versioned_docs/version-7.x/navigating.md
+++ b/versioned_docs/version-7.x/navigating.md
@@ -4,7 +4,7 @@ title: Moving between screens
 sidebar_label: Moving between screens
 ---
 
-In the previous section, ["Hello React Navigation"](hello-react-navigation.md), we defined a stack navigator with two routes (`Home` and `Details`), but we didn't learn how to let a user navigate from `Home` to `Details` (although we did learn how to change the _initial_ route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine).
+In the previous section, we defined a stack navigator with two routes (`Home` and `Details`), but we didn't learn how to let a user navigate from `Home` to `Details` (although we did learn how to change the _initial_ route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine).
 
 If this was a web browser, we'd be able to write something like this:
 
@@ -24,7 +24,7 @@ Another way to write this would be:
 </a>
 ```
 
-We'll do something similar to the latter, but rather than using a `window.location` global, we'll use the `navigation` prop that is passed down to our screen components.
+We'll do something similar to the latter, but rather than using a `window.location` global, we'll use the `navigation` object that's accessible in our screen components.
 
 ## Navigating to a new screen
 
@@ -33,10 +33,12 @@ We'll do something similar to the latter, but rather than using a `window.locati
 ```js
 import * as React from 'react';
 import { Button, 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 }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -53,8 +55,8 @@ function HomeScreen({ navigation }) {
 
 Let's break this down:
 
-- `navigation` - the `navigation` prop is passed in to every **screen component** ([definition](glossary-of-terms.md#screen-component)) in the native stack navigator (more about this later in ["The navigation prop in depth"](navigation-prop.md)).
-- `navigate('Details')` - we call the `navigate` function (on the `navigation` prop &mdash; naming is hard!) with the name of the route that we'd like to move the user to.
+- `navigation` - the `navigation` object is returned from the [`useNavigation`](use-navigation.md) hook (more about this later in ["The navigation object in depth"](navigation-object.md)).
+- `navigate('Details')` - we call the `navigate` function (on the `navigation` object &mdash; naming is hard!) with the name of the route that we'd like to move the user to.
 
 :::note
 
@@ -69,7 +71,9 @@ So we now have a stack with two routes: 1) the `Home` route 2) the `Details` rou
 <samp id="multiple-navigate" />
 
 ```js
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
@@ -112,7 +116,9 @@ Sometimes you'll want to be able to programmatically trigger this behavior, and
 <samp id="go-back" />
 
 ```js
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
@@ -138,7 +144,9 @@ Another common requirement is to be able to go back _multiple_ screens -- for ex
 <samp id="pop-to-top" />
 
 ```js
-function DetailsScreen({ navigation }) {
+function DetailsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
@@ -163,4 +171,4 @@ function DetailsScreen({ navigation }) {
 - We can call `navigation.push('RouteName')` as many times as we like and it will continue pushing routes.
 - The header bar will automatically show a back button, but you can programmatically go back by calling `navigation.goBack()`. On Android, the hardware back button just works as expected.
 - You can go back to an existing screen in the stack with `navigation.popTo('RouteName')`, and you can go back to the first screen in the stack with `navigation.popToTop()`.
-- The `navigation` prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).
+- The `navigation` object is available to all screen components with the [`useNavigation`](use-navigation.md) hook.
diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md
index 8bf893bb409..f4ddb71ac85 100644
--- a/versioned_docs/version-7.x/navigation-container.md
+++ b/versioned_docs/version-7.x/navigation-container.md
@@ -31,7 +31,7 @@ export default function App() {
 
 ## Ref
 
-It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware.
+It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware.
 
 Example:
 
diff --git a/versioned_docs/version-7.x/navigation-context.md b/versioned_docs/version-7.x/navigation-context.md
index 1d2afa4e81a..7b31dd0b654 100755
--- a/versioned_docs/version-7.x/navigation-context.md
+++ b/versioned_docs/version-7.x/navigation-context.md
@@ -4,7 +4,7 @@ title: NavigationContext
 sidebar_label: NavigationContext
 ---
 
-`NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-prop.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
+`NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-object.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
 
 Most of the time, you won't use `NavigationContext` directly, as the provided `useNavigation` covers most use cases. But just in case you have something else in mind, `NavigationContext` is available for you to use.
 
diff --git a/versioned_docs/version-7.x/navigation-events.md b/versioned_docs/version-7.x/navigation-events.md
index 85d53ed3ad7..f442487b8e5 100644
--- a/versioned_docs/version-7.x/navigation-events.md
+++ b/versioned_docs/version-7.x/navigation-events.md
@@ -42,7 +42,7 @@ You can listen to events with the following APIs:
 
 ### `navigation.addListener`
 
-Inside a screen, you can add listeners on the `navigation` prop with the `addListener` method. The `addListener` method takes 2 arguments: type of the event, and a callback to be called on the event. It returns a function that can be called to unsubscribe from the event.
+Inside a screen, you can add listeners on the `navigation` object with the `addListener` method. The `addListener` method takes 2 arguments: type of the event, and a callback to be called on the event. It returns a function that can be called to unsubscribe from the event.
 
 Example:
 
@@ -93,7 +93,7 @@ class Profile extends React.Component {
 }
 ```
 
-One thing to keep in mind is that you can only listen to events from the immediate navigator with `addListener`. For example, if you try to add a listener in a screen that's inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use [`navigation.getParent`](navigation-prop.md#getparent) to get a reference to parent navigator's navigation prop and add a listener.
+One thing to keep in mind is that you can only listen to events from the immediate navigator with `addListener`. For example, if you try to add a listener in a screen that's inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use [`navigation.getParent`](navigation-object.md#getparent) to get a reference to the parent screen's navigation object and add a listener.
 
 ```js
 const unsubscribe = navigation
@@ -164,7 +164,7 @@ Example:
 </Stack.Navigator>
 ```
 
-Similar to `listeners`, you can also pass a function to `screenListeners`. The function will receive the [`navigation` prop](navigation-prop.md) and the [`route` prop](route-prop.md) for each screen. This can be useful if you need access to the `navigation` object.
+Similar to `listeners`, you can also pass a function to `screenListeners`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for each screen. This can be useful if you need access to the `navigation` object.
 
 ```js
 <Tab.Navigator
diff --git a/versioned_docs/version-7.x/navigation-lifecycle.md b/versioned_docs/version-7.x/navigation-lifecycle.md
index c634545a299..4beb1bc5158 100755
--- a/versioned_docs/version-7.x/navigation-lifecycle.md
+++ b/versioned_docs/version-7.x/navigation-lifecycle.md
@@ -4,6 +4,9 @@ title: Navigation lifecycle
 sidebar_label: Navigation lifecycle
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 In a previous section, we worked with a stack navigator that has two screens (`Home` and `Details`) and learned how to use `navigation.navigate('RouteName')` to navigate between the routes.
 
 An important question in this context is: what happens with `Home` when we navigate away from it, or when we come back to it? How does a route find out that a user is leaving it or coming back to it?
@@ -18,6 +21,36 @@ When going back from B to A, `componentWillUnmount` of B is called, but `compone
 
 Similar results can be observed (in combination) with other navigators as well. Consider a tab navigator with two tabs, where each tab is a stack navigator:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const SettingsStack = createStackNavigator({
+  Settings: SettingsScreen,
+  Profile: ProfileScreen,
+});
+
+const HomeStack = createStackNavigator({
+  Home: HomeScreen,
+  Details: DetailsScreen,
+});
+
+const MyTabs = createBottomTabNavigator({
+  First: SettingsStack,
+  Second: HomeStack,
+});
+
+
+const Navigation = createStaticNavigation(MyTabs);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="navigation-lifecycle" />
 
 ```jsx
@@ -50,6 +83,9 @@ function App() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 We start on the `HomeScreen` and navigate to `DetailsScreen`. Then we use the tab bar to switch to the `SettingsScreen` and navigate to `ProfileScreen`. After this sequence of operations is done, all 4 of the screens are mounted! If you use the tab bar to switch back to the `HomeStack`, you'll notice you'll be presented with the `DetailsScreen` - the navigation state of the `HomeStack` has been preserved!
 
 ## React Navigation lifecycle events
@@ -108,5 +144,5 @@ If you want to render different things based on if the screen is focused or not,
 
 ## Summary
 
-- While React's lifecycle methods are still valid, React Navigation adds more events that you can subscribe to through the `navigation` prop.
+- While React's lifecycle methods are still valid, React Navigation adds more events that you can subscribe to through the `navigation` object.
 - You may also use the `useFocusEffect` or `useIsFocused` hooks.
diff --git a/versioned_docs/version-7.x/navigation-prop.md b/versioned_docs/version-7.x/navigation-object.md
similarity index 89%
rename from versioned_docs/version-7.x/navigation-prop.md
rename to versioned_docs/version-7.x/navigation-object.md
index 859b51ddd8c..5b345e5d8e4 100755
--- a/versioned_docs/version-7.x/navigation-prop.md
+++ b/versioned_docs/version-7.x/navigation-object.md
@@ -1,10 +1,10 @@
 ---
-id: navigation-prop
-title: Navigation prop reference
-sidebar_label: Navigation prop
+id: navigation-object
+title: Navigation object reference
+sidebar_label: Navigation object
 ---
 
-Each `screen` component in your app is provided with the `navigation` prop automatically. The prop contains various convenience functions that dispatch navigation actions. It looks like this:
+The `navigation` object contains various convenience functions that dispatch navigation actions. It looks like this:
 
 - `navigation`
   - `navigate` - go to another screen, figures out the action it needs to take to do it
@@ -16,13 +16,17 @@ Each `screen` component in your app is provided with the `navigation` prop autom
   - `isFocused` - check whether the screen is focused
   - `addListener` - subscribe to updates to events from the navigators
 
-It's important to highlight the `navigation` prop is _not_ passed in to _all_ components; only `screen` components receive this prop automatically! React Navigation doesn't do any magic here. For example, if you were to define a `MyBackButton` component and render it as a child of a screen component, you would not be able to access the `navigation` prop on it. If, however, you wish to access the `navigation` prop in any of your components, you may use the [`useNavigation`](use-navigation.md) hook.
+The `navigation` object can be accessed inside any screen component with the [`useNavigation`](use-navigation.md) hook. It's also passed as a prop only to screens components defined with the dynamic API.
 
-> `setParams`/`setOptions` etc. should only be called in `useEffect`/`useLayoutEffect`/`componentDidMount`/`componentDidUpdate` etc. Not during render or in constructor.
+:::warning
+
+`setParams`/`setOptions` etc. should only be called in event listeners or `useEffect`/`useLayoutEffect`/`componentDidMount`/`componentDidUpdate` etc. Not during render or in constructor.
+
+:::
 
 ### Navigator-dependent functions
 
-There are several additional functions present on `navigation` prop based on the kind of the current navigator.
+There are several additional functions present on `navigation` object based on the kind of the current navigator.
 
 If the navigator is a stack navigator, several alternatives to `navigate` and `goBack` are provided and you can use whichever you prefer. The functions are:
 
@@ -54,7 +58,7 @@ See [Drawer navigator helpers](drawer-navigator.md#helpers) for more details on
 
 ## Common API reference
 
-The vast majority of your interactions with the `navigation` prop will involve `navigate`, `goBack`, and `setParams`.
+The vast majority of your interactions with the `navigation` object will involve `navigate`, `goBack`, and `setParams`.
 
 ### `navigate`
 
@@ -209,7 +213,7 @@ You can also use `React.useLayoutEffect` to reduce the delay in updating the opt
 
 ## Navigation events
 
-Screens can add listeners on the `navigation` prop with the `addListener` method. For example, to listen to the `focus` event:
+Screens can add listeners on the `navigation` object with the `addListener` method. For example, to listen to the `focus` event:
 
 <samp id="simple-focus-and-blur" />
 
@@ -338,7 +342,7 @@ Don't use this method for rendering content as this will not trigger a re-render
 
 ### `getParent`
 
-This method returns the navigation prop from the parent navigator that the current navigator is nested in. For example, if you have a stack navigator and a tab navigator nested inside the stack, then you can use `getParent` inside a screen of the tab navigator to get the navigation prop passed from the stack navigator.
+This method returns the navigation object from the parent navigator that the current navigator is nested in. For example, if you have a stack navigator and a tab navigator nested inside the stack, then you can use `getParent` inside a screen of the tab navigator to get the navigation object passed from the stack navigator.
 
 It accepts an optional ID parameter to refer to a specific parent navigator. For example, if your screen is nested with multiple levels of nesting somewhere under a drawer navigator with the `id` prop as `"LeftDrawer"`, you can directly refer to it without calling `getParent` multiple times.
 
diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md
index d5849d3eba7..207e0b1229a 100755
--- a/versioned_docs/version-7.x/nesting-navigators.md
+++ b/versioned_docs/version-7.x/nesting-navigators.md
@@ -4,8 +4,45 @@ title: Nesting navigators
 sidebar_label: Nesting navigators
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Nesting navigators means rendering a navigator inside a screen of another navigator, for example:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const Home = createBottomTabNavigator({
+  screens: {
+    Feed,
+    Messages,
+  },
+});
+
+const RootStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: Home,
+      options: {
+        headerShown: false,
+      },
+    },
+    Profile,
+    Settings,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="nested-navigators" />
 
 ```js
@@ -18,31 +55,40 @@ function Home() {
   );
 }
 
+function RootStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen name="Profile" component={Profile} />
+      <Stack.Screen name="Settings" component={Settings} />
+    </Stack.Navigator>
+  );
+}
+
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={Home}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen name="Profile" component={Profile} />
-        <Stack.Screen name="Settings" component={Settings} />
-      </Stack.Navigator>
+      <RootStack />
     </NavigationContainer>
   );
 }
 ```
 
-In the above example, the `Home` component contains a tab navigator. The `Home` component is also used for the `Home` screen in your stack navigator inside the `App` component. So here, a tab navigator is nested inside a stack navigator:
+</TabItem>
+</Tabs>
+
+In the above example, the `Home` screen contains a tab navigator. It is also used for the `Home` screen in your stack navigator in `RootStack`. So here, a tab navigator is nested inside a stack navigator:
 
-- `Stack.Navigator`
-  - `Home` (`Tab.Navigator`)
-    - `Feed` (`Screen`)
-    - `Messages` (`Screen`)
-  - `Profile` (`Screen`)
-  - `Settings` (`Screen`)
+- `RootStack` (Stack navigator)
+  - `Home` (Tab navigator)
+    - `Feed` (screen)
+    - `Messages` (screen)
+  - `Profile` (screen)
+  - `Settings` (screen)
 
 Nesting navigators work very much like nesting regular components. To achieve the behavior you want, it's often necessary to nest multiple navigators.
 
@@ -62,7 +108,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes
 
 ### Each screen in a navigator has its own params
 
-For example, any `params` passed to a screen in a nested navigator are in the `route` prop of that screen and aren't accessible from a screen in a parent or child navigator.
+For example, any `params` passed to a screen in a nested navigator are in the `route` object of that screen and aren't accessible from a screen in a parent or child navigator.
 
 If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children.
 
@@ -72,11 +118,11 @@ For example, if you're calling `navigation.goBack()` in a nested screen, it'll o
 
 ### Navigator specific methods are available in the navigators nested inside
 
-For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` prop in the screen's inside the stack navigator. But say you have a stack navigator as the parent of the drawer, then the screens inside the stack navigator won't have access to these methods, because they aren't nested inside the drawer.
+For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` object in the screens inside the stack navigator. But say you have a stack navigator as the parent of the drawer, then the screens inside the stack navigator won't have access to these methods, because they aren't nested inside the drawer.
 
-Similarly, if you have a tab navigator inside stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop.
+Similarly, if you have a tab navigator inside stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` object.
 
-If you need to dispatch actions to the nested child navigators from a parent, you can use [`navigation.dispatch`](navigation-prop.md#dispatch):
+If you need to dispatch actions to the nested child navigators from a parent, you can use [`navigation.dispatch`](navigation-object.md#dispatch):
 
 ```js
 navigation.dispatch(DrawerActions.toggleDrawer());
@@ -86,7 +132,7 @@ navigation.dispatch(DrawerActions.toggleDrawer());
 
 For example, if you have a stack navigator nested inside a tab navigator, the screens in the stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`.
 
-To receive events from parent navigator, you can explicitly listen to parent's events with [`navigation.getParent`](navigation-prop.md#getparent):
+To receive events from parent navigator, you can explicitly listen to parent's events with [`navigation.getParent`](navigation-object.md#getparent):
 
 <samp id="nested-navigators-events" />
 
@@ -115,10 +161,44 @@ In your app, you will probably use these patterns depending on the behavior you
 
 Consider the following example:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyDrawer = createDrawerNavigator({
+  screens: {
+    Home,
+    Profile,
+    Settings,
+  },
+});
+
+const RootStack = createStackNavigator({
+  screens: {
+    MyDrawer: {
+      screen: MyDrawer,
+      options: {
+        headerShown: false,
+      },
+    },
+    Feed,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="nested-navigator-screen" />
 
 ```js
-function Root() {
+function MyDrawer() {
   return (
     <Drawer.Navigator>
       <Drawer.Screen name="Home" component={Home} />
@@ -128,40 +208,45 @@ function Root() {
   );
 }
 
+function RootStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="MyDrawer"
+        component={MyDrawer}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen name="Feed" component={Feed} />
+    </Stack.Navigator>
+  );
+}
+
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Root"
-          component={Root}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen name="Feed" component={Feed} />
-      </Stack.Navigator>
+      <SRootStack />
     </NavigationContainer>
   );
 }
 ```
 
-Here, you might want to navigate to the `Root` screen from your `Feed` component:
+</TabItem>
+</Tabs>
+
+Here, you might want to navigate to the `MyDrawer` screen from your `Feed` component:
 
 ```js
-navigation.navigate('Root');
+navigation.navigate('MyDrawer');
 ```
 
-It works, and the initial screen inside the `Root` component is shown, which is `Home`. But sometimes you may want to control the screen that should be shown upon navigation. To achieve it, you can pass the name of the screen in params:
+It works, and the initial screen inside the `MyDrawer` component is shown, which is `Home`. But sometimes you may want to control the screen that should be shown upon navigation. To achieve it, you can pass the name of the screen in params:
 
 ```js
-navigation.navigate('Root', { screen: 'Profile' });
+navigation.navigate('MyDrawer', { screen: 'Profile' });
 ```
 
 Now, the `Profile` screen will be rendered instead of `Home` upon navigation.
 
-<summary>
-This may look very different from the way navigation used to work with nested screens previously. The difference is that in the previous versions, all configuration was static, so React Navigation could statically find the list of all the navigators and their screens by recursing into nested configurations. But with dynamic configuration, React Navigation doesn't know which screens are available and where until the navigator containing the screen renders. Normally, a screen doesn't render its contents until you navigate to it, so the configuration of navigators which haven't rendered is not yet available. This makes it necessary to specify the hierarchy you're navigating to. This is also why you should have as little nesting of navigators as possible to keep your code simpler.
-</summary>
-
 ### Passing params to a screen in a nested navigator
 
 You can also pass params by specifying a `params` key:
@@ -195,7 +280,7 @@ In the above case, you're navigating to the `Media` screen, which is in a naviga
 
 ### Rendering initial route defined in the navigator
 
-By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. This behaviour is different from the React Navigation 4.
+By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the `initialRouteName` prop on the navigator is ignored. This behaviour is different from the React Navigation 4.
 
 If you need to render the initial route specified in the navigator, you can disable the behaviour of using the specified screen as the initial screen by setting `initial: false`:
 
@@ -218,9 +303,44 @@ To achieve this, you can hide the header in the screen containing the navigator
 
 For example:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const Home = createBottomTabNavigator({
+  screens: {
+    Profile,
+    Settings,
+  },
+});
+
+const RootStack = createStackNavigator({
+  screens: {
+    Home: {
+      screen: Home,
+      options: {
+        headerShown: false,
+      },
+    },
+    EditPost,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
 <samp id="multiple-navigators" />
 
 ```js
+const Tab = createBottomTabNavigator();
+
 function Home() {
   return (
     <Tab.Navigator>
@@ -230,27 +350,71 @@ function Home() {
   );
 }
 
+const Stack = createStackNavigator();
+
+function RootStack() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen name="EditPost" component={EditPost} />
+    </Stack.Navigator>
+  );
+}
+
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={Home}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen name="EditPost" component={EditPost} />
-      </Stack.Navigator>
+      <RootStack />
     </NavigationContainer>
   );
 }
 ```
 
+</TabItem>
+</Tabs>
+
 In these examples, we have used a bottom tab navigator directly nested inside another stack navigator, but the same principle applies when there are other navigators in the middle, for example: stack navigator inside a tab navigator which is inside another stack navigator, stack navigator inside drawer navigator etc.
 
 If you don't want headers in any of the navigators, you can specify `headerShown: false` in all of the navigators:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
 ```js
+const Home = createBottomTabNavigator({
+  screens: {
+    Profile,
+    Settings,
+  },
+});
+
+const RootStack = createStackNavigator({
+  screenOptions: {
+    headerShown: false,
+  },
+  screens: {
+    Home,
+    EditPost,
+  },
+});
+
+const Navigation = createStaticNavigation(RootStack);
+
+function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+const Tab = createBottomTabNavigator();
+
 function Home() {
   return (
     <Tab.Navigator screenOptions={{ headerShown: false }}>
@@ -260,18 +424,29 @@ function Home() {
   );
 }
 
+const Stack = createStackNavigator();
+
+function RootStack() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="Home" component={Home} />
+      <Stack.Screen name="EditPost" component={EditPost} />
+    </Stack.Navigator>
+  );
+}
+
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="Home" component={Home} />
-        <Stack.Screen name="EditPost" component={EditPost} />
-      </Stack.Navigator>
+      <RootStack />
     </NavigationContainer>
   );
 }
 ```
 
+</TabItem>
+</Tabs>
+
 ## Best practices when nesting
 
 We recommend to reduce nesting navigators to minimal. Try to achieve the behavior you want with as little nesting as possible. Nesting has many downsides:
@@ -280,7 +455,49 @@ We recommend to reduce nesting navigators to minimal. Try to achieve the behavio
 - Nesting same type of navigators (e.g. tabs inside tabs, drawer inside drawer etc.) might lead to a confusing UX
 - With excessive nesting, code becomes difficult to follow when navigating to nested screens, configuring deep link etc.
 
-Think of nesting navigators as a way to achieve the UI you want rather than a way to organize your code. If you want to create separate group of screens for organization, instead of using separate navigators, you can use the [`Group`](group.md) component.
+Think of nesting navigators as a way to achieve the UI you want rather than a way to organize your code. If you want to create separate group of screens for organization, instead of using separate navigators, you can use the [`Group`](group.md) component for dynamic configuration or [`groups` property](static-api-reference.md#groups) for static configuration.
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createStackNavigator({
+  screens: {
+    // Common screens
+  },
+  groups: {
+    // Common modal screens
+    Modal: {
+      screenOptions: {
+        presentation: 'modal',
+      },
+      screens: {
+        Help,
+        Invite,
+      },
+    },
+    // Screens for logged in users
+    User: {
+      if: useIsLoggedIn,
+      screens: {
+        Home,
+        Profile,
+      },
+    },
+    // Auth screens
+    Guest: {
+      if: useIsGuest,
+      screens: {
+        SignIn,
+        SignUp,
+      },
+    },
+  }
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
 <samp id="nesting-best-practices" />
 
@@ -306,3 +523,6 @@ Think of nesting navigators as a way to achieve the UI you want rather than a wa
   </Stack.Group>
 </Stack.Navigator>
 ```
+
+</TabItem>
+</Tabs>
diff --git a/versioned_docs/version-7.x/params.md b/versioned_docs/version-7.x/params.md
index 2f36f840ccc..a5ad4ef18d2 100755
--- a/versioned_docs/version-7.x/params.md
+++ b/versioned_docs/version-7.x/params.md
@@ -4,14 +4,16 @@ title: Passing parameters to routes
 sidebar_label: Passing parameters to routes
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Remember when I said "more on that later when we talk about `params`!"? Well, the time has come.
 
-Now that we know how to [create a stack navigator with some routes](hello-react-navigation.md) and [navigate between those routes](navigating.md), let's look at how we can pass data to routes when we navigate to them.
+Now that we know how to create a stack navigator with some routes and [navigate between those routes](navigating.md), let's look at how we can pass data to routes when we navigate to them.
 
 There are two pieces to this:
 
 1. Pass params to a route by putting them in an object as a second parameter to the `navigation.navigate` function: `navigation.navigate('RouteName', { /* params go here */ })`
-
 2. Read the params in your screen component: `route.params`.
 
 :::note
@@ -23,7 +25,9 @@ We recommend that the params you pass are JSON-serializable. That way, you'll be
 <samp id="passing-params" />
 
 ```js
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
@@ -41,7 +45,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function DetailsScreen({ route, navigation }) {
+function DetailsScreen({ route }) {
+  const navigation = useNavigation();
+
   /* 2. Get the param */
   const { itemId, otherParam } = route.params;
   return (
@@ -68,7 +74,22 @@ function DetailsScreen({ route, navigation }) {
 
 ## Initial params
 
-You can also pass some initial params to a screen. If you didn't specify any params when navigating to this screen, the initial params will be used. They are also shallow merged with any params that you pass. Initial params can be specified with an `initialParams` prop:
+You can also pass some initial params to a screen. If you didn't specify any params when navigating to this screen, the initial params will be used. They are also shallow merged with any params that you pass. Initial params can be specified in `initialParams`:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+{
+  Details: {
+    screen: DetailsScreen,
+    initialParams: { itemId: 42 },
+  },
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
 <samp id="initial-params" />
 
@@ -80,9 +101,12 @@ You can also pass some initial params to a screen. If you didn't specify any par
 />
 ```
 
+</TabItem>
+</Tabs>
+
 ## Updating params
 
-Screens can also update their params, like they can update their state. The `navigation.setParams` method lets you update the params of a screen. Refer to the [API reference for `setParams`](navigation-prop.md#setparams) for more details.
+Screens can also update their params, like they can update their state. The `navigation.setParams` method lets you update the params of a screen. Refer to the [API reference for `setParams`](navigation-object.md#setparams) for more details.
 
 Basic usage:
 
@@ -96,7 +120,7 @@ navigation.setParams({
 
 :::note
 
-Avoid using `setParams` to update screen options such as `title` etc. If you need to update options, use [`setOptions`](navigation-prop.md#setoptions) instead.
+Avoid using `setParams` to update screen options such as `title` etc. If you need to update options, use [`setOptions`](navigation-object.md#setoptions) instead.
 
 :::
 
@@ -109,7 +133,9 @@ To achieve this, you can use the `navigate` method, which acts like `goBack` if
 <samp id="passing-params-back" />
 
 ```js
-function HomeScreen({ navigation, route }) {
+function HomeScreen({ route }) {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     if (route.params?.post) {
       // Post updated, do something with `route.params.post`
@@ -128,7 +154,8 @@ function HomeScreen({ navigation, route }) {
   );
 }
 
-function CreatePostScreen({ navigation, route }) {
+function CreatePostScreen({ route }) {
+  const navigation = useNavigation();
   const [postText, setPostText] = React.useState('');
 
   return (
diff --git a/versioned_docs/version-7.x/route-prop.md b/versioned_docs/version-7.x/route-object.md
similarity index 76%
rename from versioned_docs/version-7.x/route-prop.md
rename to versioned_docs/version-7.x/route-object.md
index fdf0d56d4a7..31c8d79ecc0 100755
--- a/versioned_docs/version-7.x/route-prop.md
+++ b/versioned_docs/version-7.x/route-object.md
@@ -1,10 +1,10 @@
 ---
-id: route-prop
-title: Route prop reference
-sidebar_label: Route prop
+id: route-object
+title: Route object reference
+sidebar_label: Route object
 ---
 
-Each `screen` component in your app is provided with the `route` prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).
+Each `screen` component in your app is provided with the `route` object as a prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).
 
 - `route`
   - `key` - Unique key of the screen. Created automatically or added while navigating to this screen.
diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md
index 59d46c2db70..349ffe89c2a 100644
--- a/versioned_docs/version-7.x/screen-options.md
+++ b/versioned_docs/version-7.x/screen-options.md
@@ -31,7 +31,7 @@ You can pass a prop named `options` to the `Screen` component to configure a scr
 </Stack.Navigator>
 ```
 
-You can also pass a function to `options`. The function will receive the [`navigation` prop](navigation-prop.md) and the [`route` prop](route-prop.md) for that screen. This can be useful if you want to perform navigation in your options:
+You can also pass a function to `options`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for that screen. This can be useful if you want to perform navigation in your options:
 
 ```js
 <Stack.Screen
@@ -69,7 +69,7 @@ Example:
 </Stack.Navigator>
 ```
 
-Similar to `options`, you can also pass a function to `screenOptions`. The function will receive the [`navigation` prop](navigation-prop.md) and the [`route` prop](route-prop.md) for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:
+Similar to `options`, you can also pass a function to `screenOptions`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:
 
 ```js
 <Stack.Navigator>
@@ -102,7 +102,7 @@ Example:
 </Stack.Navigator>
 ```
 
-Similar to `options`, you can also pass a function to `screenOptions`. The function will receive the [`navigation` prop](navigation-prop.md) and the [`route` prop](route-prop.md) for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:
+Similar to `options`, you can also pass a function to `screenOptions`. The function will receive the [`navigation` object](navigation-object.md) and the [`route` object](route-object.md) for each screen. This can be useful if you want to configure options for all the screens in one place based on the route:
 
 <samp id="screen-options-navigator" />
 
@@ -132,7 +132,7 @@ Similar to `options`, you can also pass a function to `screenOptions`. The funct
 
 ### `navigation.setOptions` method
 
-The `navigation` prop has a `setOptions` method that lets you update the options for a screen from within a component. See [navigation prop's docs](navigation-prop.md#setoptions) for more details.
+The `navigation` object has a `setOptions` method that lets you update the options for a screen from within a component. See [navigation object's docs](navigation-object.md#setoptions) for more details.
 
 ```js
 <Button
diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md
index b383cf6942c..e1e7d07f51c 100644
--- a/versioned_docs/version-7.x/screen.md
+++ b/versioned_docs/version-7.x/screen.md
@@ -39,7 +39,7 @@ This name is used to navigate to the screen:
 navigation.navigate('Profile');
 ```
 
-It is also used for the `name` property in the [`route`](route-prop.md).
+It is also used for the `name` property in the [`route`](route-object.md).
 
 While it is supported, we recommend to avoid spaces or special characters in screen names and keep them simple.
 
@@ -57,7 +57,7 @@ Options to configure how the screen gets presented in the navigator. It accepts
 />
 ```
 
-When you pass a function, it'll receive the [`route`](route-prop.md) and [`navigation`](navigation-prop.md):
+When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
 
 ```js
 <Stack.Screen
diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md
index a2ba87c3329..63ac30c0148 100755
--- a/versioned_docs/version-7.x/stack-navigator.md
+++ b/versioned_docs/version-7.x/stack-navigator.md
@@ -101,7 +101,7 @@ The `Stack.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -453,7 +453,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The stack navigator adds the following methods to the navigation prop:
+The stack navigator adds the following methods to the navigation object:
 
 #### `replace`
 
diff --git a/versioned_docs/version-7.x/static-api-reference.md b/versioned_docs/version-7.x/static-api-reference.md
index 342fcf3856f..e297650eb8b 100644
--- a/versioned_docs/version-7.x/static-api-reference.md
+++ b/versioned_docs/version-7.x/static-api-reference.md
@@ -136,7 +136,7 @@ const RootStack = createNativeStackNavigator({
 });
 ```
 
-The screen components defined with the static configuration receive the [`route`](route-prop.md) prop. Unlike the dynamic API, the `navigation` object must be accessed via the [`useNavigation`](use-navigation.md) hook.
+The screen components defined with the static configuration receive the [`route`](route-object.md) prop. Unlike the dynamic API, they don't get the `navigation` object as prop and it must be accessed via the [`useNavigation`](use-navigation.md) hook.
 
 #### `linking`
 
@@ -225,7 +225,7 @@ const RootStack = createNativeStackNavigator({
 });
 ```
 
-When you pass a function, it'll receive the [`route`](route-prop.md) and [`navigation`](navigation-prop.md):
+When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
 
 ```js
 const RootStack = createNativeStackNavigator({
diff --git a/versioned_docs/version-7.x/static-configuration.md b/versioned_docs/version-7.x/static-configuration.md
deleted file mode 100644
index 0d2b0858d14..00000000000
--- a/versioned_docs/version-7.x/static-configuration.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-id: static-configuration
-title: Getting started with static API
-sidebar_label: Getting started
----
-
-React Navigation primarily uses a dynamic component based API. This provides a lot of flexibility, however there are a few drawbacks:
-
-- The TypeScript types need to be configured manually, which can get verbose and overwhelming.
-- Deep linking needs to be configured separately to match the structure of navigation tree, which can be error prone.
-- The component API can be a bit more verbose than necessary.
-
-To address these drawbacks, there's also a static API to configure the navigation tree that trades flexibility for convenience. This API is built into React Navigation, so you don't need to install any additional packages.
-
-## Basic usage
-
-The same principles apply to the static API as the dynamic API. We have navigators that can contain multiple screens.
-
-```js
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { createStaticNavigation } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
-function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-    </View>
-  );
-}
-
-const RootStack = createNativeStackNavigator({
-  screens: {
-    Home: HomeScreen,
-  },
-});
-
-const Navigation = createStaticNavigation(RootStack);
-
-function App() {
-  return <Navigation />;
-}
-
-export default App;
-```
-
-Let's look at the code above in detail. You can also check the equivalent dynamic API to get a better understanding.
-
-1. To define a navigator, we use the `createXNavigator` function (in this case `createNativeStackNavigator`) and pass it an object with a property called `screens`, which is an object containing configuration for screens - the name of the screen is the key and the value is the component to render:
-
-   ```js
-   const RootStack = createNativeStackNavigator({
-     screens: {
-       Home: HomeScreen,
-     },
-   });
-   ```
-
-  <details>
-  <summary>Equivalent dynamic API</summary>
-
-   ```js
-   const Stack = createNativeStackNavigator();
-
-   function RootStack() {
-     return (
-       <Stack.Navigator>
-         <Stack.Screen name="Home" component={HomeScreen} />
-       </Stack.Navigator>
-     );
-   }
-   ```
-
-  </details>
-
-1. After defining the navigator, we use it with the `createStaticNavigation` function to create a component to render:
-
-   ```js
-   const Navigation = createStaticNavigation(RootStack);
-
-   function App() {
-     return <Navigation />;
-   }
-   ```
-
-  <details>
-  <summary>Equivalent dynamic API</summary>
-
-   ```js
-   function App() {
-     return (
-       <NavigationContainer>
-         <RootStack />
-       </NavigationContainer>
-     );
-   }
-   ```
-
-  </details>
-
-   The component returned by `createStaticNavigation` is similar to the `NavigationContainer` and accepts the [same props](navigation-container.md#props). See [Static API Reference](static-api-reference.md#createstaticnavigation) for more details.
-
-1. If you're using TypeScript, there's one last step to do to for automatic type-checking when using `useNavigation`:
-
-   ```js
-   type RootStackParamList = StaticParamList<typeof RootStack>;
-
-   declare global {
-     namespace ReactNavigation {
-       interface RootParamList extends RootStackParamList {}
-     }
-   }
-   ```
-
-   See [Configuring TypeScript](static-typescript.md) for more details.
-
-For more details on the static API, see [Static API Reference](static-api-reference.md).
-
-## Nested navigators
-
-To nest a navigator, a navigator defined using the static API can be passed as the value for a screen:
-
-```js
-const HomeTabs = createBottomTabNavigator({
-  screens: {
-    Groups: GroupsScreen,
-    Chats: ChatsScreen,
-  },
-});
-
-const RootStack = createNativeStackNavigator({
-  screens: {
-    Home: HomeTabs,
-  },
-});
-```
-
-<details>
-<summary>Equivalent dynamic API</summary>
-
-```js
-const Tab = createBottomTabNavigator();
-
-function HomeTabs() {
-  return (
-    <Tab.Navigator>
-      <Tab.Screen name="Groups" component={GroupsScreen} />
-      <Tab.Screen name="Chats" component={ChatsScreen} />
-    </Tab.Navigator>
-  );
-}
-
-const Stack = createNativeStackNavigator();
-
-function RootStack() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen name="Home" component={HomeTabs} />
-    </Stack.Navigator>
-  );
-}
-```
-
-</details>
-
-There are a couple of things to keep in mind when nesting navigators with the static API:
-
-1. With the dynamic API, the navigator component is a regular component and there's no restriction on how it's structured. As long as it has a navigator rendered somewhere in the tree, it will work for the nested navigation. With the static configuration, you must pass the object returned by another static navigator.
-2. You can use a component defined using the dynamic API as the value for a screen in the static API. However, automatic linking configuration and automatic TypeScript types won't work for the screen.
-
-Mixing the static and dynamic APIs is possible, however, in those cases you'll lose the benefits of the static API. See [Combining static and dynamic APIs](static-combine-with-dynamic.md) for more details on some cases where you could mix the two APIs.
-
-## Limitations
-
-The static API is a convenience wrapper around the dynamic API, not a full-replacement. It's not suitable for all use cases. It's important to keep the limitations in mind when using the static API:
-
-- The navigation tree is static with the static API, i.e. the configuration can't be changed dynamically (e.g. updating list of screens or options based on external data).
-- The static configuration doesn't have access to context or props, so you can't use them in options, listeners etc. specified in the static configuration.
-
-The dynamic API is still the primary API and isn't going away. So we recommend to avoid rewriting your app to use the static API if you have type-checking and deep linking setup already. Instead, consider using the static API in new projects where you know you won't need to change the configuration dynamically.
diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md
index 0d4a2162af1..87811b66434 100755
--- a/versioned_docs/version-7.x/typescript.md
+++ b/versioned_docs/version-7.x/typescript.md
@@ -60,7 +60,7 @@ The type containing the mappings must be a type alias (e.g. `type RootStackParam
 
 ### Type checking screens
 
-To type check our screens, we need to annotate the `navigation` prop and the `route` prop received by a screen. The navigator packages in React Navigation export a generic types to define types for both the `navigation` and `route` props from the corresponding navigator.
+To type check our screens, we need to annotate the `navigation` and the `route` props received by a screen. The navigator packages in React Navigation export generic types to define types for both the `navigation` and `route` props from the corresponding navigator.
 
 For example, you can use `NativeStackScreenProps` for the Native Stack Navigator.
 
@@ -120,7 +120,7 @@ type ProfileScreenNavigationProp = Props['navigation'];
 type ProfileScreenRouteProp = Props['route'];
 ```
 
-Alternatively, you can also annotate the `navigation` and `route` props separately.
+Alternatively, you can also annotate the `navigation` and `route` objects separately.
 
 To get the type for the `navigation` prop, we need to import the corresponding type from the navigator. For example, `NativeStackNavigationProp` for `@react-navigation/native-stack`:
 
@@ -135,7 +135,7 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp<
 
 Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc.
 
-To get the type for the `route` prop, we need to use the `RouteProp` type from `@react-navigation/native`:
+To get the type for the `route` object, we need to use the `RouteProp` type from `@react-navigation/native`:
 
 ```tsx
 import type { RouteProp } from '@react-navigation/native';
@@ -220,7 +220,7 @@ Prefer [specifying a default type](#specifying-default-types-for-usenavigation-l
 
 :::
 
-To annotate the `navigation` prop that we get from `useNavigation`, we can use a type parameter:
+To annotate the `navigation` object that we get from `useNavigation`, we can use a type parameter:
 
 ```ts
 const navigation = useNavigation<ProfileScreenNavigationProp>();
@@ -231,11 +231,11 @@ const navigation = useNavigation<ProfileScreenNavigationProp>();
 :::danger
 
 Annotating `useRoute` isn't type-safe because the type parameter cannot be statically verified.
-Prefer using the [`route` prop](route-prop.md) instead when possible. Use `useRoute` for generic code that doesn't need specific route type.
+Prefer using the [`route` object](route-object.md) from the screen component's props instead when possible. Use `useRoute` for generic code that doesn't need specific route type.
 
 :::
 
-To annotate the `route` prop that we get from `useRoute`, we can use a type parameter:
+To annotate the `route` object that we get from `useRoute`, we can use a type parameter:
 
 ```ts
 const route = useRoute<ProfileScreenRouteProp>();
@@ -257,7 +257,7 @@ const options: StackNavigationOptions = {
 
 Similarly, you can import `DrawerNavigationOptions` from `@react-navigation/drawer`, `BottomTabNavigationOptions` from `@react-navigation/bottom-tabs` etc.
 
-When using the function form of `options` and `screenOptions`, you can annotate the arguments with the same type you used to annotate the `navigation` and `route` props.
+When using the function form of `options` and `screenOptions`, you can annotate the arguments with the same type you used to annotate the `navigation` and `route` objects from the [Type checking screens](#type-checking-screens) section.
 
 ### Annotating `ref` on `NavigationContainer`
 
diff --git a/versioned_docs/version-7.x/use-link-builder.md b/versioned_docs/version-7.x/use-link-builder.md
index f040e13433a..aab2334701a 100644
--- a/versioned_docs/version-7.x/use-link-builder.md
+++ b/versioned_docs/version-7.x/use-link-builder.md
@@ -42,7 +42,7 @@ There are couple of important things to note:
 
 ## `buildAction`
 
-The `buildAction` method lets us parse a `href` string into an action object that can be used with [`navigation.dispatch`](navigation-prop.md#dispatch) to navigate to the relevant screen.
+The `buildAction` method lets us parse a `href` string into an action object that can be used with [`navigation.dispatch`](navigation-object.md#dispatch) to navigate to the relevant screen.
 
 ```js
 import { Link, CommonActions, useLinkBuilder } from '@react-navigation/native';
diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md
index e1c4e01425b..07d0cfff595 100755
--- a/versioned_docs/version-7.x/use-navigation.md
+++ b/versioned_docs/version-7.x/use-navigation.md
@@ -4,11 +4,9 @@ title: useNavigation
 sidebar_label: useNavigation
 ---
 
-`useNavigation` is a hook which gives access to `navigation` object. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
+`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.
 
-`useNavigation()` returns the `navigation` prop of the screen it's inside.
-
-## Example
+The `useNavigation` hook returns the `navigation` object of the screen where it's used:
 
 <samp id="use-navigation-example" />
 
@@ -31,7 +29,7 @@ function MyBackButton() {
 }
 ```
 
-See the documentation for the [`navigation` prop](navigation-prop.md) for more info.
+See the documentation for the [`navigation` object](navigation-object.md) for more info.
 
 ## Using with class component
 
diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md
index 1539f343bec..0b5d74891af 100755
--- a/versioned_docs/version-7.x/use-route.md
+++ b/versioned_docs/version-7.x/use-route.md
@@ -4,9 +4,9 @@ title: useRoute
 sidebar_label: useRoute
 ---
 
-`useRoute` is a hook which gives access to `route` object. It's useful when you cannot pass the `route` prop into the component directly, or don't want to pass it in case of a deeply nested child.
+`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` prop of the screen it's inside.
+`useRoute()` returns the `route` object of the screen it's inside.
 
 ## Example
 
@@ -24,7 +24,7 @@ function MyText() {
 }
 ```
 
-See the documentation for the [`route` prop](route-prop.md) for more info.
+See the documentation for the [`route` object](route-object.md) for more info.
 
 ## Using with class component
 
diff --git a/versioned_sidebars/version-7.x-sidebars.json b/versioned_sidebars/version-7.x-sidebars.json
index 64e3a3baaa7..ca65458cbc5 100644
--- a/versioned_sidebars/version-7.x-sidebars.json
+++ b/versioned_sidebars/version-7.x-sidebars.json
@@ -9,10 +9,7 @@
       "header-buttons",
       "nesting-navigators",
       "navigation-lifecycle",
-      "next-steps",
-      "glossary-of-terms",
-      "troubleshooting",
-      "limitations"
+      "next-steps"
     ],
     "Guides": [
       "tab-based-navigation",
@@ -28,7 +25,6 @@
       "shared-element-transitions",
       "preventing-going-back",
       "function-after-focusing-screen",
-      "connecting-navigation-prop",
       "navigating-without-navigation-prop",
       "deep-linking",
       "configuring-links",
@@ -41,10 +37,10 @@
       "typescript",
       "redux-integration",
       "MST-integration",
+      "troubleshooting",
       "upgrading-from-6.x"
     ],
     "Static configuration": [
-      "static-configuration",
       "static-api-reference",
       "static-typescript",
       "static-authentication",
@@ -69,8 +65,8 @@
       "group",
       "screen",
       "screen-options",
-      "route-prop",
-      "navigation-prop",
+      "route-object",
+      "navigation-object",
       "navigation-context",
       "navigation-events",
       "navigation-state",
@@ -112,7 +108,9 @@
       "more-resources"
     ],
     "Meta": [
+      "glossary-of-terms",
       "pitch",
+      "limitations",
       "used-by",
       "contributing"
     ]