Add React Native and Expo App Navigation with react-navigation

Installing a react-navigation library

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Creating a React Native Login course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Creating a React Native Login, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Creating a React Native Login

  • [00:00 - 00:08] In this lesson, we are going to install a React Navigation Library. This is the most popular library for routing and navigation in React Native apps.

    [00:09 - 00:24] It also supports applications created with Expo, another reason we have chosen it for our app. Every good app is a good navigator, just like a cross-country trip, and a good navigator takes us from place to place in our app, ensuring that we get to where we want to go.

    [00:25 - 00:34] A button navigator takes us well, where the navigator wants to go. We get frustrated and put the app down, lowering user engagement.

    [00:35 - 00:56] You might ask what navigation is used for? Well, the most common cases are, bringing the user to different screens in the app, providing a back button to bring the users back to the previous screen, passing information from screen to screen, creating a navigation menu in our app, such as bottom navigation or drawer.

    [00:57 - 01:05] React Navigation easily meets all the use cases just by default. We have to remember that navigation on Android and iOS is a little different.

    [01:06 - 01:18] In Android, we have a back button, and on iOS, there is a finger gesture for moving to the previous screen. With React Navigation, we don't have to worry about all that because it's done for us by default.

    [01:19 - 01:36] We do still have to remember those little differences when implementing our user interface. For example, in most cases, we don't need the back button on our screens, because users are already familiar with the system way of going back, like the back button in Android or iOS and go back gesture.

    [01:37 - 01:43] Before we can use navigation, we must understand a few terms. The React Navigation glossary of terms is very helpful.

    [01:44 - 01:53] I would recommend going briefly through it, because there are the basic you should know before using the library. Now, let's install all the dependencies we need.

    [01:54 - 02:01] We have to run two commands. The first one installs the root dependency, and second one, since we are using Expo.

    [02:02 - 02:09] There are a few dependencies that you might be surprised to see. Those extra dependencies are used for taking care of animations and gestures.

    [02:10 - 02:23] For example, React Native Reanimated is a well-known library that React Navigation uses for making transitions between screens. We are all set up and our application is ready for implementing navigation.

    [02:24 - 02:32] In the next lesson, we are going to create a few simple screens and perform transitions between them. Thank you and see you in the next lesson.