Document passing additional data with static config

Author: satya164

versioned_docs/version-7.x/hello-react-navigation.md

@@ -245,7 +245,7 @@ Now our stack has two _routes_, a `Home` route and a `Details` route. A route ca
 
 :::warning
 
-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.
+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 data](#passing-additional-data) for alternatives.
 
 :::
 
@@ -493,19 +493,72 @@ export default function App() {
 </TabItem>
 </Tabs>
 
-## Passing additional props
+## Passing additional data
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-Passing additional props to a screen is not supported in the static API.
+To pass additional data to a screen, use `.with` to wrap the navigator with [React context](https://react.dev/reference/react/useContext) to pass data to the screens:
+
+```js
+// highlight-next-line
+const ExtraDataContext = React.createContext();
+
+function HomeScreen() {
+  // highlight-next-line
+  const extraData = React.useContext(ExtraDataContext);
+
+  return <Text>{extraData}</Text>;
+}
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: createNativeStackScreen({
+      screen: HomeScreen,
+    }),
+  },
+}).with(({ Navigator }) => {
+  return (
+    // highlight-next-line
+    <ExtraDataContext.Provider value={someData}>
+      <Navigator />
+    </ExtraDataContext.Provider>
+  );
+});
+```
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-We can pass additional props to a screen with 2 approaches:
+We can pass additional data to a screen with 2 approaches:
+
+1. [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended):
+
+   ```js
+   // highlight-next-line
+   const ExtraDataContext = React.createContext();
+
+   function HomeScreen() {
+     // highlight-next-line
+     const extraData = React.useContext(ExtraDataContext);
+
+     return <Text>{extraData}</Text>;
+   }
+
+   const Stack = createNativeStackNavigator();
+
+   function RootStack() {
+     return (
+       // highlight-next-line
+       <ExtraDataContext.Provider value={someData}>
+         <Stack.Navigator>
+           <Stack.Screen name="Home" component={HomeScreen} />
+         </Stack.Navigator>
+       </ExtraDataContext.Provider>
+     );
+   }
+   ```
 
-1. [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
 2. Render callback for the screen instead of specifying a `component` prop:
 
    ```js
@@ -545,6 +598,7 @@ If you are using TypeScript, you will need to specify the types accordingly. You
 - 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`](navigator.md#initial-route-name) option for the navigator.
 - To specify screen-specific options, we can specify an [`options`](screen-options.md#options-prop-on-screen) property, and for common options, we can specify [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator).
+- To pass additional data to a screen, we can use React context and use `.with` to wrap the navigator with a context provider to pass data to the screens.
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
@@ -554,6 +608,7 @@ If you are using TypeScript, you will need to specify the types accordingly. You
 - Each [`Stack.Screen`](screen.md) component takes a [`name`](screen.md#name) prop which refers to the name of the route and [`component`](screen.md#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`](navigator.md#initial-route-name) as the prop for the navigator.
 - To specify screen-specific options, we can pass an [`options`](screen-options.md#options-prop-on-screen) prop to `Stack.Screen`, and for common options, we can pass [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator) to `Stack.Navigator`.
+- To pass additional data to a screen, we can either use React context and wrap the navigator with a context provider to pass data to the screens (recommended), or we can use a render callback for the screen instead of specifying a `component` prop.
 
 </TabItem>
 </Tabs>

versioned_docs/version-7.x/troubleshooting.md

@@ -259,7 +259,7 @@ Example of some use cases for passing functions in params are the following:
 - To pass a callback to use in a header button. This can be achieved using `navigation.setOptions` instead. See the [guide for header buttons](header-buttons.md#header-interaction-with-its-screen-component) for examples.
 - To pass a callback to the next screen which it can call to pass some data back. You can usually achieve it using `popTo` instead. See [passing params to a previous screen](params.md#passing-params-to-a-previous-screen) for examples.
 - To pass complex data to another screen. Instead of passing the data `params`, you can store that complex data somewhere else (like a global store), and pass an id instead. Then the screen can get the data from the global store using the id. See [what should be in params](params.md#what-should-be-in-params).
-- Pass data, callbacks etc. from a parent to child screens. You can either use React Context, or pass a children callback to pass these down instead of using params. See [passing additional props](hello-react-navigation.md#passing-additional-props).
+- Pass data, callbacks etc. from a parent to child screens. You can either use React Context, or pass a children callback to pass these down instead of using params. See [passing additional data](hello-react-navigation.md#passing-additional-data).
 
 We don't generally recommend passing functions in params. But if you don't use state persistence, deep links, or use React Navigation on Web, then you can choose to ignore it. To ignore the warning, you can use `LogBox.ignoreLogs`.
 

versioned_docs/version-8.x/hello-react-navigation.md

@@ -255,19 +255,72 @@ export default function App() {
 }
 ```
 
-## Passing additional props
+## Passing additional data
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-Passing additional props to a screen is not supported in the static API.
+To pass additional data to a screen, use `.with` to wrap the navigator with [React context](https://react.dev/reference/react/useContext) to pass data to the screens:
+
+```js
+// highlight-next-line
+const ExtraDataContext = React.createContext();
+
+function HomeScreen() {
+  // highlight-next-line
+  const extraData = React.useContext(ExtraDataContext);
+
+  return <Text>{extraData}</Text>;
+}
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: createNativeStackScreen({
+      screen: HomeScreen,
+    }),
+  },
+}).with(({ Navigator }) => {
+  return (
+    // highlight-next-line
+    <ExtraDataContext.Provider value={someData}>
+      <Navigator />
+    </ExtraDataContext.Provider>
+  );
+});
+```
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-We can pass additional props to a screen with 2 approaches:
+We can pass additional data to a screen with 2 approaches:
+
+1. [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended):
+
+   ```js
+   // highlight-next-line
+   const ExtraDataContext = React.createContext();
+
+   function HomeScreen() {
+     // highlight-next-line
+     const extraData = React.useContext(ExtraDataContext);
+
+     return <Text>{extraData}</Text>;
+   }
+
+   const Stack = createNativeStackNavigator();
+
+   function RootStack() {
+     return (
+       // highlight-next-line
+       <ExtraDataContext.Provider value={someData}>
+         <Stack.Navigator>
+           <Stack.Screen name="Home" component={HomeScreen} />
+         </Stack.Navigator>
+       </ExtraDataContext.Provider>
+     );
+   }
+   ```
 
-1. [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
 2. Render callback for the screen instead of specifying a `component` prop:
 
    ```js
@@ -316,6 +369,7 @@ Now that we have two screens, "How do we navigate from `Home` to `Details`?". Th
 - 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`](navigator.md#initial-route-name) option for the navigator.
 - To specify screen-specific options, we can specify an [`options`](screen-options.md#options-prop-on-screen) property, and for common options, we can specify [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator).
+- To pass additional data to a screen, we can use React context and use `.with` to wrap the navigator with a context provider to pass data to the screens.
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
@@ -325,6 +379,7 @@ Now that we have two screens, "How do we navigate from `Home` to `Details`?". Th
 - Each [`Stack.Screen`](screen.md) component takes a [`name`](screen.md#name) prop which refers to the name of the route and [`component`](screen.md#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`](navigator.md#initial-route-name) as the prop for the navigator.
 - To specify screen-specific options, we can pass an [`options`](screen-options.md#options-prop-on-screen) prop to `Stack.Screen`, and for common options, we can pass [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator) to `Stack.Navigator`.
+- To pass additional data to a screen, we can either use React context and wrap the navigator with a context provider to pass data to the screens (recommended), or we can use a render callback for the screen instead of specifying a `component` prop.
 
 </TabItem>
 </Tabs>

versioned_docs/version-8.x/troubleshooting.md

@@ -259,7 +259,7 @@ Example of some use cases for passing functions in params are the following:
 - To pass a callback to use in a header button. This can be achieved using `navigation.setOptions` instead. See the [guide for header buttons](header-buttons.md#header-interaction-with-its-screen-component) for examples.
 - To pass a callback to the next screen which it can call to pass some data back. You can usually achieve it using `popTo` instead. See [passing params to a previous screen](params.md#passing-params-to-a-previous-screen) for examples.
 - To pass complex data to another screen. Instead of passing the data `params`, you can store that complex data somewhere else (like a global store), and pass an id instead. Then the screen can get the data from the global store using the id. See [what should be in params](params.md#what-should-be-in-params).
-- Pass data, callbacks etc. from a parent to child screens. You can either use React Context, or pass a children callback to pass these down instead of using params. See [passing additional props](hello-react-navigation.md#passing-additional-props).
+- Pass data, callbacks etc. from a parent to child screens. You can either use React Context, or pass a children callback to pass these down instead of using params. See [passing additional data](hello-react-navigation.md#passing-additional-data).
 
 We don't generally recommend passing functions in params. But if you don't use state persistence, deep links, or use React Navigation on Web, then you can choose to ignore it. To ignore the warning, you can use `LogBox.ignoreLogs`.