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.

Learn How To Use Screens and Navigation in React-Native

Additional Resources

  • React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. React can be useful as a base in the development of single-page or mobile applications.
  • Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser.
  • Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
  • Android software development is the process by which applications are created for devices running the Android operating system.
  • Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.

This series comes from our mentoring/mastermind classes.  These classes are virtual meetings that focus on how to improve our technical skills and build our businesses.  After all the goals of each member vary.  However, this diversity makes for great discussions and a ton of educational value every time we meet.  We hope you enjoy viewing this series as much as we enjoy creating it.  As always, this may not be all new to you, but we hope it helps you be a better developer.

Other Classes, You Might Consider:

One Reply to “Learn How To Use Screens and Navigation in React-Native”

  1. Pingback: Tab Navigation in React-Native

Leave a Reply