Document params passing behavior in navigators

[brentvatne]

react-navigation/react-navigation#5646

answer i give is:

the route that you navigate to receives the params, not any of its children.

this rfc could help: react-navigation/rfcs#68
more discussion on this here: react-navigation/rfcs#43

we should document this.props.navigation.dangerouslyGetParent().getParam(...) as a way to get the params from the parent, or provide a method that gets params from the parent without the word dangerously maybe...

[brentvatne]

react-navigation/react-navigation#5667

[arminghm]

How about to get the params from component props and pass them as initialParams?

const TabNavigator = createBottomTabNavigator();
const Profile = (props) => (
  <TabNavigator.Navigator>
    <TabNavigator.Screen name='Account' component={Account} initialParams={props.route.params} />
    <TabNavigator.Screen name='Settings' component={Settings} initialParams={props.route.params} />
  </TabNavigator.Navigator>
);
`

[martinodonnell]

@arminghm Could you elaborate on how you would pass the props from the NavigationContainer seen below? I am trying to pass a specific item from a list dynamically to each tab. Similar to a task app where you can delve deeper into a specific task but I want the same data to be shared between the tabs. In this instance, would it be better to set up a ContextNavigator?

const Tab = createBottomTabNavigator();
const TabScreen = () => (
  <Tab.Navigator>
    <Tab.Screen name="Tab1Screen" component={Tab1Screen} />
    <Tab.Screen name="Tab2Screen" component={Tab2Screen} />
    <Tab.Screen name="Tab3Screen" component={Tab3Screen} />
  </Tab.Navigator>
);

const Stack = createStackNavigator();
const StackScreen = () => (
  <Stack.Navigator>
     //... other screens
    <Stack.Screen name="tab1" component={TabScreen}/>
  </Stack.Navigator>
);

export default function Routes() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Cooler">
         <Drawer.Screen name="Home" component={StackScreen} />
       </Drawer.Navigator>
    <NavigationContainer/>
   )
}

[arminghm]

@martinodonnell perhaps you need a global state management like mobx or redux to achieve what you want, but if you want to pass params to the tab screens you can simply do what I mentioned here, and when you navigate to the tabNavigator with params (navigate('Tab1', {...params})) you can access the params in Tab1Screen, Tab2Screen and Tab3Screen via props.route.params.

[martinodonnell]

@arminghm I read your post wrong and implemented it incorrectly. Left out the 's' in params. This is exactly what I wanted without having to use context.
Thanks

[arminghm]

@martinodonnell oh, thanks 😉