React Native: Advanced Concepts

16h 35m 38s
English
Paid

Discover the advanced concepts of React Native through an engaging and practical learning experience. This course offers hands-on projects, where you'll build three different applications, each showcasing unique features of React Native. By applying each concept in a real-world app, you'll grasp the best use cases for each feature.

Course Projects

1) Tinder-like Swipe Deck

Master the animated component by creating a stack of interactive cards that users can swipe left or right. This exercise will familiarize you with touch input using the PanResponder, element movement with the Animated module, and animation value extrapolation via the Interpolation system.

2) One Time Password Authentication

Explore backend development with a modern authentication flow using phone numbers as unique identifiers. Implement Twilio API to send verification codes via text, while securing logic with Firebase's Google Cloud Functions.

3) Job-Search App: Tinder for Jobs

Build a comprehensive job search app featuring a welcome-screen tutorial, Facebook authentication, and map components. Utilize Indeed's Job API to present users job listings based on location, allowing them to apply to chosen jobs seamlessly.

Platform Compatibility

Supports both OSX and Windows, enabling development for iOS and Android platforms.

Course Learnings

  • Implement complex Animation systems
  • Bootstrap apps using the Expo platform
  • Navigate through apps with React-Navigation
  • Integrate automated Push Notifications
  • Secure authentication with One Time Passwords via Twilio
  • Ensure reliability through Offline Data Persistence
  • Guide users with Welcome Tutorial pages
  • Authenticate with Facebook OAuth
  • Extend backend capabilities using Google Cloud Functions
  • Implement cross-platform MapView components

Course Philosophy

This course is designed to provide a comprehensive understanding of React Native in an orderly and intuitive manner, just the way I wished I had learned it.

Prerequisites

Requirements:
  • Basic understanding of React Native

Target Audience

Who this course is for:
  • Individuals eager to delve into advanced React Native topics

What You'll Accomplish

  • Create advanced applications with expert React Native features
  • Develop smooth and high-performance animations
  • Construct new React Native apps with Expo
  • Master the latest navigation techniques in React Native
  • Integrate backend logic in Firebase with Google Cloud Functions
  • Implement cross-platform Push Notifications
  • Manage offline scenarios using Redux Persist

About the Authors

Stephen Grider

Stephen Grider thumbnail
Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 145 lessons

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