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
- If I get it, I validate the session token to see if it's expired
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?!