Passing State in React-Navigation from TabsNavigation to Child StackNavigation

user_1349269 0
Viewed 745

UPDATE: Now with a Snack Demo

I've created a demo on snack so you can see the issue first hand and help me demonstrate a solution in actual code.

Steps to duplicate

  1. launch app
  2. Tap "GO TO EVENTTABS" button
  3. Tap each tab, noticing that the eventId is in scope for the first three tabs
  4. Tap "More" tab
  5. Tap "TEAM MEMBERS", noticing that eventId is no longer in scope. This is where the problem lies. How do I pass along eventId?

_____________________________

My App has the following navigation hierarchy, where every instance of <> is just a regular component

App <StackNavigator> {
    EventList <>
    EventTabs <BottomTabNavigator> {
        Quests <>
        Leaderboard <>
        Gallery <>
        More <StackNavigator> {
            MoreList <>
            TeamMembers <>
        }

    }
}

Upon entering the app, the user's first screen is EventList. They click a button to navigate into EventTabs, so I'm able to use the navigation.navigate() to transition while passing state like so...

EventList.navigation.navigate(EventTabs, passedParams);

To this point, everything makes sense. But TeamMembers also needs access to the passedParams. I'm confused how to pass those along. Hence my question...how do access passedParams from the TeamMembers component? They seem to be scoped just to the EventTabs.

If the answer is to use navigate.setParams(), then I'm not sure where I'd do that.

If the answer is to use NavigationActions.setParams(), then I'm also not sure where I'd do that.

react-navigation react-native
2 Answers

Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.

function getParam(navigation, paramName) {
  const { getParam, dangerouslyGetParent } = navigation;
  let parent = dangerouslyGetParent();
  let val = getParam(paramName);
  while (val === undefined && parent && parent.getParam) {
    val = parent.getParam(paramName);
    parent = parent.dangerouslyGetParent();
  }
  return val;
}
user_22041040

The problem seems to continue for version 5.x of react navigation. For me this works.

function getParentParam(navigation, paramName) {
    const { dangerouslyGetParent } = navigation;
    let paramValue = null;
    const parent = dangerouslyGetParent();
    const routes = parent.dangerouslyGetState().routes;
    routes.some((r) => {
        paramValue = r.params ? r.params[paramName] : null;
        return paramValue !== null;
    });
    return(paramValue);
}

You can iterate over parent.dangerouslyGetParent() according to the depth level you have

user_131685010
Related