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