How do I share state between react native screens?

Question

I'm trying to build an app with react native and react navigation, such that changing something in one screen will also change it in the other.

So far, the only way I have found to be able to sync data between the two screens, is to use buttons with onPress={() => navigate('OtherScreen', this.state)} . This has two problems. Firstly that it only works where I explicitly call navigate - when I swipe to change screen, it won't transfer the data. But mostly, this just seems contrary to the react philosophy, that data should be pulled from the model by the render call, rather than one render method pushing data into another component.

This has completely stumped me. My current "solution" is to write my entire app in a single file, so that everything is in the same scope and I can use a global variable to store the global state.

I cannot possible be the first person to have this problem, and I find it hard to imagine that react-native would not have any built-in method for defining an application-wide data store.

Is there a standard pattern for sharing data globally in react-native?

How can I sync data between two screens?

Answer 1

You can use Context or Redux to share between containers(screens) or components.

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

Redux is a predictable state container for JavaScript apps.

Answer 2

My experience to tackle the problem is:

a) do not use the Tab-view template (or similar) which does not allow you to set the parameters in the navigate function. In this way you can pass the required parameters (states) across all screens. (but then I need to write some codes to create the "Tabs", but it is not hard at all, just put them as a view with absolute position at the bottom)

b) on each screen, read the current time so that when you switch screens thru "navigate", you pass this time parameter to the next screen

c) when the new screen arrives, I have used a few lines of codes (in componentDidUpdate and componentDidMount) to compare the time passed from the previous screen to the current time , if they are different, then I will trigger an update ONCE to all functions which require update.

Hope that the above will give some insights to developers who do NOT want to spend extra time to learn/use Redux.

Enjoy....

Answer 3

There two kinds of sharing states.

1. Keeping part of the state on the screen change, example a drilldown view to view details. You don't need to change the state on subset screens. To solve this problem, send needed data as parameters and use it as props. onPress={() => navigate('OtherScreen', this.state)}
2. You need to change the state on other screens, such as multi-screen props like on buying screens. This way you need to use Context or Redux (The new redux-toolkit is the current stanard and it's much easier than redux / react-redux ).

---

When using redux-cli with navigation, be sure that all routes are inside the <Provider> , so you can call it globally.

Initialize store:

return (
  <NavigationContainer>
    <Provider store={store}>
      <LoadingActivity />
      <Routes />
    </Provider>
  </NavigationContainer>
);