React Native – Stack Navigation

React Native Navigation is used to navigate or go from one screen to another in the desired manner. Stack Navigator is basically used in the navigation from one screen to another back and forth. As there is back button in Stack Navigator means we can move to the last screen from which we came through navigation.All the screens are placed in a stack and we can set the screens according to our requirements means which screen should come first. 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 createStackNavigator 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,createStackNavigator } from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
const App = createStackNavigator({
  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',
  },
});

5 1 vote
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x