Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Navigation pass params to nested stackNavigator

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.

like image 366
Leonardo Drici Avatar asked Nov 26 '18 14:11

Leonardo Drici


1 Answers

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

like image 104
Leonardo Drici Avatar answered Oct 18 '22 10:10

Leonardo Drici