How to share state between tabs in react-native-router-flux?

Question

So I have a TabNavigation scene using react-native-router-flux. I want to share state from the initial tab screen component to the second tab screen component when the second tab is pressed. What is the best way to do this?

Here is my TabNavigation scene with the two child tabs:

                  <Scene key="showPlaceTabBar" tabs={true} labelStyle={{fontSize: 20, marginBottom: 15}} hideNavBar>
                   <Scene key="postsTab" title="Posts"
                     onPress={()=> {Actions.posts()}}>
                     <Scene hideNavBar={false} key="showPlace" component={PlacesShow} title="Show Place" />

                   </Scene>

                   <Scene hideNavBar={false} key="createPostTab" title="Create Post"
                     onPress={()=> {Actions.createPost({placeName: this.props.placeName})}}>
                     <Scene key="createPost" component={CreatePost} title="Create Post" />

                   </Scene>
                 </Scene>

I want to send some state/props data from the PlacesShow component to the CreatePlace component. The Actions method does not have access to the PlacesShow component props/state because it lives where the screen is defined. How should I accomplish this?

I have looked into Redux but I am having a hard time understanding what exactly it does. Is this a job for Redux? I was using react-navigation earlier, but was having a hard time customizing navbars, and when I switched to react-native-router-flux everything became 10 times easier. This is basically the last piece of navigation functionality I need for my app, and would rather not introduce new libraries/switch back to react-navigation unless I absolutely have to (custom Navigation components were hard to understand, and I am pretty sure that is what I need for my app).

Thanks for the help.

Answer 1

AsyncStorage

__

Since you are using React-Native , you can leverage the shared storage of the underlined device using AsyncStorage interface.

persist :

await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');

retrieve :

 const value = await AsyncStorage.getItem('@MySuperStore:key');

More details in the official documentation .