React navigation part 2: Manage multiple screens

Introduction :

In our last tutorial, I have shown you how to install react-navigation in an existing react native project. In this post, I will show you how to arrange multiple screens in react-navigation.

Managing different screens in stacks :

In mobile applications, if you open one screen and move to another screen, the new screen is placed above the current screen. If you press back, the top screen is removed. It is called a navigation stack. We push and pop items to this stack. These types of navigations are handled by a stack navigator.

We also have other types of navigators and different libraries are used for different navigators. We have stack navigator, drawer navigator, bottom tab navigator, material bottom tab navigator, and material top tab navigator.

In this post, I will show you how to install and use stack navigator. Install the below library in your react-native project :

npm install @react-navigation/stack
or
yarn add @react-navigation/stack

Add screens to the navigator :

Create two different screen components :

FirstScreen.js :

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

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

SecondScreen.js :

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>
  );
};

Now, add these screens to a stack navigator in your App.js or root-level file :

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="SecondScreen">
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Explanation :

1. We are creating one stack navigator using createStackNavigator method.

2. We are adding multiple screen components inside Stack.Navigator. Each screen components are defined as Stack.Screen.

3. Each component has one name.

4. The initial route or the screen that we want as the default screen when the app opens is defined by initialRouteName. In this example, we are defining FirstScreen as the initial route.

If you run it, it will give the below output :

If you change the initial route name, it will show a different screen on start.