CODEWITHSUNDEEP
react-nativereact-navigation
Thiago Nascimento
Thiago Nascimento

Reputation: 1155

Nested TabNavigator not passing params to routes

I have a TabNavigator nested in an Stack Navigator. In a login page, I want to navigate to the TabNavigator, resetting the stack and passing some params to the TabNavigator.

As described in the docs, I'm doing the followin to reset the stack, passing the user param to the navigator.

  resetAction = () => {
    return NavigationActions.reset({
      index:0,
      actions: [NavigationActions.navigate({routeName:'TabNav', params:{user: userId}})]
    })
  }

My problem is that i can't access the params in the TabNavigator routes. I tried using this.props.navigation.state.params or this.props.navigation.params but none seem to work.

My tabNavigator code:

const TabNav = TabNavigator({
    Page1:{screen: Page1},
    Page2: {screen: Page2},
    Page3: {screen: Page3}
})

Upvotes: 1

Views: 1176

Answers (1)

Thiago Nascimento
Thiago Nascimento

Reputation: 1155

I was able to solve it by changing the TabNav component to a class based component as seen below:

export default class Dashboard extends React.Component {
  
  router = const TabNav = TabNavigator({
    Page1:{screen: Page1},
    Page2: {screen: Page2},
    Page3: {screen: Page3}
  })

  render(){
    return <TabNav screenProps={{userId: this.props.navigation.state.params.userId}}/>
  }
}

Doing that I'm able to normally pass params such as NavigationActions.navigate({routeName:'TabNav', params:{userId}} and access to the userId param in the routes in the screenProps property as in this.props.screenProps.userId

Upvotes: 1

Related Questions