5

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?

Mel
  • 625
  • 9
  • 25
  • possibly same question as https://stackoverflow.com/questions/50432116/how-to-pass-props-to-component-inside-a-react-navigation-navigator – Ross Mar 31 '22 at 01:15

4 Answers4

4

You can use the initialParams

     <Tab.Screen
          name="TabMapScreen"
          component={PostsTab}
          initialParams={{userData: user}} //User data is just an alias
        />
sr007
  • 66
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 31 '22 at 05:50
  • Params aren't recommended way to pass such data. Either use context or a render callback https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props https://reactnavigation.org/docs/params/#what-should-be-in-params – satya164 Mar 31 '22 at 13:17
3

Just try this


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

I think it is what you want !

MOLLY
  • 409
  • 2
  • 12
1

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

TOPKAT
  • 6,667
  • 2
  • 44
  • 72
0

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.

TheSnydaMan
  • 9
  • 3