With React Native, the most important thing is to understand the ecosystem and how it comes together to create an app. By understanding the overall architecture, we will be able to take the full of advantage the platform.

The course will start by covering the fundamentals like setting up the navigation, setting up the screens, styles, and the UI elements, before moving on to more advanced topics such as state management, crash/error reporting, setting up analytics and middlewares, debugging, and performance optimizations. We will also learn how to avoid/fix frame drops - possibly the most watched parameter of any UI application.

We will also build a Design System and will follow the [Atomic Design Pattern](https://atomicdesign.bradfrost.com/chapter-2/) of building layouts. A Design System primarily consists of three parts:
- UI Inventory and Patterns
- Typography
- Spacing and Styles

We will cover these in detail through the modules of the course. We will also learn about the React Native best practices, how to avoid rabbit holes, and focus on building a performant app.

**This is an opinionated way of building apps with React Native**. The fundamentals discussed in the course, like Atomic Design Pattern and Design System, can be applied to building any UI application, not just ones using React Native.

## One Complete App

The course comes with one complete eCommerce sample app that is discussed through the modules of the course.

## Up-to-date

The course builds on an open-source boilerplate template and is kept up to date with React, React Native and dependent library versions. It is also updated with the latest APIs and libraries that are introduced, like Hooks, hermes, flipper etc.

## Why this course

React Native for JavaScript Developers using TypeScript is based on years of experience in building React Native apps on production. The open-source boilerplate code discussed in the course is the platform for multiple apps on App Store and Play Store today. One of them being a Unicorn.

We will take a **Product** based development approach to building apps. React Native abstracts out a lot of platform specific nuances, so wouldn't focusing on building the app as an experience make the most sense. The design pattern will help us exactly with that, and we will put together a structure that is both scalable and extensible. This architecture also helps keep the design separate from the development.

At the end of this course, you will not only be able to build real-world apps with React Native, but also have the fundamentals of building any enterprise UI application.

Discord [channel](https://discord.gg/fz43pNnh)

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.

The newline Guide to React Native for JavaScript Developers using TypeScript

---
title: Getting Started With React Native Navigation
slug: navigation
privateVideoUrl: https://fullstack.wistia.com/medias/grthszs4ay
isPublicLesson: false
playerCode: #1D5C72
role: LESSON
description: 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](about-the-course) 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.

* * *

## Navigation

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](https://github.com/wix/react-native-navigation) 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](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-react-native-for-javascript-developers/module_02/lesson_01.00/public/assets/rnn-logo.png)

_React Native Navigation - Logo_

:::note
[React Navigation](https://reactnavigation.org/) 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](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-react-native-for-javascript-developers/module_02/lesson_01.00/public/assets/screens.png)

### 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.

```tsx { actualFilename=./protected/src/navigator_single.js endLine=40 startLine=31 statedFilename=./src/navigators/navigation.tsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-native-for-javascript-developers/module_02/lesson_01.00/protected/src/navigator_single.js#L31 }
export const showSplash = () => {
  Navigation.setRoot({
    root: {
      component: {
        id: SCREENS.Splash,
        name: SCREENS.Splash,
      }
    },
  });
};
```

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:

```tsx { actualFilename=./protected/src/navigator_single.js endLine=58 startLine=42 statedFilename=./src/navigators/navigation.tsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-native-for-javascript-developers/module_02/lesson_01.00/protected/src/navigator_single.js#L42 }
export const showSplash = () => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            name: SCREENS.Drawer,
            id: 'drawerComponentId',
          },
        },
        center: {
          component: { name: SCREENS.Splash },
        }
      },
    },
  });
};
```

_ 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`.

```tsx { actualFilename=./protected/src/navigator_tabbed.js endLine=30 startLine=18 statedFilename=./src/navigators/index.tsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-native-for-javascript-developers/module_02/lesson_01.00/protected/src/navigator_tabbed.js#L18 }
const app = () => {
  Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
      /**
       * Add default options right here
       */
      topBar: { visible: true, elevation: 0 },
    });

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