How to use global Contexts with all screens?

[marianolc]

Hi... I'm trying to understand how this component works I seen the part about context I found the following example:

Navigation.registerComponent(
  'App',
  () => (props) => (
    <CounterContextProvider>
      <App {...props} />
    </CounterContextProvider>
  ),
  () => App
);

This is fine but this will create a new context for every new Component used as a screen right? What happens when I need to use global contexts that are used by all screens like the most common ones (i18next, redux, react-native-elements)?: For example my App looks like this right now:

    <ThemeProvider theme={theme}>
      <CommonStylesProvider>
        <I18nextProvider i18n={i18next}>
          <Provider store={store}>
            <SafeAreaProvider>
              ....

Because I'm using react-router I just put the screen inside.. but how this library works I dont know how to achieve that. Or do i Need to add those all contexts for every screen?

[sssajjad007]

Re-renders aren’t triggered across screens when the context changes,
cuz contexts does not support proxy (hermes not supporting Proxy) . i have same problem and i decided to use Redux instead.
like this

    return Navigation.registerComponent(
      screenName,
      () => props =>
        (
          <ReduxProvider store={store}>
            <ThemeChangerHandler>
              <GestureHandlerRootView style={{flex: 1}}>
                <Component {...props} />
              </GestureHandlerRootView>
            </ThemeChangerHandler>
          </ReduxProvider>
        ),
      () => Component, // for navigation options
    );
  });