React Native Navigation Wrap All Screens in a View

Question

Using react-navigation v5, how does one wrap all screens individually in a scroll view and a keyboard safe view?

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Test" component={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

Answer 1

Inside navigation container you are only allowed to use Navigator or Screen. So you cannot wrap Stack.Screen with any other component.

What you can do is wrap the screen component:

Create a new component ScreenTemplate maybe, you can decide the name. Then use this component to implement your keyboard avoid and scroll logic.

const ScreenTemplate = ({children}) => (
   <AnyWrapperComponent>
      {children}
   </AnyWrapperComponent> 
);

In any other screen:

const HomeScreen = () => (
   <ScreenTemplate>
     //implement anything you want
      <BlaBlaComponent />
    //etc..
   </ScreenTemplate>
);