0

I am navgating to a StackNavigator (who's default route is a MaterialBottomTabNavigator) wrapped in DrawerNavigator with a param. I can get the param in Drawer custom component. But can't get the same in StackNavigator's screen. I tried avoiding the BottomTabNav, by changing default route to a plain screen, still the result is same.

Here's my dashboard screen - a tab navigator

const Dashboard = createMaterialBottomTabNavigator(
    {
        Tab1: Tab1Component,
        Tab2: Tab2Component,
        ...
    }
);

This is another screen which I navigate to, from one of the above tabs

class Otherscreen extends Component { 
    ...
    render() {
        ...
        <Text>{
            this.props.navigation.getParam('userInfo', 'Not Set')
            /* FAILS!!! */
        }</Text>
        ...
    } 
    ...
}

Therefore, this is a stack navigator containing both

const AppStack = createStackNavigator(
    {
        'Dashboard': {
            'screen': Dashboard,
        },
        'Otherscreen': {
            'screen': Otherscreen
        }
    }
);

I need a drawer for the whole thing, so wrapped it all in

const AppDrawerNavigator = createDrawerNavigator(
    { //Main screen
        'AppStack': AppStack
    },
    { //Drawer
        'contentComponent': Drawer
    }
);

where, the Drawer is

class Drawer extends Component { 
    ...
    render() {
        ...
        <Text>{
            this.props.navigation.getParam('userInfo', 'Not Set')
            /* WORKS!!! */
        }</Text>
        ...
    } 
    ...
}

For authentication and other things like splash, I am using

const AppNavigator = createSwitchNavigator({
    'Splash': Splash,
    'Auth': AuthStack,
    'App': AppDrawerNavigator,
});

export default createAppContainer(AppNavigator);

Now what I am trying to do is this.

  • At 'Splash', I check for last user info.
    • If I get it, I validate the session token to see if it's expired
      • If not expired, I navigate to 'App' (the AppDrawerNavigator instance above), with the userinfo
    • If I don't get it, or if session has expired, I navigate to Auth
      • When auth is over, I navigate to 'App' (the AppDrawerNavigator instance above), with the userinfo

In either case, I am going to 'App' with same userinfo param, and I COULD get the userinfo param in Drawer component.

But I am not getting it from any other screen in AppStack. I even tried to avoid the intermediate BottomTabNav by moving up the Otherscreen to first place making it the default, and navigating to 'App" goes to Otherscreen, but the userinfo param is still unavailable.

I suppose I should be able to get the userinfo param from this.props.navigation on both (A) The drawer component, and (B) AppStack screens, or at least it's initial screen i.e. the Dashboard component

Here's a minimal demo: https://github.com/bhave-abhay/PassPropsIntoNestedNav/ Also, this is the bug report https://github.com/react-navigation/react-navigation/issues/5646

What's going wrong in this case?!

Abhay Bhave
  • 44
  • 1
  • 8

0 Answers0