react native

How to Create a Stack Navigator Using Class Component in React Native

Estimated reading time: 3 minutes

According to the React Native Navigation documentation, the StackNavigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Unlike the web browser, react native doesn’t have a built-in API to handle screen navigation. If you want to make use of navigation in your project, you will have to specify what type of navigation you want to use and add the respective dependencies.

The StackNavigator in React Native provides a way for your app to transition between screens and manage navigation history.

Here are the steps you can take to quickly create a React Native Stack Navigator, fast and easy.

Step 1: Add the required dependencies

Navigation in React is a little different from what is generally obtainable, especially in HTML where you just have to wrap the url or the file path in anchor tags. In React, however, you have to make sure that you have added the needed dependencies. These include the navigation dependency, gesture handler, masked view as well as the stack navigator itself.

To put it simply, for every component that you want to use in React Native, you will need to make sure there is a supported dependency for it.

On your terminal or command prompt, cd to your project folder and add the following:

yarn add @react-native-community/masked-view
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-safe-area-context
yarn add react-navigation
yarn add react-navigation-stack

Step 2: Create your screens

Next we will create a Home, About and Contact screens. But first let us create a folder called screens.

Home screen: Create a Home.js screen and add the following code

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

class Home extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text style={styles.textStyle}>Home</Text>
        <Text
          style={styles.textStyle}
          onPress={() => this.props.navigation.navigate('About')}>
          About
        </Text>
        <Text
          style={styles.textStyle}
          onPress={() => this.props.navigation.navigate('Contact')}>
          Contact
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textStyle: {
    fontSize: 22,
  },
});

export default Home;

Create an About.js screen and add the following code:

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


class About extends Component{
    render(){
        return(
            <View style={{flex:1, flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
                <Text style={{fontSize: 22}}>
                    About us
                </Text>
            </View>
        )
    }
}

export default About;

Create a Contact.js and add the below code


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

class Contact extends Component {
    render(){
        return(
            <View>
                <Text>
                    Contact
                </Text>
            </View>
        )
    }
}

export default Contact;

Step 3: Create the Stack Navigator

Finally we will create a folder called routes and add the Stack.js file

Stack.js

import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import About from "../screens/About";
import Contact from "../screens/Contact";
import Home from "../screens/Home";



class Stack extends Component{
    render(){
        return(
            <AppContainer />
        )
    }
}

const myStack = createStackNavigator({
    'Home' : Home,
    'About' : About,
    'Contact' : Contact

}, {
    initialRouteName: 'Home'
});

const AppContainer = createAppContainer(myStack)

export default Stack;

Result:

React Native Stack Navigator

Congratulations! You have successfully created a React Native Stack Navigator.

Watch Video Tutorial instead?

Recent Posts

South Korea bans downloads of DeepSeek AI until further notice

The South Korean government announced on Monday that it had temporarily halted new downloads of…

1 day ago

Which programming language is best for software development?

As a software developer, choosing the right programming language for software development can be a…

4 days ago

What is a server farm?

A server farm, also known as a server cluster or data center, is a collection…

5 days ago

Elon Musk’s Starlink satellite internet service is awaiting authorization to begin operations in Pakistan.

Pakistan's mobile and broadband internet speeds rank in the bottom 10 percent globally, according to…

1 week ago

React Native Styling Guide

React Native is a popular framework for building cross-platform mobile applications using JavaScript and React.…

1 week ago

You can now customize your Android home screen shortcut with any widget of your choice

Google is not only passionate about developing innovative apps and services but also about finding…

2 weeks ago