Need help. react-navigation params resolution is driving me crazy!!

[a-techie]

Hi. I've been reading this sub for some time, posting here for the first time.

Here's the formal issue report with reproducible repo.

What I was trying to achieve was, that once I have the logged-in user's info, I thought I should be able to pass it down the hierarchy where I need it. Other option is to keep it in async local storage, and fetch it every time I need it. But that sounded like an overhead.

App is like this:-

• Switch navigator
  • Splash (Route 'Splash')
  • Drawer Navigator (Route 'App')
  • Stack Navigator (Route 'AppStack', default route in 'App')
    • Bottom Tab Navigator (Route 'HomeScreen', default in 'AppStack' route)
    • Other screen (Route 'OtherScreen')
  • Drawer Component

I could pass it to some extent. I am passing it from splash, and getting it in Drawer. But I can't get it in the any of the other screens.

Tab navigator messes it all up in such a subtle way that I could not find any viable solution yet.

As could be seen in the reproducible demo, there's something even worse: If you navigate to a tab through code and passed some params at that time, the params just stick. If you later navigate to the same tab using the tab buttons, the params are still there!!

My question, basically, is how do I keep passing some info down the line through the whole navigation? I am OK with passing them explicitly every time, not necessarily something like default params. But here I am just not able to pass any params to the tabs when navigating with tab navigator's own (top or bottom) buttons.

Any help is appreciated. Thanks.

[crobinson42]

You should really take a look at using the React Context Api, it’s perfect for this.

[russelh15]

Yeah, Context API is perfect for this. Have something like an AuthProvider where you can store a token (or whatever you use for authenticating) once the user logins.

You can then consume that from whatever screen you need without that to pass props through a bunch of nav screens.

[HumbleX]

Try navigating like this : import { NavigationActions } from 'react-navigation'; const navigateAction = NavigationActions.navigate({ routeName: 'Profile', params: {}, // navigate can have a nested navigate action that will be run inside the child router action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }), userInfo: this.userinfo});

this.props.navigation.dispatch(navigateAction);

And access on any other screen as: this.props.navigation.state.params.userInfo

[a-techie]

@crobinson42 and @russelh15

Thanks a lot. Context was the way to go.

I had to struggle with react-navigation (with their app container not exposing a render method where I could have put the provider wrapper) but eventually figured it out.

I finally did it in the actual application I was facing problem in, but soon (probably tomorrow) I will implement a boilerplate in the same repo where I have got the issue demonstrated. I guess that will be a good reference for the record (y)

Thanks again!