How to have global state with recat-native-navigration

[Maxoos]

@dai-shi Thanks for this repo. On RNN each screen is a seperate tree, and so you need to which has it's own Provider. Like so:

Navigation.registerComponent(
    'Templates',
    () => props => (
      <Provider>
         <Templates {...props} />
      </Provider>
    ),
    () => Templates,
  );
  Navigation.registerComponent(
    'Editor',
    () => props => (
      <Provider>
         <Editor {...props} />
      </Provider>
    ),
    () => Editor,
  );

The problem is that each screen seem to have it's own context or state, how can I make sure the state is shared across screens?

Thanks!

[dai-shi]

Hey, thanks for trying.
I'm not very familiar with RNN, but from the doc https://wix.github.io/react-native-navigation/docs/third-party-react-context/
it's not possible. It's the limitation in RNN.

As the doc says, you need to find non-context solution. For example:

• https://github.com/dai-shi/react-hooks-global-state
• https://github.com/react-spring/zustand

[dai-shi]

Ah, if you like the state usage tracking feature in react-tracked, of course this:

• https://github.com/dai-shi/reactive-react-redux

[Maxoos]

Thanks for the links!

What I like about react-tracked is that I can easily use useState from individual components and have them stored in a global state.

I've been digging around a bit and it seems that you can do it with a Proxy

wix/react-native-navigation#4517 (comment)

But not too sure how to do it with this lib.

[dai-shi]

That workaround in the issue is a bit hacky. a) you don't need Proxy to make it work. b) it may only work because another screen rerenders with an updated value in the mutable global variable (if it works, it's because RNN behaves like that). c) you can't use function update.
In short, we don't need to re-invent the context api for this.

I can easily use useState from individual components and have them stored in a global state.

If this is the goal, I'd encourage you to try https://github.com/dai-shi/react-hooks-global-state
It will work like a charm.

[Maxoos]

I tried zustand and it worked like a charm! react-hooks-global-state looks good too, I may use it too in the future. Thanks for all the help!