React Navigation v5 Tutorial Series (Part 1): How to Navigate from One Screen to Another in React Native

Last Updated on March 13, 2020.

Undoubtedly, React Navigation is the most popular library used by react native developers for proper navigation. React Navigation version 5 released recently and it has brought so many changes.

Hence I am beginning a new react native tutorial series where you can learn more about react navigation. In this blog post, let’s see how to navigate from one screen to another in react native using react navigation.

First of all install react navigation library using the following command:

npm install @react-navigation/native

You need to install few more dependencies using the command given below.

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

In iOS, don’t forget to run pod install command to finalize the installations.

In Android, go YourProject/android/app/build.gradle file and add the following lines.

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Now install react navigation stack navigator using the command given below.

npm install @react-navigation/stack

React Navigation v5 onwards you need to import react native gesture handler at the top of your entry file, that is App.js.

import 'react-native-gesture-handler';

Now, let’s start with the ‘real’ stuffs. First of all, create two screens named FirstScreen.js and SecondScreen.js.

FirstScreen.js

import React, {Component} from 'react';
import {View, Button} from 'react-native';

export default class FirstScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Button
          title="Navigate"
          onPress={() => this.props.navigation.navigate('SecondScreen')}
        />
      </View>
    );
  }
}

SecondScreen.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class SecondScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text> Second Screen </Text>
      </View>
    );
  }
}

Now, import these files to App.js and use both NavigationContainer and createStackNavigator to facilitate navigation.

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Run the react native project and you will get the output as given below:

I hope you will find this react navigation v5 tutorial helpful. Thank you for reading.