React Native Advanced

Master the advanced topics of React Native: Animations, Maps, Notifications, Navigation and More!

Last updated 2022-01-10 | 4.2

- Make compelling applications using expert-level features of React Native
- Create amazingly smooth and performant animations
- Build new React Native apps with Expo

What you'll learn

Make compelling applications using expert-level features of React Native
Create amazingly smooth and performant animations
Build new React Native apps with Expo
Understand the latest Navigation options for new React Native apps
Add logic to your Firebase backend with Google Cloud Functions
Update your users with cross platform Push Notifications
Handle your users going offline with Redux Persist

* Requirements

* Basic understanding of React Native

Description

Note: This course assumes you've got the basics of React Native down.  Check out my course 'The Complete React Native and Redux' course, its the perfect preparation!

Go beyond the basics of React Native!  This course will teach you the advanced topics you need to make a #1 best-selling app.

Push Notifications? You will learn it.  In Depth Animations? Included.  Offline Data PersistenceOf course!

------------------------------

What Will You Build?

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples.  In this course we'll build three separate apps with increasing complexity, each of which will profile different features of React Native.  By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

1) Build a Tinder-like Swipe Deck. Yes, the classic animated component!  We'll make a big stack of beautiful cards that a user can slide around the screen, swiping right to 'like' an item, or 'left' to dislike an item.  This warmup will get you familiar with interpreting touch input through the PanResponder system, moving elements around with the Animated module, and turning extrapolating animation values through the Interpolation system.

2) Dive into the backend with One Time Password authentication. Ever been prompted to sign in using a code that gets texted to you?  One Time Passwords are a new authentication flow that leverages a user's phone number as their unique identifying token.  We will use the Twilio API to send a text message to a user to verify their identity, while securing our business logic into Firebase's new Google Cloud Functions.

3) Your own Job-Search app.  Tinder for jobs! This app is is 100% feature complete!  We'll build an app with a full welcome-screen tutorial for our new user's, Facebook authentication, and map components.  The user will be presented with a list of jobs to like or dislike based on their location by leveraging Indeed's Job API, then follow up and apply to their choice jobs.

Both OSX and Windows supported - develop iOS or Android!

------------------------------

Here's what we'll learn:

  • Learn the theory and practice of implementing complex Animation systems
  • Bootstrap your app using the new Expo platform
  • Navigate your user around using React-Navigation
  • Engage your users with automated Push Notifications
  • Enhance authentication flows in your app with One Time Passwords with Twilio
  • Increase your app's reliability with Offline Data Persistence
  • Educate your users on how to use your app with Welcome Tutorial pages
  • Authenticate your users using Facebook OAuth
  • Go beyond the mobile front end with Google Cloud Functions: Add custom logic to your Firebase backend
  • Locate your users with cross-platform MapView components


I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who this course is for:

  • This course is for anyone looking to learn advanced topics of React Native

Course content

13 sections • 150 lectures

Introduction - Start Here! Preview 01:43

Github Links Preview 00:03

Creating React Native Apps Preview 02:23

Why Expo? Preview 06:44

Creating Our First App Preview 04:13

Animation Systems Preview 06:15

The Animation Module Preview 09:47

Animation from Square One Preview 08:14

Moving a Ball Preview 05:22

How Animations Work Preview 09:36

Animation from Another Angle Preview 08:47

Swipe Deck Props Preview 04:17

Component Boilerplate Preview 03:51

Deck Data Preview 00:18

Interplay Between Components Preview 07:34

Customizing Individual Cards Preview 13:51

The Pan Responder System Preview 10:23

Pan Responder's Event Handlers Preview 08:47

The Gesture Object Preview 09:54

Dragging a Card Preview 11:28

Animating Single Cards Preview 04:38

How to Rotate Elements Preview 06:59

Interpolating Rotation Values Preview 06:14

Linear Relations with Interpolation Preview 05:33

Limiting Rotation with Interpolation Preview 05:33

Springing Back to Default Preview 05:10

Detecting Minimum Swipe Distance Preview 07:22

Programmatic Animation Preview 08:41

Forcing Swipes Preview 04:11

Callbacks on Swipe Completion Preview 06:25

Writing Reusable Components Preview 04:49

The DefaultProps System Preview 04:20

Resetting Card Position Preview 06:03

Advancing the Deck Preview 06:10

Handling Empty Lists Preview 06:49

Getting the Cards to Stack Preview 08:31

Troubleshooting Flashing Images Preview 03:09

Cascading Card List Preview 05:34

Animating Advancing Cards Preview 04:22

Resetting the Index Preview 05:15

Deck Wrapup Preview 03:39

Review of Common Auth Flows Preview 08:20

The Details of One Time Passwords Preview 10:04

