Learn React Native

Navigation Version 5

Installing react-navigation 5

yarn add @react-navigation/native

Latest version of react navigation use many third part libraries, we can install them using yarn or npm

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context react-native-community/masked-view

Example using navigation 5

1// Root.js component
2import { NavigationContainer } from "@react-navigation/native";
3import { createStackNavigator } from "@react-navigation/stack";
4
5import AppStack from "./AppStack";
6import AuthStack from "./AuthStack";
7import navigationService from "./NavigationService";
8
9const Stack = createStackNavigator();
10
11const RootStack = () => {
12  return (
13    <NavigationContainer ref={navigationService.navigationRef}>
14      <Stack.Navigator initialRouteName="Auth" headerMode="none">
15        <Stack.Screen name="Auth" component={AuthStack} />
16        <Stack.Screen name="App" component={AppStack} />
17      </Stack.Navigator>
18    </NavigationContainer>
19  );
20};
21
22// Auth Stack component
23import SignInRequest from "../screens/SignIn";
24import SignInSuccess from "../screens/SignInSuccess";
25
26const Stack = createStackNavigator();
27
28const AuthStack = () => {
29  return (
30    <Stack.Navigator initialRouteName="Request" screenOptions={screenOptions}>
31      <Stack.Screen
32        name="Request"
33        component={SignInRequest}
34        options={{
35          title: "SignInRequest",
36        }}
37      />
38      <Stack.Screen
39        name="Success"
40        component={SignInSuccess}
41        options={{ title: "SignInSuccess" }}
42      />
43    </Stack.Navigator>
44  );
45};
46
47// App Stack component
48import Home from "../screens/home";
49import Profile from "../screens/profile";
50
51const Stack = createStackNavigator();
52
53const AuthStack = () => {
54  return (
55    <Stack.Navigator initialRouteName="Home">
56      <Stack.Screen
57        name="Home"
58        component={Home}
59        options={{
60          title: "Home",
61        }}
62      />
63      <Stack.Screen
64        name="Profile"
65        component={Profile}
66        options={{ title: "Profile" }}
67      />
68    </Stack.Navigator>
69  );
70};
71
72// NavigationService.js
73
74import * as React from "react";
75
76export const navigationRef = React.createRef();
77
78export const navigate = (routeName, params) => {
79  navigationRef.current?.navigate(routeName, params);
80};
81
82export const changeStack = (stackName) => {
83  resetRoot(stackName);
84};
85
86const resetRoot = (routeName) => {
87  navigationRef.current?.resetRoot({
88    index: 0,
89    routes: [{ name: routeName }],
90  });
91};
92
93// Whenever you want to change stack you can call change stack like this:-
94navigationService.changeStack("App");
95// you can change between the screen of same stack like this:-
96navigation.navigate("Profile");

For using nested navigatior like drawer navigator, tab navigatior and stack navigatior, you can follow this link:-

https://reactnavigation.org/docs/nesting-navigators/

⌘K
    to navigateEnterto select Escto close
    Previous
    Next