React Native: Advanced Concepts

16h 35m 38s
English
Paid

Course description

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.

Read more about the course

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.

Requirements:
  • Basic understanding of React Native
Who this course is for:
  • This course is for anyone looking to learn advanced topics of React Native

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 145 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Native: Advanced Concepts

0:00
/
#1: Introduction - Start Here!

All Course Lessons (145)

#Lesson TitleDurationAccess
1
Introduction - Start Here! Demo
01:44
2
Creating React Native Apps
02:24
3
Why Expo?
06:45
4
Creating Our First App
04:14
5
Animation Systems
06:17
6
The Animation Module
09:48
7
Animation from Square One
08:15
8
Moving a Ball
05:24
9
How Animations Work
09:37
10
Animation from Another Angle
08:48
11
Swipe Deck Props
04:18
12
Component Boilerplate
03:52
13
Interplay Between Components
07:35
14
Customizing Individual Cards
13:52
15
The Pan Responder System
10:24
16
Pan Responder's Event Handlers
08:48
17
The Gesture Object
09:55
18
Dragging a Card
11:29
19
Animating Single Cards
04:39
20
How to Rotate Elements
07:00
21
Interpolating Rotation Values
06:15
22
Linear Relations with Interpolation
05:34
23
Limiting Rotation with Interpolation
05:34
24
Springing Back to Default
05:11
25
Detecting Minimum Swipe Distance
07:23
26
Programmatic Animation
08:42
27
Forcing Swipes
04:12
28
Callbacks on Swipe Completion
06:26
29
Writing Reusable Components
04:50
30
The DefaultProps System
04:21
31
Resetting Card Position
06:04
32
Advancing the Deck
06:11
33
Handling Empty Lists
06:50
34
Getting the Cards to Stack
08:32
35
Troubleshooting Flashing Images
03:10
36
Cascading Card List
05:35
37
Animating Advancing Cards
04:23
38
Resetting the Index
05:16
39
Deck Wrapup
03:40
40
Review of Common Auth Flows
08:21
41
The Details of One Time Passwords
10:05
42
Tech Stack with Google Cloud Functions
08:27
43
Traditional Servers vs Google Cloud Functions
08:22
44
Layout of Google Cloud Functions
09:50
45
Firebase Project Setup
07:22
46
Deploying a Firebase Project
04:36
47
Testing Deployed Functions
07:43
48
Project File Structure
05:49
49
The Request and Response Objects
10:50
50
Generating a Service Account
05:49
51
Sanitizing User Inputs
08:55
52
Creating New Users
06:23
53
Testing New User Creation
05:24
54
Texting from Twilio
06:30
55
Twilio Credentials
07:04
56
Accessing Saved Users
06:11
57
Sending Texts to Users
08:46
58
Generating Access Codes
09:06
59
Verifying One Time Passwords
08:01
60
Invalidating Used Codes
07:53
61
Generating JWT's
04:32
62
Transitioning to React Native
02:54
63
App Boilerplate
06:58
64
Defining Instance Properties
08:10
65
Invoking Cloud Functions
06:58
66
Refactoring with Async/Await
09:08
67
Debugging with Async/Await
04:34
68
Async/Await on User Signin
06:00
69
Capturing Tokens
03:53
70
Firebase Auth with a JWT
05:59
71
Breather and Review
07:24
72
App Overview
05:40
73
Screen Walkthrough
06:24
74
More Screen Walkthroughs
06:42
75
App Challenges and Solutions
05:11
76
Screens vs Components
03:13
77
React Native Navigation Options
09:22
78
React Navigation in Practice
10:25
79
Screen Boilerplate
07:06
80
Implementing the First Navigator
07:14
81
Nesting Navigators
07:12
82
Wiring Up Stack Navigators
03:16
83
Class vs Instance Properties
05:41
84
Customization with Header Options
04:44
85
Programmatic Navigation
06:42
86
Styling the NavBar
05:13
87
The Welcome Screen
06:12
88
Styling the Welcome Screen
07:41
89
Even More Welcome Screen Styling!
08:40
90
Navigation from the Welcome Screen
04:58
91
More on Welcome Screen Navigation
10:02
92
Facebook Auth Flow
05:32
93
The Facebook Dev Console
05:51
94
Redux Setup
13:02
95
Using Async Storage
10:07
96
Crazy Async/Await Syntax
13:01
97
Logging in With Facebook
17:47
98
Testing Facebook's Login Flow
10:38
99
World's Biggest Gotcha
09:14
100
The Auth Reducer
05:47
101
Skipping the Auth Screen
08:50
102
Testing Auth Flow
03:52
103
Advancing the Welcome Screen
11:37
104
Resolving the Loading Screen
03:02
105
Showing a Map
05:26
106
Interacting with the MapView
07:24
107
Working around MapView Issues
04:44
108
The Indeed Jobs API
08:56
109
Location API Mismatch
08:59
110
Converting LatLong to Zip Code
10:32
111
Fetching a List of Jobs
07:43
112
Issuing Action Creators from MapScreen
10:05
113
The Jobs Reducer
08:45
114
Navigating from Action Creators
05:30
115
The Deck Screen
03:58
116
Importing the Deck Component
04:25
117
Applying the Swipe Component
06:11
118
Styling Job Cards
08:39
119
Customizing MapViews
10:30
120
Android Compatibility
07:08
121
Dynamic Key Props
04:43
122
One More Swipe Deck Fix
02:09
123
Liking a Job
03:30
124
Considering Only Unique Jobs
10:41
125
The Review Screen
03:21
126
Rendering a List of Liked Jobs
08:01
127
Applying to Jobs
08:20
128
Mapping a Jobs Location
08:26
129
Styling the Job Card
06:34
130
Clearing Liked Jobs
07:37
131
Redirecting Back to the Map
03:24
132
Callback Gotcha
03:27
133
Tab Bar Icons
05:31
134
Tab Bar Config
06:48
135
Android Specific Fixes
04:38
136
Push Notifications and Data Persistence
03:31
137
Persisting Application State
05:26
138
Wiring Up Redux Persist
03:30
139
How Redux Persist Works
06:58
140
Redux Persist - Huge Gotcha!
08:24
141
Push Notification Overview
05:51
142
Registering For Push Notifications
08:18
143
Generating Push Tokens
05:16
144
Testing Notifications
06:16
145
More on Notifications and Wrapup
04:51

Unlock unlimited learning

Get instant access to all 144 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

SQLite, Drawer Navigation & Notifications

SQLite, Drawer Navigation & Notifications

Sources: Simon Grimm
Study SQLite, Drawer Navigation, and local notifications by creating an application for calling a master. You will learn how to use SQLite for storage...
1 hour 45 minutes 49 seconds
State Management with Zustand

State Management with Zustand

Sources: Simon Grimm
Enter the world of efficient and intuitive state management with our in-depth course, “React Native State Management with Zustand.” Learn how to effortlessly...
56 minutes 13 seconds
Event System with Express API and Authentication

Event System with Express API and Authentication

Sources: Simon Grimm
Let's create a full-fledged event system with authentication using React Native and Express API. Together, we will go through all the stages of full-stack...
SQLite с React Native

SQLite с React Native

Sources: Simon Grimm
Dive into local data management with our comprehensive course, “SQLite with React Native.” Learn how to work with SQLite databases in your React Native app...
1 hour 10 minutes 25 seconds
Members Only with JWT Authentication

Members Only with JWT Authentication

Sources: Simon Grimm
Learn how to secure applications using JWT authentication, create enhanced forms with React Hook Form and validation through Zod, work with requests...
2 hours 30 minutes 58 seconds