React Native – Switch Navigation

React Native Navigation is used to switch from one screen to another in the desired manner. Switch Navigator is basically used in the login screens or Authentication Screens. As there is not back button in Switch Navigator means we cannot move to the last screen from which we came through navigation. I will give you a proper example so that you can understand this topic clearly.

As we know it is the part of React Navigation so we have to install the required react-navigation@3.11.1 package.

Install react-navigation dependency to import createAppContainer. If you install react-navigation@3.11.1 then createswitchNavigator present inside the react-navigation. Otherwise you have to install independently other dependencies.

npm install react-navigation –save

2. Other supporting libraries for react-navigation

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

CocoaPods Installation
Please use the following command to install CocoaPods

cd ios && pod install && cd ..

Project Structure

To start with this Example you need to create a directory named pages in your project and create two files Screen1.js and Screen2.js

App.js

import React, { Component } from 'react';

import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
const App = createSwitchNavigator({
  Screen1: { screen: Screen1 }, 
  Screen2: { screen: Screen2 }, 
  },
  {
    initialRouteName: 'Screen1',
  }
);
export default createAppContainer(App);

Screen1.js

//This is an example code for Navigation Drawer with Custom Side bar//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
// import all basic components

export default class Screen1 extends Component {
  //Screen1 Component
  render() {
    return (
      <TouchableOpacity style={styles.MainContainer} onPress={()=>this.props.navigation.navigate("Screen2")}>
        <Text style={{ fontSize: 23 }}> Screen 1 </Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

Screen2.js

//This is an example code for Navigation Drawer with Custom Side bar//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components

export default class Screen2 extends Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});