'How to pass props to a screen component in react navigation

I have a navigator that looks like this and I'm trying to pass informations to all the tabs below it.


import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';


const Tab = createMaterialTopTabNavigator();

      <Tab.Navigator
        swipeEnabled={false}
        initialRouteName="TabMapScreen"
        screenProps={user} // I've tried this
        initialLayout={{width: Dimensions.get('window').width}}
      >
        <Tab.Screen
          name="TabMapScreen"
          component={PostsTab}
        />
        <Tab.Screen
          name="TabMapScreen"
          component={() => <PostsTab props={user} />} // also tried this
        />
      </Tab.Navigator>

what's the correct solution to passing props to a screen, straight from the navigator?

react-native react-navigation

Solution 1:^[1]

You can use the initialParams

     <Tab.Screen
          name="TabMapScreen"
          component={PostsTab}
          initialParams={{userData: user}} //User data is just an alias
        />

Solution 2:^[2]

There are a lot ways to pass params through screen, learn a little bit more about on this linkcontext api

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	sr007
Solution 2	Leonardo Cezar dos Santos

'How to pass props to a screen component in react navigation

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]