How to have global state with recat-native-navigration

@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!

[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!

[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.