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" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={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' components as its direct children.

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