4

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>
  );
}
Dynamic
  • 497
  • 1
  • 10
  • 17

1 Answers1

6

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>
);
Erkin Kurt
  • 652
  • 6
  • 16
  • 16
    Normal way is: ``. Is there any way to pass `ScreenTemplate` directly to Screen `component` and specify its child (HomeScreen) ? To avoid repeating `` in all screens? – KeitelDOG Jul 17 '21 at 16:58