React Native: Advanced Concepts

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

4.17 (5581 reviews)
Udemy
platform
English
language
Mobile Apps
category
instructor
52,623
students
16.5 hours
content
Mar 2024
last update
$94.99
regular price

What you will 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

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.

Content

Expo Setup

Introduction - Start Here!
Github Links
Creating React Native Apps
Why Expo?
Creating Our First App

Animations with React Native

Animation Systems
The Animation Module
Animation from Square One
Moving a Ball
How Animations Work
Animation from Another Angle
Swipe Deck Props
Component Boilerplate
Deck Data
Interplay Between Components
Customizing Individual Cards

Handling Gestures

The Pan Responder System
Pan Responder's Event Handlers
The Gesture Object
Dragging a Card

Applying Animation Styling

Animating Single Cards
How to Rotate Elements
Interpolating Rotation Values
Linear Relations with Interpolation
Limiting Rotation with Interpolation
Springing Back to Default
Detecting Minimum Swipe Distance
Programmatic Animation
Forcing Swipes
Callbacks on Swipe Completion

Component Reusability

Writing Reusable Components
The DefaultProps System
Resetting Card Position
Advancing the Deck
Handling Empty Lists
Getting the Cards to Stack
Troubleshooting Flashing Images
Cascading Card List
Animating Advancing Cards
Resetting the Index
Deck Wrapup

One Time Password Authentication

Review of Common Auth Flows
The Details of One Time Passwords
Tech Stack with Google Cloud Functions
Traditional Servers vs Google Cloud Functions
Layout of Google Cloud Functions
Firebase Project Setup
Deploying a Firebase Project
Testing Deployed Functions
Project File Structure
The Request and Response Objects
Generating a Service Account
Sanitizing User Inputs
Creating New Users
Testing New User Creation

Twilio Integration

Texting from Twilio
Twilio Credentials
Accessing Saved Users
Quick Note
Sending Texts to Users
Generating Access Codes
Verifying One Time Passwords
Invalidating Used Codes
Generating JWT's

Client Side One Time Passwords

Transitioning to React Native
App Boilerplate
Defining Instance Properties
Invoking Cloud Functions
Refactoring with Async/Await
Debugging with Async/Await
Async/Await on User Signin
Capturing Tokens
Firebase Auth with a JWT
Breather and Review

Bringing it All Together

App Overview
Screen Walkthrough
More Screen Walkthroughs
App Challenges and Solutions
Screens vs Components
React Native Navigation Options
React Navigation in Practice
Screen Boilerplate
Implementing the First Navigator
Nesting Navigators
Wiring Up Stack Navigators
Class vs Instance Properties
Customization with Header Options
Programmatic Navigation
Styling the NavBar
The Welcome Screen
Styling the Welcome Screen
Even More Welcome Screen Styling!
Navigation from the Welcome Screen
More on Welcome Screen Navigation

Facebook Authentication

Facebook Auth Flow
The Facebook Dev Console
Redux Setup
Using Async Storage
Crazy Async/Await Syntax
Logging in With Facebook
Testing Facebook's Login Flow
Quick Note
World's Biggest Gotcha
The Auth Reducer
Skipping the Auth Screen
Testing Auth Flow
Advancing the Welcome Screen
Resolving the Loading Screen

MapViews on React Native

Showing a Map
Interacting with the MapView
Working around MapView Issues
Indeed API Key
The Indeed Jobs API
Location API Mismatch
Converting LatLong to Zip Code
Fetching a List of Jobs
Issuing Action Creators from MapScreen
The Jobs Reducer
Navigating from Action Creators
The Deck Screen
Importing the Deck Component
Applying the Swipe Component
Styling Job Cards
Customizing MapViews
Android Compatibility
Dynamic Key Props
One More Swipe Deck Fix
Liking a Job
Considering Only Unique Jobs
The Review Screen
Rendering a List of Liked Jobs
Applying to Jobs
Mapping a Jobs Location
Styling the Job Card
Clearing Liked Jobs
Redirecting Back to the Map
Callback Gotcha
Tab Bar Icons
Tab Bar Config
Android Specific Fixes

