React Navigation v6: best way to pass additional props to screen?

Question

In the docs for React Navigation v6, in the Passing Additional Props section it says Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches and the first approach it recommends is React Context. I've never used React Context, but the link says it's out of date. Is there a more up-to-date alternative to React Context? The other option it suggests is: Use a render callback for the screen instead of specifying a component prop.

Basically I want to do:

<Tab.Navigator>
  <Tab.Screen prop1={prop1}>
</Tab.Navigator>

but I know you can't pass prop1 this way.

score 1 · Answer 1 · edited Jul 11 '23 at 12:16

Basically I want to do:
<Tab.Navigator>
  <Tab.Screen prop1={prop1}>
</Tab.Navigator>
but I know you can't pass prop1 this way.

You can achieve what you're looking to do by passing the component you'd like to render as a child of Tab.Screen, as shown below:

<Tab.Navigator>
  <Tab.Screen name='some name'>
    {(props) => <YourReactComponentHere {...props} prop1={prop1} />}
  </Tab.Screen>
</Tab.Navigator>

as shown in the React navigation documentation you linked. At some point, I ran into issues with that approach that I resolved by just explicitly passing a "children" prop (I couldn't tell you why this mattered, and may have just been a syntax issue on my part), but most linters will yell at you for that. If you're curious though, that looks like this:

<Tab.Navigator>
  <Tab.Screen
    name='some name'
    children={(props) => <YourReactComponentHere {...props} prop1={prop1} />}
  />
</Tab.Navigator>

One of the above should work for you, but as mentioned in the documentation, using context is the preferred method.

I've never used React Context, but the link says it's out of date. Is there a more up-to-date alternative to React Context?

If you've never used Context, it's a great skill to pick up! You can think of it like a globally scoped state that you can access from within any of your components. Here's a link to the new react documentation on context:

Passing Data Deeply with Context

You can also use route parameters as Harsh mentioned. But, I typically reserve route parameters for passing information about how I'm navigating to the desired screen.

score -2 · Answer 2 · edited Jun 01 '23 at 03:42

New documentation for React Context: useContext, Passing Data Deeply with Context. Please read React Navigation Passing parameters to routes and Initial params If you use @react-navigation/bottom-tabs for passing props directly you can use this way:

Define your screen component:

    import React from 'react';
    import { Text } from 'react-native';
    
    const MyScreen = ({ route }) => {
      const { additionalProp } = route.params;
    
      return <Text>Additional Prop: {additionalProp}</Text>;
    };
    
    export default MyScreen;

In your navigation configuration file, define the tabs using createBottomTabNavigator or createMaterialBottomTabNavigator:

    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import MyScreen from './MyScreen';
    
    const Tab = createBottomTabNavigator();
    
    const MyTabs = () => {
      return (
        <Tab.Navigator>
          <Tab.Screen
            name="MyScreen"
            component={MyScreen}
            initialParams={{ additionalProp: 'Hello, World!' }} // Set initialParams with additional props
            options={({ route }) => ({
              title: 'My Screen',
              additionalProp: route.params?.additionalProp, // Access additional props from route.params
            })}
          />
        </Tab.Navigator>
      );
    };
    
    export default MyTabs;

In this example, the MyScreen component receives the additional props via the route.params object, similar to the previous example. You can set the initial params for the screen using the initialParams property. This sets the initial values of the additional props.

To access the additional props, you can use the options property of Tab.Screen and access route.params?.additionalProp within the options function. The route.params?.additionalProp expression ensures that the additionalProp is accessed safely even if it's not available. By following this approach, you can pass additional props to screens within tabs in React Navigation v6 and access them within the screen component.

This answer looks like ChatGPT – DavidW Jul 10 '23 at 18:58 — DavidW, Jul 10 '23 at 18:58

React Navigation v6: best way to pass additional props to screen?

2 Answers2