Storing global state in react-native/react-navigation app?

Question

I have a react native/react navigation app with two screens. Before I implemented react-navigation I had a overarching App component that made an api call and passed the returned object to both screens as props. Now that I've implemented react-navigation, I'm not sure where to make the api call in order manage the state effectively and pass down the object correctly to both screens. Redux might be an option, but it doesn't seem write to make an api call in a sub component.

Answer 1

With react-navigation you can pass data down through screen props...

this.props.navigation.navigate('AnotherScreen', {User: {name: 'john doe', age: 27}}})

Then you can access these props...

this.props.navigation.state.params.User

https://reactnavigation.org/docs/en/navigation-prop.html

https://github.com/react-navigation/react-navigation/issues/760

https://github.com/react-navigation/react-navigation/issues/728

React Navigation pass props in TabNavigator