{"id":510,"date":"2021-04-25T04:54:32","date_gmt":"2021-04-25T03:54:32","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=510"},"modified":"2021-05-20T10:23:29","modified_gmt":"2021-05-20T09:23:29","slug":"how-to-create-stack-navigator-using-a-class-component-in-react-native","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/how-to-create-stack-navigator-using-a-class-component-in-react-native\/","title":{"rendered":"How to Create a Stack Navigator Using Class Component in React Native"},"content":{"rendered":"\n

<\/span>Estimated reading time: <\/span>3<\/span> minutes<\/span><\/p>\n\n\n\n

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

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. <\/p>\n\n\n\n

The StackNavigator in React Native provides a way for your app to transition between screens and manage navigation history. <\/p>\n\n\n\n

Here are the steps you can take to quickly create a React Native Stack Navigator, fast and easy.<\/p>\n\n\n\n

Step 1: Add the required dependencies<\/h4>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

On your terminal or command prompt, cd to your project folder and add the following:<\/p>\n\n\n\n

yarn add @react-native-community\/masked-view\nyarn add react-native-gesture-handler\nyarn add react-native-reanimated\nyarn add react-native-safe-area-context\nyarn add react-navigation\nyarn add react-navigation-stack<\/code><\/pre>\n\n\n\n
Step 2: Create your screens<\/h4>\n\n\n\n
Next we will create a Home, About and Contact screens. But first let us create a folder called screens<\/em><\/strong>.<\/p>\n\n\n\n
Home screen: Create a Home.js<\/em> screen and add the following code<\/h4>\n\n\n\n
import React, {Component} from 'react';\nimport {View, Text, StyleSheet} from 'react-native';\n\nclass Home extends Component {\n  render() {\n    return (\n      <View\n        style={{\n          flex: 1,\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}>\n        <Text style={styles.textStyle}>Home<\/Text>\n        <Text\n          style={styles.textStyle}\n          onPress={() => this.props.navigation.navigate('About')}>\n          About\n        <\/Text>\n        <Text\n          style={styles.textStyle}\n          onPress={() => this.props.navigation.navigate('Contact')}>\n          Contact\n        <\/Text>\n      <\/View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  textStyle: {\n    fontSize: 22,\n  },\n});\n\nexport default Home;<\/code><\/pre>\n\n\n\n
Create an About.js<\/em> screen and add the following code:<\/h4>\n\n\n\n
import React, { Component } from \"react\";\nimport { View, Text } from 'react-native';\n\n\nclass About extends Component{\n    render(){\n        return(\n            <View style={{flex:1, flexDirection:'column', alignItems:'center', justifyContent:'center'}}>\n                <Text style={{fontSize: 22}}>\n                    About us\n                <\/Text>\n            <\/View>\n        )\n    }\n}\n\nexport default About;<\/code><\/pre>\n\n\n\n
Create a Contact.js<\/em> and add the below code<\/h4>\n\n\n\n
\nimport React, { Component } from \"react\";\nimport { View, Text } from 'react-native';\n\nclass Contact extends Component {\n    render(){\n        return(\n            <View>\n                <Text>\n                    Contact\n                <\/Text>\n            <\/View>\n        )\n    }\n}\n\nexport default Contact;<\/code><\/pre>\n\n\n\n
Step 3: Create the Stack Navigator<\/h4>\n\n\n\n
Finally we will create a folder called routes<\/strong> and add the Stack.js file<\/p>\n\n\n\n
Stack.js<\/h4>\n\n\n\n
import React, { Component } from \"react\";\nimport { createAppContainer } from \"react-navigation\";\nimport { createStackNavigator } from \"react-navigation-stack\";\nimport About from \"..\/screens\/About\";\nimport Contact from \"..\/screens\/Contact\";\nimport Home from \"..\/screens\/Home\";\n\n\n\nclass Stack extends Component{\n    render(){\n        return(\n            <AppContainer \/>\n        )\n    }\n}\n\nconst myStack = createStackNavigator({\n    'Home' : Home,\n    'About' : About,\n    'Contact' : Contact\n\n}, {\n    initialRouteName: 'Home'\n});\n\nconst AppContainer = createAppContainer(myStack)\n\nexport default Stack;<\/code><\/pre>\n\n\n\n
Result:<\/h4>\n\n\n\n