Tech Stack with Google Cloud Functions Preview 08:26

Traditional Servers vs Google Cloud Functions Preview 08:21

Layout of Google Cloud Functions Preview 09:49

Firebase Project Setup Preview 07:21

Deploying a Firebase Project Preview 04:35

Testing Deployed Functions Preview 07:42

Project File Structure Preview 05:48

The Request and Response Objects Preview 10:49

Generating a Service Account Preview 05:48

Sanitizing User Inputs Preview 08:54

Creating New Users Preview 06:22

Testing New User Creation Preview 05:23

Texting from Twilio Preview 06:29

Twilio Credentials Preview 07:03

Accessing Saved Users Preview 06:10

Quick Note Preview 00:27

Sending Texts to Users Preview 08:45

Generating Access Codes Preview 09:05

Verifying One Time Passwords Preview 08:00

Invalidating Used Codes Preview 07:52

Generating JWT's Preview 04:31

Transitioning to React Native Preview 02:53

App Boilerplate Preview 06:57

Defining Instance Properties Preview 08:09

Invoking Cloud Functions Preview 06:57

Refactoring with Async/Await Preview 09:07

Debugging with Async/Await Preview 04:33

Async/Await on User Signin Preview 05:59

Capturing Tokens Preview 03:52

Firebase Auth with a JWT Preview 05:58

Breather and Review Preview 07:23

App Overview Preview 05:39

Screen Walkthrough Preview 06:23

More Screen Walkthroughs Preview 06:41

App Challenges and Solutions Preview 05:09

Screens vs Components Preview 03:12

React Native Navigation Options Preview 09:20

React Navigation in Practice Preview 10:24

Screen Boilerplate Preview 07:05

Implementing the First Navigator Preview 07:13

Nesting Navigators Preview 07:11

Wiring Up Stack Navigators Preview 03:15

Class vs Instance Properties Preview 05:39

Customization with Header Options Preview 04:43

Programmatic Navigation Preview 06:41

Styling the NavBar Preview 05:12

The Welcome Screen Preview 06:11

Styling the Welcome Screen Preview 07:40

Even More Welcome Screen Styling! Preview 08:39

Navigation from the Welcome Screen Preview 04:57

More on Welcome Screen Navigation Preview 10:01

Facebook Auth Flow Preview 05:31

The Facebook Dev Console Preview 05:50

Redux Setup Preview 13:00

Using Async Storage Preview 10:06

Crazy Async/Await Syntax Preview 13:00

Logging in With Facebook Preview 17:46

Testing Facebook's Login Flow Preview 10:37

Quick Note Preview 00:16

World's Biggest Gotcha Preview 09:13

The Auth Reducer Preview 05:46

Skipping the Auth Screen Preview 08:49

Testing Auth Flow Preview 03:51

Advancing the Welcome Screen Preview 11:36

Resolving the Loading Screen Preview 03:01

Showing a Map Preview 05:25

Interacting with the MapView Preview 07:23

Working around MapView Issues Preview 04:43

Indeed API Key Preview 00:12

The Indeed Jobs API Preview 08:55

Location API Mismatch Preview 08:58

Converting LatLong to Zip Code Preview 10:31

Fetching a List of Jobs Preview 07:42

Issuing Action Creators from MapScreen Preview 10:04

The Jobs Reducer Preview 08:44

Navigating from Action Creators Preview 05:29

The Deck Screen Preview 03:57

Importing the Deck Component Preview 04:24

Applying the Swipe Component Preview 06:10

Styling Job Cards Preview 08:38

Customizing MapViews Preview 10:29

Android Compatibility Preview 07:07

Dynamic Key Props Preview 04:42

One More Swipe Deck Fix Preview 02:08

Liking a Job Preview 03:29

Considering Only Unique Jobs Preview 10:40

The Review Screen Preview 03:20

Rendering a List of Liked Jobs Preview 08:00

Applying to Jobs Preview 08:19

Mapping a Jobs Location Preview 08:24

Styling the Job Card Preview 06:33

Clearing Liked Jobs Preview 07:36

Redirecting Back to the Map Preview 03:23

Callback Gotcha Preview 03:26

Tab Bar Icons Preview 05:30

Tab Bar Config Preview 06:47

Android Specific Fixes Preview 04:37

Push Notifications and Data Persistence Preview 03:30

Persisting Application State Preview 05:25

Wiring Up Redux Persist Preview 03:29

How Redux Persist Works Preview 06:57

Redux Persist - Huge Gotcha! Preview 08:23

Push Notification Overview Preview 05:50

Registering For Push Notifications Preview 08:17

Generating Push Tokens Preview 05:15

Testing Notifications Preview 06:15

More on Notifications and Wrapup Preview 04:50