React Navigation pass params to nested stackNavigator

Question

In react navigation 3.0 they added the feature to pass default params to screen. The problem is that I want to pass those params to a nested stackNavigator but I can't figure out how to do so. These are my navigators: MainDrawer.js:

    const MyDrawerNavigator = createDrawerNavigator({
      Anime: {
        screen: SerieNavigation,
        params: { type: "anime" },
        path: "anime/:anime"
      },
      Tv: {
        screen: SerieNavigation,
        params: { type: "tv-show" },
        path: "tv/:tv"
      },
      Film: {
        screen: SerieNavigation,
        params: { type: "film" },
        path: "film/:film"
      }
    });

    const AppContainer = createAppContainer(MyDrawerNavigator);

    export default AppContainer;

SerieNavigation.js:

    const SerieStack = createStackNavigator(
      {
        Content: {
          screen: SearchScreen,
          params: { type: "anime" } //<-- HERE I WOULD LIKE TO DO SO params: { type: props.navigation.state.params.type }
        },
        Serie: SearieScreen,
        Episode: EpisodePage
      },
      {
        headerMode: "none",
        navigationOptions: {
          headerVisible: false
        }
      }
    );

    SerieStack.defaultNavigationOptions = {};
    export default SerieStack;

Any help is appreciated.

Leonardo Drici · Accepted Answer · 2020-02-19T09:43:45.450

15

To access props of the parent you can use this.props.navigation.dangerouslyGetParent().getParam('type'); now you can access any prop of the parent.

EDIT:

Not sure if this will work with react-navigation v5 but give it a try

edited Feb 19 '20 at 09:43

answered Jan 15 '19 at 15:26

Leonardo Drici

749
3
11
32

what do you mean of parent ? – DevAS May 01 '19 at 21:07
I had a navigator with a navigator inside, but the props didn't get through the navigators, so to access the props you need to reference the parent ( the navigator at the top) – Leonardo Drici May 02 '19 at 09:30
Yeah, I got it if I have two AppContainer how to get params from the other screen in separate other AppContainer @LeonardoDrici – DevAS Jul 16 '19 at 19:21
1

Can you avoid dangerouslyGetParent? by somehow pass params from stack navgiator maybe? – oron cohen Feb 04 '20 at 17:24
I call this function from stack where I dispatched from another stack! And this help me! Thank you! "+1" – bekanur98 Feb 06 '20 at 09:27
`getParam` doesn't seem to be available in react-navigation v5 – SamB Dec 09 '20 at 23:04

kivul · Answer 2 · 2018-11-26T16:00:20.580

1

I believe you could achieve that by passing your screenProps to your stackNavigator. Like this (assuming you return your stack navigator somewhere):

render() {
  <MyDrawerNavigator screenProps={this.props} />
}

Then, you can access it inside your SerieStack like this:

const SerieStack = createStackNavigator(
{
  Content: {
    screen: SearchScreen,
    params: { type: this.props.screenProps.navigation.state.params.type }
  }
});

edited Nov 26 '18 at 16:00

answered Nov 26 '18 at 14:59

kivul

1,148
13
28

I don't render the stackNavigator I pass it directly as a screen to the drawerNavigator – Leonardo Drici Nov 26 '18 at 15:14
it's the same thing, you would pass the props to the drawerNavigator then, i'll edit the answer – kivul Nov 26 '18 at 15:59
take a look at this question I asked a few days ago, I had the same issue: https://stackoverflow.com/questions/53422419/undefined-function-onclick-in-contentcomponent – kivul Nov 26 '18 at 16:00
Doing like you said will make my component render the same objects. If you can see all three screens render the same component but based on the params it renders different results .By doing what you provided all the three screens will render the same thing. – Leonardo Drici Nov 26 '18 at 16:10
you will pass the main props from your HOC, then you can send them differently to each of your screens – kivul Nov 26 '18 at 16:37
I get undefined is not an object. – Leonardo Drici Nov 26 '18 at 16:56
navigation.dangerouslyGetParent().getParam("type") is undefined? – priyanka Jan 26 '19 at 17:40

React Navigation pass params to nested stackNavigator

2 Answers2