React Native: Advanced Concepts

16h 35m 38s
English
Paid
November 20, 2023

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.

More

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 React Native: Advanced Concepts

Join premium to watch
Go to premium
# Title Duration
1 Introduction - Start Here! 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

Similar courses to React Native: Advanced Concepts

React Native With React Hooks & React Query:High Performance
Master React Native Navigation

Master React Native NavigationSimon Grimm

Duration 1 hour 13 minutes 29 seconds
React Native Firebase Chat with Expo Router

React Native Firebase Chat with Expo RouterSimon Grimm

Duration 1 hour 55 minutes 26 seconds
State Management with Zustand

State Management with ZustandSimon Grimm

Duration 56 minutes 13 seconds
Testing React Native Apps

Testing React Native AppsSimon Grimm

Duration 1 hour 13 minutes 31 seconds
APIs, Authentication and Tanstack Query

APIs, Authentication and Tanstack QuerySimon Grimm

Duration 1 hour 36 minutes 26 seconds
Building ChatGPT with React Native

Building ChatGPT with React NativeSimon Grimm

Duration 1 hour 24 minutes 49 seconds
Expo Router Fullstack Apps

Expo Router Fullstack AppsSimon Grimm

Duration 1 hour 39 minutes 18 seconds
React Native - The Practical Guide [2024 Edition]