I have the following structure (with alternative names, just for example, the file is quite large and with many contexts that cannot be unified):

App.js

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar
        translucent
      />
      <WarningProvider>
        <Screen2Context>
          <Screen3Context>
            <Routes />
          </Screen3Context>
        </Screen2Context>
      </WarningProvider>
    </NavigationContainer>
  );
}

AppRoutes.js :

export default function Routes() {
  return (
      <Stack.Navigator
        initialRouteName={'Screen1'}
        screenOptions={{
          headerShown: false,
        }}>

      <Stack.Screen name="Screen1" ponent={Screen1} />
      <Stack.Screen name="Screen2" ponent={Screen2} />
      <Stack.Screen name="Screen3" ponent={Screen3} />

     </Stack.Navigator>
    );
}

But that way all screens have access to context, and as I need more specific contexts for some screens I wouldn't want all of them to have access to those contexts, and also to avoid polluting App.js (or any other input file other than routes), but when trying to wrap the routes with a provider generates the error:

Error: A navigator can only contain 'Screen' ponents as its direct children.

So the question is: How to wrap just some screens with a context/provider using react-navigation ?

I have the following structure (with alternative names, just for example, the file is quite large and with many contexts that cannot be unified):

App.js

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar
        translucent
      />
      <WarningProvider>
        <Screen2Context>
          <Screen3Context>
            <Routes />
          </Screen3Context>
        </Screen2Context>
      </WarningProvider>
    </NavigationContainer>
  );
}

AppRoutes.js :

export default function Routes() {
  return (
      <Stack.Navigator
        initialRouteName={'Screen1'}
        screenOptions={{
          headerShown: false,
        }}>

      <Stack.Screen name="Screen1" ponent={Screen1} />
      <Stack.Screen name="Screen2" ponent={Screen2} />
      <Stack.Screen name="Screen3" ponent={Screen3} />

     </Stack.Navigator>
    );
}

But that way all screens have access to context, and as I need more specific contexts for some screens I wouldn't want all of them to have access to those contexts, and also to avoid polluting App.js (or any other input file other than routes), but when trying to wrap the routes with a provider generates the error:

Error: A navigator can only contain 'Screen' ponents as its direct children.

So the question is: How to wrap just some screens with a context/provider using react-navigation ?

• javascript
• reactjs
• react-native
• react-navigation

• By chance did you find a solution? – Phil Lucks Commented Nov 15, 2022 at 21:57
• Yes I wrote a article about it medium./@ademarsj/… – Ademar-SJ Commented Jan 26, 2023 at 22:14

1 Answer 1

The trick is to pass your wrapped ponent as the ponent prop into the one of your <Stack.Screen/>. In my project I did it next way.

Root navigation usually looks like:

<NavigationContainer>
     <Stack.Navigator>
        //...other screens

        <Stack.Screen name="WithContext" ponent={WrappedStackNavigator}/>

        //...other screens
     </Stack.Navigator>
</NavigationContainer>

So finally, this is our WrappedStackNavigator:

export default function WrappedStackNavigator() {
    return (
        <ContextProvider>
            <Stack.Navigator>
                <Stack.Group>

                    //... place here your screens to provide them with context

                </Stack.Group>
            </Stack.Navigator>
        </ContextProvider>
    );
}