CODEWITHSUNDEEP
react-nativereact-native-router-flux
srlrs20020
srlrs20020

Reputation: 437

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

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.

Upvotes: 1

Views: 766

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93243

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 .

Upvotes: 1

Related Questions