Setting Up Navigation for React Native App

---

After reading this tutorial, you will have basic understanding about react navigation stack.

Prerequisites :

Android Studio Environment:

You can follow this article’s prerequisites section for setting up Android Studio, JDK & environment variables and creating a React Native project.

Npm Packages :

react-native-reanimated, react-native-gesture-handler, react-native-screens, react-native-safe-area-context,@react-native-community/masked-view, react-navigation

We need to install the dependencies first:

npm i react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

and then:

npm i @react-navigation/native @react-navigation/stack

After you install an npm package, you need to rebuild your project and re-run.

Note that if you currently have more than one programs reading your project files, below command may give error.

cd android
gradlew assembleDebug

If you get any errors,

gradlew clean

and re-run

gradlew assembleDebug

We should import react-native-gesture-handler at the very beginning of our project(App.js or index.js)

Open app.js and in the first line enter:

import 'react-native-gesture-handler';

Then wrap our whole application with NavigationContainer after we import it.

We also need to create a router which will define the screens for our navigation.

App.js

In our router we import createStackNavigator and initialize a stack with that function.

After we initialize our Stack we can call <Stack.Navigator> and create Screens for every page we have in our app.

Router.js

In Stack.Screen we have two required props: name and component.

Name is the string that we will call our screen with, component is the component that will be rendered when we navigate to the screen.

Since we wrapped our whole app with NavigationContainer in App.js file, we can use navigation functions in all pages.

We created a function and called this.props.navigation.navigate(‘SecondPage’);

Note that ‘SecondPage’ is the name of our other Stack screen.

LandingPage.js

SecondPage.js

then:

cd ..
react-native run-android

You can clone this project from here via github.

This was just a setup tutorial, if you want to learn more about react navigation you can find the full documentation here.

MTA Team:

Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı

LinkedIn Accounts:

Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı

By MTA Team on June 28, 2020.

Canonical link

Exported from Medium on June 28, 2020.