React-navigation 5.0 example react-native

Hi guys, in this article we are going to learn about How to use React-navigation 5.0 example react-native, as we have already familiar with previous versions of react-navigation. in this version in this, we can change configuration dynamically, also can access context, props, and state in the navigator, this is a most important update of react-navigation so let’s start with making a new project using expo

1. Create a new project

Firstly, install expo client using the following command

npm install --global expo-cli

Create a project using the following command

expo init projectName

2. Install React-navigation 5.0

first, install the following library for react-navigation

npm install @react-navigation/native

then install supportive libraries using the following command

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Create screens

We are going to create two screens one is Home.js and the second is details.js

1. Home.js

import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

const characterDetails = {
  name: "Techup.co.in",
  desc: "Learn React-native application development"
};

function Home(props) {
  const { navigation } = props;      //<--- Get navigation from props

  return (
    <View style={styles.container}>
      <Text style={styles.text}>React-navigation 5.x example</Text>
      <TouchableOpacity
        style={styles.buttonContainer}
        onPress={() =>
          navigation.navigate("Detail", { item: characterDetails })     //<--- Code to navigate between screens
        }
      >
        <Text style={styles.buttonText}>Who is {characterDetails.name}?</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ebebeb"
  },
  text: {
    color: "#101010",
    fontSize: 24,
    fontWeight: "bold"
  },
  buttonContainer: {
    backgroundColor: "#3e78f4",
    borderRadius: 5,
    padding: 10,
    margin: 20
  },
  buttonText: {
    fontSize: 20,
    color: "#fff"
  }
});

export default Home;

As we can see in the above code, I have added one button on the Home screen to navigate to next screen for this we have to get navigation from props as below

const { navigation } = props;

To navigate between screens

navigation.navigate("Detail");

2. Details.js

import React from "react";
import { StyleSheet, View, Text } from "react-native";

function Detail(props) {
  const { route } = props;
  const { item } = route.params;
  const { name, desc } = item;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Detail Screen</Text>
      <View style={styles.card}>
        <Text style={styles.cardText}>Name: {name}</Text>
        <Text style={styles.cardText}>{desc}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ebebeb"
  },
  text: {
    color: "#101010",
    fontSize: 24,
    fontWeight: "bold"
  },
  card: {
    width: 350,
    height: 100,
    borderRadius: 10,
    backgroundColor: "#3e78f4",
    margin: 10,
    padding: 10,
    alignItems: "center"
  },
  cardText: {
    fontSize: 18,
    color: "#FFFFFF",
    marginBottom: 5,
    textAlign: "center"
  }
});

export default Detail;

4. Create stack navigator

Import the following components

import * as React from "react";
import { Text, View, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import Detail from "../screens/Detail";

const Stack = createStackNavigator();

We have to define screens inside Stack.navigator and add this Stack.Navigator inside parent NavigationContainer 

1.  MainStackNavigation.js

import * as React from "react";
import { Text, View, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import Detail from "../screens/Detail";

const Stack = createStackNavigator();

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          gestureEnabled: true,      //<--React-navigation 5.0 gesture enabled
          headerStyle: {
            backgroundColor: "#3e78f4"
          },
          headerTitleStyle: {
            fontWeight: "bold"
          },
          headerTintColor: "#FFFFFF"
        }}
      >
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: "Home Screen" }}
        />
        <Stack.Screen
          name="Detail"
          component={Detail}
          options={({ route }) => ({
            title: route.params.item.name
          })}
        />
    
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MainStackNavigator;

5. App.js

Simply define MainStackNavigation in App.js

import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator';

export default function App() {
  return <MainStackNavigator />
}

Note: Data transfer between screen is the same as previous versions of react-navigation

to start expo project use following command

expo start

6. How to use React-navigation 5.0 example