Stacked app or tabbed navigation, drawer menus and modals, and what's the best place to load user sessions, and other application data.
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.
From the React Native Navigation GitHub repo:
React Native Navigation - Logo
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.
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
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 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
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.