A quick start with Navigation in React-Native for beginners
By: Abdulrahman Raies
Tags: JavaScript, Navigation, Button, React Native, Coding

PART 2: React Navigation

Introduction and Installation

In the apps, have you ever thought about how the transitions between screens are done? the answer to this question is React Navigation. React Navigation provides a stack navigator for users to move between screens, pushing and popping items from the stack and manage navigation history.

Before getting started with react-navigation, you need to install it. Open the link below and follow the steps.

Now after you install react-navigation, run the following command in the terminal inside the project to install the stack navigator library.

npm install @react-navigation/stack

or

yarn add @react-navigation/stack

Using stack navigator to navigate between screen components

In this section, we will create multiple screens and navigate between them using a stack navigator. So let’s begin by first creating a /components folder in the root of our project. Then we create three files namely HomeScreen.js , FirstScreen.js and SecondScreen.js

The project folder should look like what’s shown below:

Now we want to implement our screens (also called pages)

As you see above we create a home screen and the navigation prop is passed down to our screen components. On this page, we have three views components. The first one contains the text component. the second one contains a button component and the third one also contain a button component.

Now we defined two buttons, one for the first screen and the other for the second screen, also we specified the title and onPress prop.

onPress prop allows us to move to another screen when we press on it by writing navigation.navigate('FirstScreen') , and as you see in lines 11 and 14, inside round brackets, we write the name of the screen that we want to move to it.

Then we will do the same thing for the first screen and second screen.

As you see in line 12 in FirstScreen and line 11 in SecondScreen we used navigation.goBack(). The goBack method lets us go back to the previous screen in the navigator and by default goBack will go back from the screen that it is called from.

Now let’s move to the App.js file

We make some changes to App.js . We import what we need from react-navigation and implement our navigation there.

It is useful to implement our navigation in the root App.js file because the component exported from App.js is the entry point (or root component) for a React Native app, and every other component is a descendant.

In lines 5 and 6 we import NavigationContainer and createStackNavigator.

NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure.

createStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator . Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

In lines 7,8 and 9 we import our screen components.

In line 11 we create our object stack that provides a way for our app to transition between screens.

Now our stack has three routes, a Home route, FirstScreen route and SecondScreen route. A route can be specified by using the Screen component. The Screen component accepts a name prop which corresponds to the name of the route we will use to navigate, and a component prop which corresponds to the component it'll render. Also it accepts an optional prop named options prop as written in line 17.

Finally, our results should be as following

In the next post, we will work on how to pass parameters to routes and explore various navigation patterns used in mobile apps and how to achieve them using React Navigation library.