Stack Navigation in React Native Expo

Add navigation to your mobile application using react-navigation 6

4 min readOct 6, 2021

Hello, Developers! If you are new to react native expo, then you must know about stack navigation. With the help of stack navigation, you can navigate between the screens in a stacked manner. In this article, you will learn about how to add stack navigation to your react native apps. It works fine on both Android and IOS devices. So, let’s start the code with some installation setup of the project.

If you are looking for a video then it’s here:

Installation and Setup

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Open your terminal or command prompt window in your working directory and initialize an expo project using the command: expo init StackNav
Select the blank javascript template and install the dependencies.
After the completion of downloads, navigate to the StackNav directory.
Install the following dependencies package:

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack
expo install react-native-gesture-handler

After the successful installation, you will see something like this on your screen.

Code of Stack Navigation in React Native Expo

Inside the parent project directory, add two javascript files inside a folder.

Login.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'const Login = () => {
    const navigation = useNavigation();
    return (
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
            <Text>This is a Login Screen</Text>
            <TouchableOpacity onPress={()=>navigation.navigate('Signup')}>
                <Text>Move to Signup Screen</Text>
            </TouchableOpacity>
        </View>
    )
}export default Login

Import the npm library and use the react-navigation to navigate to the signup screen. I am using the TouchableOpacity component to make the text pressable.

Signup.js

import React from 'react'
import { View, Text } from 'react-native'const Signup = () => {
    return (
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
            <Text>This is a Signup Screen</Text>
        </View>
    )
}export default Signup

It’s a simple screen with a simple UI.

App.js

import React from 'react';import Login from './Screens/Login';
import Signup from './Screens/Signup';import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen  name="Login" component={Login} />
        <Stack.Screen  name="Signup" component={Signup} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Import the screen components and other components. Add the screen components to the stack screen, as shown above.

Now run this project using the command: npm start

Scan the QR code from your mobile device. You can use both Andriod and IOS devices, as this is compatible with both.

After the successful javascript dependencies build, you will see stack navigation in action.

Stack Navigation in react native expo

Well, That’s it.

Congrats, you successfully added stack navigation to your mobile application.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me at (freelance.rohit7@gmail.com)