1// In App.js in a new project
2
3import * as React from 'react';
4import { View, Text } from 'react-native';
5import { NavigationContainer } from '@react-navigation/native';
6import { createStackNavigator } from '@react-navigation/stack';
7
8function HomeScreen() {
9  return (
10    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
11      <Text>Home Screen</Text>
12    </View>
13  );
14}
15
16const Stack = createStackNavigator();
17
18function App() {
19  return (
20    <NavigationContainer>
21      <Stack.Navigator>
22        <Stack.Screen name="Home" component={HomeScreen} />
23      </Stack.Navigator>
24    </NavigationContainer>
25  );
26}
27
28export default App;

1//react navigation 5
2
3import { createStackNavigator } from '@react-navigation/stack';
4
5const Stack = createStackNavigator();
6
7function MyStack() {
8  return (
9    <Stack.Navigator>
10      <Stack.Screen name="Home" component={Home} />
11      <Stack.Screen name="Notifications" component={Notifications} />
12      <Stack.Screen name="Profile" component={Profile} />
13      <Stack.Screen name="Settings" component={Settings} />
14    </Stack.Navigator>
15  );
16}
17

1npx expo install @react-navigation/stack

1import {
2  CardStyleInterpolators,
3  createStackNavigator,
4} from '@react-navigation/stack';
5
6const Stack = createStackNavigator();
7export default () => (
8  <Stack.Navigator
9    screenOptions={{
10      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
11    }}
12  >
13    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
14    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
15  </Stack.Navigator>
16);