1### ISNTALATION
2
3npm install @react-navigation/native --save
4yarn add @react-navigation/native
5
6### core dependencies
7
8expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
9
10### stack navigation
11yarn add @react-navigation/stack
1## Yarn
2yarn add @react-navigation/native
3yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
4
5## Npm
6npm install @react-navigation/native
7npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
8
9## Expo
10expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
1//dependencies
2npm install @react-navigation/native
3npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
4
5//for stack navigator,drawer,material bottom tab,react-native paper
6npm install @react-navigation/stack @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper
1import { useNavigation } from '@react-navigation/native';
2
3const navigation = useNavigation();
4navigation.navigate('WallScreen')
1// USAGE
2
3// In App.js in a new project
4
5import * as React from 'react';
6import { View, Text } from 'react-native';
7import { NavigationContainer } from '@react-navigation/native';
8import { createStackNavigator } from '@react-navigation/stack';
9
10function HomeScreen() {
11 return (
12 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
13 <Text>Home Screen</Text>
14 </View>
15 );
16}
17
18const Stack = createStackNavigator();
19
20function App() {
21 return (
22 <NavigationContainer>
23 <Stack.Navigator>
24 <Stack.Screen name="Home" component={HomeScreen} />
25 </Stack.Navigator>
26 </NavigationContainer>
27 );
28}
29
30export default App;
1import * as React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createStackNavigator } from '@react-navigation/stack';
4
5const Stack = createStackNavigator();
6
7const MyStack = () => {
8 return (
9 <NavigationContainer>
10 <Stack.Navigator>
11 <Stack.Screen
12 name="Home"
13 component={HomeScreen}
14 options={{ title: 'Welcome' }}
15 />
16 <Stack.Screen name="Profile" component={ProfileScreen} />
17 </Stack.Navigator>
18 </NavigationContainer>
19 );
20};
21