How to Pass Params to Tab Navigator in React Navigation 5

Passing Parameters to Tab Navigator in React Navigation 5

If you are using the materialTopTabs in React Navigation 5, you may have encountered the issue of passing parameters to multiple screens within the tab navigator. By default, it seems like all the screens in the navigator are loaded once it is mounted, making it challenging to pass different parameters to each screen. However, there are a few approaches you can take to overcome this limitation and efficiently pass params to your desired screens.

Approach 1: Using React Context

To pass parameters to your tab navigator screens, you can make use of React Context. First, create a separate file and define a context using React.createContext(). This context will allow you to share the parameters between the navigator and the screens.

<script type="text/babel">
  import React from 'react';

  export const NetworkContext = React.createContext();
</script>

Next, provide the params in the context by wrapping your tab navigator component with the <NetworkContext.Provider> component. Pass the required params through the route.params object.

<script type="text/babel">
  import { NetworkContext } from './context';

  const PostsTabNav = createMaterialTopTabNavigator();

  const PostsMainNav = ({ route }) => {
    return (
      <NetworkContext.Provider value={route.params.network}>
        <PostsTabNav.Navigator>
          ...
        </PostsTabNav.Navigator>
      </NetworkContext.Provider>
    );
  };
</script>

Inside your screen components, you can now consume the provided context to access the params.

<script type="text/babel">
  import React from 'react';
  import { NetworkContext } from './context';

  const NetworkPostsScreen = () => {
    const network = React.useContext(NetworkContext);

    // Use the network parameter as required
  
    ...
  };
</script>

This approach allows you to pass and access the required parameters within your tab navigator screens.

Approach 2: Setting Initial Params

Another approach to passing params to your tab navigator screens is by setting initial parameters. You can achieve this by passing the params through the initialParams prop of each screen component within the tab navigator.

<script type="text/babel">
  const PostsTabNav = createMaterialTopTabNavigator();

  const PostsMainNav = (props) => {
    const temp = props.route.params.network;
    return (
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen
          name="NetworkPosts"
          component={NetworkPostsScreen}
          initialParams={{ network: temp }}
        />
        <PostsTabNav.Screen
          name="NetworkUsers"
          component={NetworkUsersScreen}
          initialParams={{ network: temp }}
        />
        ...
      </PostsTabNav.Navigator>
    );
  };
</script>

By setting the initial parameters in this way, each screen within the tab navigator will receive the required params, allowing you to access them accordingly.

Conclusion

In this blog post, we explored two different approaches to pass parameters to screens within a tab navigator using React Navigation 5. By utilizing React Context or setting initial parameters, you can efficiently pass and access the required params for each screen. Choose the approach that best suits your needs and enhances the functionality of your React Navigation app.

For further details and more advanced scenarios, refer to the official React Navigation documentation on passing additional props.

reference : 

reactjs