Course Menu

Introduction

React Navigation

React Navigation is a library for cross platform navigation in React Native. Its focus is providing the flexibility of React Native while mimicking the screen transitions and gestures to match both iOS and Android. The benefits of that are you can then customize them to meet your needs if the defaults aren't what you want.

Additionally with the release of React Native Screens it can even interop with the Native platform navigation, UINavigationController for iOS and Fragments on Android. This allows to optimize the memory usage for screens that are under the view stack and also simplify the native node hierarchy. However this removes some flexibility with how the screens

This course will focus on React Navigation and its use with React Native. Although it supports web we will not focus on what that looks like. We will focus on v5 of React Navigation and will not touch on any legacy versions.

Course Structure

We're first going to go over all the navigator types. We'll cover Stack, Tab, and Drawer navigators. We'll look at the basic setup, and then walk through customizing every aspect of the navigator and screen. Next we'll combine navigators in various combinations and cover why you would combine them with each of the different configurations.

With this knowledge we'll apply it to common real world situations. Including modals, authentication, deep linking and more. We'll end with a glance at some advanced React Navigation topics.

Learning Outcomes

  • How to setup react navigation
  • Know when to reach for a specific navigator
  • Accomplish common real world patterns as seen in other applications
  • Understand how to combine navigators to achieve desired navigation
  • Learn how to use Deep Linking to navigate into the desired screen from outside your app
  • Customize the look to achieve desired UX
  • Customize transitions between screens

What You Need to Know

We will cover some basics of React Native but you should be familiar with JavaScript, some React and some React Native. This course will help take you from 0 knowledge of React Navigation to being able to build any navigation flow in your React Native application.