How to wrap multiple stack screens with context provider in react navigation 5?

Question

I would like to achieve something like the following but it is not possible because stack navigator accepts only Stack.Screens as children.

<Stack.Navigator>
  <Provider1>
    <Stack.Screen name="screen1" component={Screen1} />
    <Stack.Screen name="screen2" component={Screen2} />
  </Provider1>
  <Provider2>
    <Stack.Screen name="screen3" component={Screen3} />
    <Stack.Screen name="screen4" component={Screen4} />
  </Provider2>
</Stack.Navigator/>

I know that I could achieve this by wrapping the screens with stack navigator like so:

const stackNav1 = <Provider1>
 <Stack.Navigator>
    <Stack.Screen name="screen1" component={Screen1} />
    <Stack.Screen name="screen2" component={Screen2} />
 </Stack.Navigator>
</Provider1> 


const stackNav2 = <Provider2>
 <Stack.Navigator>
    <Stack.Screen name="screen3" component={Screen3} />
    <Stack.Screen name="screen4" component={Screen4} />
 </Stack.Navigator>
</Provider2> 
...

<Stack.Navigator>
    <Stack.Screen name="stack1" component={stackNav1} />
    <Stack.Screen name="stack2" component={stackNav2} />
</Stack.Navigator/>

Is there any simpler approaches in which I wouldn't have to define new navigators?

Answer 1

an alternative would be using a HOC (higher order component), to create a screen with Provider then use that in your navigator.

1. create a provider component

    const providerScreen = (Provider, Component) => (props) => (
      <Provider>
        <Component {...props} />
      </Provider>
    );

2. create screens with provider & components

    const Screen1WithProvider = providerScreen(Provider1, Screen1);
    const Screen2WithProvider = providerScreen(Provider1, Screen2);
    const Screen3WithProvider = providerScreen(Provider2, Screen3);
    const Screen4WithProvider = providerScreen(Provider2, Screen4);

3. use providerScreens in stack

    <Stack.Navigator>
      <Stack.Screen name="screen1" component={Screen1WithProvider} />
      <Stack.Screen name="screen2" component={Screen2WithProvider} />
      <Stack.Screen name="screen3" component={Screen3WithProvider} />
      <Stack.Screen name="screen4" component={Screen4WithProvider} />
    </Stack.Navigator>