Home > Software design >  How to pass props to a screen component in react navigation
How to pass props to a screen component in react navigation

Time:04-01

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?

CodePudding user response:

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

CodePudding user response:

You can use the initialParams

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