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

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>
);