Learn How To Use Screens and Navigation in React-Native

In our next video we Learn How To Use Screens and Navigation in React-Native. So far our topics have included mobile design, layout, and text components, buttons, images, and background images. Now that we understand the building blocks of React-Native its time to start looking at how to build screens and navigate between them.

Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.

Screens and Navigation in React-Native focuses on:

Required Dependencies
Screens
React Navigation

For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo

Screens

Let’s talk about Screens, more specifically what are they? If we were viewing our application in a web browser, then the screen would be your web page. In React Native, a screen is made up of Views, ScrollViews, SafeAreaViews. However, mobile application are rarely made up of a single screen. Therefore, will need to learn how to use the React Navigator to handle the presentation of, and transition between, multiple screens.

React Navigation

The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. Before we begin we need to install some additional dependencies for npm and expo.

Installation and setup

First, you need to install them in your project:

npm install @react-navigation/native

React Navigation is made up of some core utilities we use to create the navigation structures in our apps. These utilities include with @react-navigation/native are:

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

Since we are using Expo we will need to install the expo dependency versions as well:

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

If you have a bare React Native project, install the dependencies with npm:

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

Note: You might get warnings related to peer dependencies after installation. These occurs when incorrect or incompatible versions of packages and found. You can safely ignore most warnings as long as your app builds.

React Navigation

Before mobile apps we had web pages and browsers. In order for us to navigate to different pages on a website we had to use the anchor (<a>) tag. When the user clicks on a link, the URL goes to the browser history stack. Now if the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previous page.

We will need to use React Navigation because React Native doesn’t have a built-in idea of a global history stack like a web browser does.

React Navigation’s stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state – your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens.

A key difference between how this works in a web browser and in React Navigation is that React Navigation’s stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

Before we can use the stack navigation library we need to install another library:

npm install @react-navigation/stack

Once thats done, we are now ready to build and run our app on the device/simulator.