How to navigate between screens react native

Hi guys, In this article, we will learn about how to navigate between screens react native. In React native we have to use the React-Navigation library to navigate between screens, you need to install this library in your project also you have to install supporting libraries which is mandatory without this libraries react-navigation will not work properly so let’s start with an example

1. Create a new project

react-native init ProjectName

2. Install the following dependencies

npm install react-navigation

After successful installation run the following command to install the supporting dependencies

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

finally, install the following dependency

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context

3. Create CartScreen.js

I have created one screen CartScreen.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

class CartScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'This is cart screen',
    };
  }

  static navigationOptions = ({navigation}) => {
    return {
      title: 'CartScreen',
      headerStyle: {
        backgroundColor: '#0570E9',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    };
  };

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontSize: 25}}>{this.state.username}</Text>
      </View>
    );
  }
}

export default CartScreen;

4. App.js

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import CartScreen from './Components/CartScreen';   <--- Import your screens

class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: 'Home',
      headerStyle: {
        backgroundColor: '#0570E9',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    };
  };
  render() {
    return (
      <TouchableOpacity
        style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
        onPress={() => this.props.navigation.navigate('CartScreen')}>
        <Text style={{fontSize: 25}}>Go to Cart screen</Text>
      </TouchableOpacity>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  CartScreen: {
    screen: CartScreen,
  },
});

export default createAppContainer(AppNavigator);

5. Output

Thank you 🙂