CODEWITHSUNDEEP
react-nativereact-navigation
Mel
Mel

Reputation: 715

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?

Upvotes: 6

Views: 15352

Answers (4)

TheSnydaMan
TheSnydaMan

Reputation: 9

Another solution that is more of a "different approach" is to use context and provide the values you need via context instead of being passed down from your navigator. In some cases, I think this may even be a better practice.

Upvotes: 0

TOPKAT
TOPKAT

Reputation: 8698

There is two ways to do so:

Route params

This is if you need to change the props/parameters dynamically at navigate time:

function HomeScreen({ navigation }) {
  return <View>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params
  ...
}

Initial params

This way is if you need to pass props/params when the route is defined

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

Full documentation here

Upvotes: 0

MOLLY
MOLLY

Reputation: 499

Just try this


 <Tab.Screen name="TabMapScreen">
                  {props => <A123 {...props} props={user} />}
                </Tab.Screen>

I think it is what you want !

Upvotes: 4

sr007
sr007

Reputation: 74

You can use the initialParams

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

Upvotes: 4

Related Questions