This video is available to students only

Navigation

Stacked app or tabbed navigation, drawer menus and modals, and what's the best place to load user sessions, and other application data.

Prerequisites#

It is highly recommended that you go through the lessons of Module 1 - Getting Started before proceeding with any other module. These lessons build up to the type of learning we are trying to achieve here and lay the foundation for the entire course.


We will be using React Native Navigation for managing app navigation in this course. The primary reason for considering React Native Navigation is that it provides a native implementation on both platforms. So, this does add to the work JavaScript thread needs to do.

From the React Native Navigation GitHub repo:

React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. The JavaScript API is simple and cross-platform.

React Native Navigation

React Native Navigation - Logo

React Navigation is also a good, widely-used alternative, though it is a purely a JavaScript-based implementation. For the purpose of this course, and based on my past experiences with building apps, we will be using React Native Navigation.

Apps are either single screen (called stacked apps) or have tabbed navigation, with a bottom bar that helps navigate different sections of the app. The choice depends on the kind of experience we are looking to build for the users, though the tabbed navigation has become the de-facto choice over recent years, and is the most commonly seen. Single screen apps can achieve similar navigation with the help of a drawer menu, which seems to be inspired by mobile websites.

Let's look at each of them.

Jumpstart App

Single screen#

The boilerplate code starts with a single screen setup. This is called Splash screen in the code.

Single screen apps are generally called stacked apps, as the screens that are navigated to are pushed onto the root screen, creating a sort of stack. Stacked apps are configured to have the familiar iOS and Android animations: new screens slide in from the right on iOS, and fade in from the bottom on Android.

The Splash screen behaves as the root screen for the app, with users performing primary functions from it. We can set any screen as the root screen of the app using Navigation.setRoot as shown below.

Additionally, if you need to add a drawer menu to the app, go to the navigator section in the app where the showSplash method is declared, and make the following changes:

Drawer - side menu navigation

The Drawer is just like any other screen, so you can build whatever you want in it. It can be a menu list to navigate to different sections of the app, or a screen that provides some quick information, or may just be an About section.

Tabbed navigation#

Tabbed navigation apps have a tab bar at the bottom part of the app. These tabs are linked to individual screens, and are accessed on clicking the respective tabs. This is very popular and almost all apps default to this type of experience. Users are most accustomed to this type of navigation, so it is easier for them, landing in a familiar landscape without adding to their cognitive load.

The boilerplate app launches with a splash screen and then moves to tabbed navigation. This kind of setup is great for including initial marketing screens, or a user login, and then taking the user to the main app.

If you want to launch with a tabbed navigation as default, navigate to ./src/navigators/index.tsx and replace the showSplash() method with tabbedNavigation(). This method is defined in ./src/navigators/navigation.tsx.

I would however advise that you keep the splash screen, as this is a great place to load app data, place your user login, or any other data you may later want to save to AsyncStorage, or if any data needs to be fetched from the server for the app to function properly.

Start a new discussion. All notification go to the author.