Passing params to tab navigator React Navigation 5

Pass params to the navigator and then expose it to the tabs using React Context.

Create a context in a separate file which you can import in both your navigator and screens:

export const NetworkContext = React.createContext();

Then provide the params in the context:

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
        <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

In your screen component, use the context:

const network = React.useContext(NetworkContext);

Also see https://reactnavigation.org/docs/hello-react-navigation#passing-additional-props


You can set initial params to your screens.

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>
    );
};