CF

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 is one of the longest-running and most prolific instructors on Udemy, with a catalog covering essentially every major JavaScript framework, plus Docker, Kubernetes, AWS, and the broader full-stack development landscape. His teaching style is patient and project-oriented — most of his courses are structured around building a substantial application from scratch rather than working through disconnected tutorial examples.

The catalog covers React, Redux, Next.js, Vue, Angular, GraphQL, Node.js, Docker / Kubernetes, AWS infrastructure, React Native and Flutter for mobile, the algorithm / data-structure interview prep track, and the modern TypeScript / Bun / Rust adjacent material that working JavaScript developers increasingly encounter. Few independent instructors have maintained Stephen's breadth this consistently for this long.

The CourseFlix listing under this source carries over 25 Stephen Grider courses spanning that range. Material is paid; Stephen Grider courses are typically sold individually on Udemy. Courses are aimed primarily at developers picking up a specific technology through working through a complete project.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prerequisites are needed for this course?
Before enrolling in this course, students should have a basic understanding of React and JavaScript. Familiarity with mobile app development concepts and some experience with React Native would also be beneficial, as the course covers advanced topics such as animation systems, authentication flows, and integration of APIs.
What types of applications will I build during this course?
The course features three main projects: a Tinder-like Swipe Deck to master animated components, a One Time Password Authentication system using the Twilio API and Firebase's Google Cloud Functions, and a job-search app that integrates Facebook authentication and Indeed's Job API for location-based job listings.
Who is the target audience for this course?
This course is designed for developers who are already familiar with basic React Native concepts and are looking to deepen their skills in advanced areas such as complex animations, backend integrations, and handling real-world applications with APIs.
What specific tools and platforms will I learn to use?
Students will learn to implement animations with the Animated module and PanResponder, use the Expo platform for bootstrapping apps, and navigate apps with React-Navigation. Additionally, the course covers backend development using Google Cloud Functions and Twilio API for authentication.
What important topics are NOT covered in this course?
The course does not cover basic React Native concepts or fundamental JavaScript programming. It also does not delve into native iOS or Android development outside the React Native framework, nor does it cover advanced backend development beyond Google Cloud Functions and Firebase.
How much time should I expect to dedicate to this course?
With 145 lessons, students should be prepared to invest a significant amount of time to complete the course. The runtime is extensive, and hands-on projects require additional time for implementation and experimentation with the provided concepts.
How can the skills learned in this course be applied to a career?
The skills acquired in this course can be directly applied to mobile app development roles, especially those requiring expertise in React Native. The knowledge of building advanced animations, integrating third-party APIs, and handling authentication systems is valuable for developing sophisticated mobile applications in professional settings.