React Navigation part 3: program to move between screens using react navigation

Introduction :

In our previous tutorials, we have learned how to do the setup for react-navigation and how to arrange different screens in react-navigation. In this tutorial, I will show you how to move between two screens i.e. move forward and backward between two screens.

Initial setup :

We have two screens defined in this app :

1. FirstScreen

2. SecondScreen

App.js is the entry point of this application :

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

export default function App() {
  const Stack = createStackNavigator();

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

Navigate from one to another screen :

All screens defined inside a Stack.navigator, one new prop navigation can be passed. Using this prop, we can trigger one new function navigate to navigate to a new screen.

You need to use the function like navigation.navigate(). For example, we can add one Button in the FirstScreen to navigate to the SecondScreen like below :

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

export default function FirstScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Hello from First Screen</Text>
      <Button
        title="Click me"
        onPress={() => navigation.navigate('SecondScreen')}
      />
    </View>
  );
}

And, our SecondScreen is :

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

export default function SecondScreen(){
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Hello from Second Screen</Text>
    </View>
  );
};

It will look as like below :

Navigate to the same screen :

If you add one Button to navigate to the same screen itself,e.g. if we add the below button in FirstScreen :

<Button
    title="Click me"
    onPress={() => navigation.navigate('FirstScreen')}
/>

It will not do anything because we are already on FirstScreen. If we add this button on SecondScreen, it will move back to the FirstScreen as like it move back if we press the back button.

Using push, goBack and popToTop :

push is used to push one screen on top. i.e. if we use navigation.push(‘FirstScreen’) in FirstScreen, it will push one new FirstScreen. This is useful if you want to add one same screen with different values on top.

navigation.goBack() programmatically go back one screen before. It is same as like pressing the back hardware button on Android or pressing the back button on iOS.

navigation.popToTop is used to move to the first screen.