Search
⌘K
    to navigateEnterto select Escto close

    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/

    Previous
    Next