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" ponent={HomeScreen} />
          <Stack.Screen name="Test" ponent={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

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" ponent={HomeScreen} />
          <Stack.Screen name="Test" ponent={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

• javascript
• react-native
• react-navigation
• react-navigation-v5

• Add ScrollView inside the HomeScreen and TestScreen ponent, not in App.js. – SkyTreasure Commented Oct 4, 2020 at 10:24

1 Answer 1

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

What you can do is wrap the screen ponent:

Create a new ponent ScreenTemplate maybe, you can decide the name. Then use this ponent 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>
);