How to pass params to tab navigator React Navigation 5?

To pass params to tab navigator React Navigation 5, we create a context and set put the value we want in the context.

Then any component inside the context provider can access the value.

For instance, we write

export const NetworkContext = React.createContext();

to create the NetworkContext and export it.

Then we write

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

to create the PostsTabNav with createMaterialTopTabNavigator.

And then we wrap NetworkContext.Provider around the PostsTabNav components and set the context value to route.params.network.

Then the PostsTabNav components can access route.params.network with the context.