Home > Mobile >  How can I sync data between two screens?
How can I sync data between two screens?

Time:01-09

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

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?

CodePudding user response:

to share data b/w screen in React App without using Props or Navigation State you can use Redux.

Redux Getting Started

i'll suggest you use Redux Toolkit as it's easy to implement Redux Toolkit

CodePudding user response:

There are two ways to solve this:

Context API

The context API is built in feature provided by react, so if you have bundle size issues, I recommend using Context .

Redux Toolkit

Redux is currently the most used way of sharing state globally, it is easy to learn. However, it is a third party library so, this will increase the bundle size.

  • Related