CODEWITHSUNDEEP
javascriptreact-nativereduxreact-navigation-stackreact-navigation-bottom-tab
Omri Ram
Omri Ram

Reputation: 37

Passing Params from Stack-navigator to tab Navigator (react-navigation 5)

I am trying to pass the user ID from the login screen to the home screen which is part of a nested tab navigator. here is how my app is structured: 

 const mainStack = () =>(

             <Tab.Navigator


             tabBarOptions={{
              activeTintColor: 'tomato',
              inactiveTintColor: 'gray',
            }}
             >
                <Tab.Screen name="Home" component={Homescreen} 
                 options = {{headerStyle: {backgroundColor: 'yellow'}}}
                />
                <Tab.Screen name="Profile" component={otherStack} />
             </Tab.Navigator>

    )




export default () => (

        <NavigationContainer >
              <Stack.Navigator screenOptions={{
                  headerShown: false
                  }}>
                <Stack.Screen name='Welcome' component={WelcomeScreen} />
                <Stack.Screen name = 'Register' component = {RegisterScreen} />
                <Stack.Screen name= 'Login' component={LoginScreen} />
                <Stack.Screen name = 'mainStack' component={mainStack} />
              </Stack.Navigator>



        </NavigationContainer>

)

Whenever I go from the login screen to Home and call this.props.navigation.getParam('id') I get an error saying that it is not a function. After closer inspection I see that this.props.navigation.state is undefined. Probably meaning that my params aren't passed to the Home screen even though I don't have any issues navigating to it.

I tried using NavigationActions but I get an error that I don't see mentioned anywhere else.

I navigate to Home like this:

this.props.navigation.navigate('Home' { id: 'myId' })

I also tried this syntax:

 navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

but I get the same error

It is also worth noting that I used React.component rather than making my screens into functions. I am not sure if that causes any issues because in the tutorial for react-navigation v5 I saw the guy use functions instead of react components.

any help will be very much appreciated!!

Upvotes: 2

Views: 4708

Answers (1)

abdi
abdi

Reputation: 589

Try this:

props.navigation.navigate('mainStack' { params: {id: 'myId'}, screen: 'Home' )

And when accessing instead of using getParam use props.route.params.id

Upvotes: 7

Related Questions