Offline Data Persistence

Push Notifications and Data Persistence
Persisting Application State
Wiring Up Redux Persist
How Redux Persist Works
Redux Persist - Huge Gotcha!

Push Notifications

Push Notification Overview
Registering For Push Notifications
Generating Push Tokens
Testing Notifications
More on Notifications and Wrapup

Extras

Bonus!

Screenshots

React Native: Advanced Concepts - Screenshot_01React Native: Advanced Concepts - Screenshot_02React Native: Advanced Concepts - Screenshot_03React Native: Advanced Concepts - Screenshot_04

Reviews

Ahmed
October 15, 2023
the course needs to be updated: some of the essential points: - still use the class component, no hooks at all - a lot of deprecated libraries , such as, react navigation
Gültekin
July 17, 2023
I'd definitely recommend the course. The instructor has done well, explaining concepts very clear and in an understandable way.
Jesus
July 4, 2023
It has outdated content and it's making it difficult to follow in some sections. The course says it was last updated on May 2023, so I was expecting more of this. However, I have found myself jumping around between the different packages' websites and expo.
Promise
January 11, 2023
Stephen is very engaging and realistic, I can claim to have understood Animations in react native after the first chapter in the course. The one star was removed because the app isn't up to date, the tutorial uses class-based components instead of functional components so I had to struggle with this manually.
Danish
January 5, 2023
Loading issues app hang multiple times. I have check my connection was working fine on other video content platforms.
Young
December 29, 2022
This course is really outdated. It doesn't seem like the questions are being reviewed and answered anymore either. There are absolutely no notes on how to deal with outdated content. I had to spend quite a bit of time outside of the course to research ways around the deprecated features just to follow the course material. Very disappointing. I recommend either spending some time to actually update the course, so that it's up to date. Or just discontinue the class all together.
Jim
December 8, 2022
Usually most of Stephen's courses how outdated it is, can usually work around it, this one was the hardest as literally coding has changed soo much. But still good content tho. I just watched the parts i couldn't do because too old. And i did code the bits i could work around.
Han-Nung
December 4, 2022
Stephen is a good teacher, found useful: OTP Authentication, Twilio integration, Animations, Gestures. I should have done this course when it was first released as it is now a bit outdated on the libraries and apis used in the course. The other students help a lot in Q&A with code updates and workarounds to assist in completing the course.
Ryan
December 2, 2022
Lots of good information but outdated. the course was still useful as it made me fix all the errors when bringing into current versions so I learned alot. It just took me way longer than planned
Anthony
November 25, 2022
Almost every step in he course you will need to make research because is too outdate, I finally give out because is so much outdate you can not even follow the course to continue
Serhii
November 18, 2022
Really good course, a lot of practical things. But a lot of things are outdated, so I should implement it by myself modern way (accordingly to documentation) to make it working. But rewriting was good and funny challenge for me :)
Gentrit
October 29, 2022
Great except the course isn't updated to new functional approach instead of class, but other than that very informative!
Amruth
October 25, 2022
This course is outdated, All the topics discussed, RN, Mapview, Expo APIs and sdks, Push notifications, etc has changed a lot since the time this is recorded. Kindly update the course
Padovan
August 24, 2022
It's a really good course, all explanations we're on point but since it haven't been updated in a long time it was a pain to manage to set navigation e notifications by my self.
Binni
July 4, 2022
Easy to understand and have good sections like: Push Notifications Redux Persist Redux But, The course need explain Typescript too, maybe you can see other course to learn TS because is really important too.

Charts

Price

React Native: Advanced Concepts - Price chart

Rating

React Native: Advanced Concepts - Ratings chart

Enrollment distribution

React Native: Advanced Concepts - Distribution chart
1172996
udemy ID
4/7/2017
course created date
11/12/2019
course indexed date
Bot
course submited by