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?

Where you able to achieve it? if so can you post the code please — Thanveer Shah, May 06 '21 at 07:20
I was able to, But then One set of Navigator has to be bottom navigation :( — Thanveer Shah, May 06 '21 at 21:48
Have you got the solution a year after? Or there's simply no way — Dacaramo, Oct 12 '22 at 17:16

score -1 · Answer 1 · answered Dec 26 '21 at 04:36

-1

Try this, I might be wrong

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

answered Dec 26 '21 at 04:36

Julian Castro

109
1
5

Stack.Group is a feature in React Navigation v6, not v5 as stated in the question – Noah Dec 28 '21 at 09:54
1

And this doesn't work anyway. v6 StackNavigator only accepts `Group`, `Screen` and fragments as children, as seen [here](https://github.com/react-navigation/react-navigation/blob/e5e2151b7800d7d627fd7a17e3819e70c0f106d4/packages/core/src/useNavigationBuilder.tsx#L80) – sniib Feb 03 '22 at 09:51

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

1 Answers1