A Beginner's Guide to Understanding React Native Stack Navigation
Tags: javascript, react, beginners, node
Published: 2022-09-30 09:33:48

## Introduction.

Building mobile applications is typically a fairly time-consuming process that entails developing for both iOS and Android. Android uses Java/Kotlin as its native language and iOS uses Objective C/Swift. 

You must learn two languages, each of which has a challenging learning curve, in order to create a cross-platform mobile application. You can now create cross-platform mobile applications using a JavaScript library called React thanks to Facebook's release of React Native. With React Native, a single piece of code can be compiled for both iOS and Android.

Today's lesson will teach you how to set up a React Native project and employ a react Native library to efficiently switch between your mobile screens. 
  
## What is React native and React native stack navigation.

React Native is a JavaScript framework for creating natively rendered mobile applications for iOS and Android. React Native is Facebook's JavaScript library for building user interfaces, but instead of targeting browsers, it targets mobile platforms. 

Thus, web developers can now create native-looking mobile applications using JavaScript, which they are already familiar with. Furthermore, since most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for Android and iOS.

Stack Navigator enables your app to transition between screens by stacking each new screen on top of the previous one. The stack navigator defaults to iOS and Android looks and feels: new screens slide in from the right on iOS, default animations on Android. You can, however, customize the animation to suit your needs.

## Prerequisites

The first thing you need to do is install a text editor on your computer so that you can follow this tutorial. In this case, I will use Visual Studio Code. It's up to you which text editor you use. If you don't already have node installed on your machine you should install node. Install node [here](https://nodejs.org/en/download/)

## Project Setup

To get started with this tutorial, create a folder named _NavigationApp_. Open the folder inside the text editor. VS Code in this case.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k57fqeqgzoa832clmwi4.png)


Click the Terminal in the View option on VS Code navigation. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkq65mlkovfykl9oron8.png)

Your VS code should have the terminal open like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4he8ugatka8h1gha2cq.png)

We need to now set up the react native environment in our workspace which is the _NavigationApp_ folder. We will be using expo in this project. Expo is a open source
Platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

For us to Set up react expo we will run this code


```
yarn global add expo-cli
```


```
expo init ./
```

After running the code in our terminal. Our Vs Code should look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elubdegu86hz491i5mrs.png)

We will now choose the blank minimal workflow by pressing Enter on the keyboard.

Once Expo is set up Our VS Code will now look like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93ql306kmqfyq30y5sbz.png)

Moving on to the next step we will now go on to install some third party libraries by running the following code in the terminal

```
yarn add @react-navigation/native
```


```
yarn add @react-navigation/stack
```


```
yarn add react-native-elements
```


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


Our _package.json_ file should now look like this. Here we can see that the libraries we installed are visible in the _package.json_ file.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ioybjr8j0l69ddssw5t.png)

We will now add this code to our _babel.config.js_ file

```
plugins: ['react-native-reanimated/plugin'],
```


The _babel.config.js_ file should now look like this
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6c90kqer043r6xma98h.png)

Next we will run this code in our app to start up expo

```
expo start
```


When we are developing with expo we are able to see our app live on our smartphone. We will now download the expo go app from our device App store(For iOS users) and Google Play Store( For Android users).

We will now scan the QR code in the terminal inside the expo go app. We should download the app from either the iOS app store or Android google play store The app should bundle up and load up the app right on our device in development mode. We get to see the app we are building right on our Smartphone. Isn't that cool? 

After bundling our cross platform app should look like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcrm4613whdjstp5r26h.jpg)

Now we will open the _app.js_ file inside the root directory folder. We will import react-native-gesture-handler and then import the _NavigationContainer_ from _@react-navigation/native_ using this code and wrap our app inside a _<NavigationContainer>_ tag. Our _app.js_ file should now look like this.

```
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
    </NavigationContainer>
   
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

```

Next we would create a folder in our root folder which in this case is _NavigationApp_ called screens. This folder will carry the JavaScript files of the screens that will be displayed in the app.
Inside the screens folder will create two new files _HomeScreen.js_ and _SecondScreen.js_. All this is done inside our VS Code editor.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c86z48qfahipzro833a0.png)

Next we will install the _es7+ react/redux/react-native_ extension. It should look like this


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4c0j78bao419q5xvwe2.png)
 
Inside our _HomeScreen.js_ file we will type this shortcut code 

```
rnfes 
```

and click enter. Our _HomeScreen.js_ file should now look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4igiy4cmoj2s6ppn9ll.png)

You can now edit the content of the _<Text>_ tag to whatever you want. 

We would now repeat the process for the _SecondScreen.js_ and save.

To continue we will now use the _HomeScreen.js_ inside our _App.js_ file, we will also import _creatStackNavigator_ from _@react-navigation/stack_.

We will now create a Constant function called Stack and inside our app function, we will add the _<Stack.Navigator>_ tag and also the _<Stack.Screen>_ tag. 

The _<Stack.Screen>_ tag is a self closing component that will carry the name and component of all the pages in our app, in this case the _HomeScreen_ and _SecondScreen._ Now we can see our _HomeScreen_ as the first page that our App shows. 

Now we are going to create a button with the _<Button>_ tag which will be imported from react-native-elements that will have an _onPress_ function to stack the next screen over the current screen. We will also add the _{ navigation }_ property to both the _HomeScreen.js_ and _SecondScreen.js_ file.

Our _App.js_ file should now look like this

```
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from "./Screens/HomeScreen";
import { createStackNavigator } from "@react-navigation/stack";
import SecondScreen from "./Screens/SecondScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      <Stack.Screen name ="Home" component = {HomeScreen} />
      <Stack.Screen name="SecondScreen" component = {SecondScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
   
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

```

Our _Homescreen_ code will look like this

```
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Button } from 'react-native-elements'

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>This is the HomeScreen</Text>

      <Button onPress={() => navigation.navigate("SecondScreen")} title="Switch to the second screen" />

    </View>
  )
}

export default HomeScreen

const styles = StyleSheet.create({})
```

Our _SecondScreen_ code will look like this

```
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const SecondScreen = ({ navigation }) => {
  return (
    <View>
      <Text>SecondScreen</Text>
    </View>
  )
}

export default SecondScreen

const styles = StyleSheet.create({})
```

Now our _HomeScreen_ should look like this when we bundle our app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq3e2ok29zdyxg5cgu96.jpg)

When we press the button the _SecondScreen_ page would be stacked on top of the current screen and it would look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nl4tvcufd021tcwofaz.jpg)

## Conclusion
In this article we have learnt how to set up a basic react-native cross-platform app that works on both Android and iOS platform using one codebase. We have also learnt how to install and use react–native libraries in our app, And how to create Text, button, and how to navigate between pages using react-native navigation.