Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Navigation Wrap All Screens in a View

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>
  );
}
like image 922
Dynamic Avatar asked Sep 01 '25 20:09

Dynamic


1 Answers

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>
);
like image 70
Erkin Kurt Avatar answered Sep 03 '25 09:09

Erkin Kurt