React Native: Advanced Concepts

React Native: Advanced Concepts

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 151 lectures (16h 34m) | 8.81 GB

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

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.

Table of Contents

Expo Setup
1 Introduction Start Here
2 Github Links
3 Creating React Native Apps
4 Why Expo
5 Creating Our First App

Animations with React Native
6 Animation Systems
7 The Animation Module
8 Animation from Square One
9 Moving a Ball
10 How Animations Work
11 Animation from Another Angle
12 Swipe Deck Props
13 Component Boilerplate
14 Deck Data
15 Interplay Between Components
16 Customizing Individual Cards

Handling Gestures
17 The Pan Responder System
18 Pan Responders Event Handlers
19 The Gesture Object
20 Dragging a Card

Applying Animation Styling
21 Animating Single Cards
22 How to Rotate Elements
23 Interpolating Rotation Values
24 Linear Relations with Interpolation
25 Limiting Rotation with Interpolation
26 Springing Back to Default
27 Detecting Minimum Swipe Distance
28 Programmatic Animation
29 Forcing Swipes
30 Callbacks on Swipe Completion

Component Reusability
31 Writing Reusable Components
32 The DefaultProps System
33 Resetting Card Position
34 Advancing the Deck
35 Handling Empty Lists
36 Getting the Cards to Stack
37 Troubleshooting Flashing Images
38 Cascading Card List
39 Animating Advancing Cards
40 Resetting the Index
41 Deck Wrapup

One Time Password Authentication
42 Review of Common Auth Flows
43 The Details of One Time Passwords
44 Tech Stack with Google Cloud Functions
45 Traditional Servers vs Google Cloud Functions
46 Layout of Google Cloud Functions
47 Firebase Project Setup
48 Deploying a Firebase Project
49 Testing Deployed Functions
50 Project File Structure
51 The Request and Response Objects
52 Generating a Service Account
53 Sanitizing User Inputs
54 Creating New Users
55 Testing New User Creation

Twilio Integration
56 Texting from Twilio
57 Twilio Credentials
58 Accessing Saved Users
59 Quick Note
60 Sending Texts to Users
61 Generating Access Codes
62 Verifying One Time Passwords
63 Invalidating Used Codes
64 Generating JWTs

Client Side One Time Passwords
65 Transitioning to React Native
66 App Boilerplate
67 Defining Instance Properties
68 Invoking Cloud Functions
69 Refactoring with AsyncAwait
70 Debugging with AsyncAwait
71 AsyncAwait on User Signin
72 Capturing Tokens
73 Firebase Auth with a JWT
74 Breather and Review

Bringing it All Together
75 App Overview
76 Screen Walkthrough
77 More Screen Walkthroughs
78 App Challenges and Solutions
79 Screens vs Components
80 React Native Navigation Options
81 React Navigation in Practice
82 Screen Boilerplate
83 Implementing the First Navigator
84 Nesting Navigators
85 Wiring Up Stack Navigators
86 Class vs Instance Properties
87 Customization with Header Options
88 Programmatic Navigation
89 Styling the NavBar
90 The Welcome Screen
91 Styling the Welcome Screen
92 Even More Welcome Screen Styling
93 Navigation from the Welcome Screen
94 More on Welcome Screen Navigation

Facebook Authentication
95 Facebook Auth Flow
96 The Facebook Dev Console
97 Redux Setup
98 Using Async Storage
99 Crazy AsyncAwait Syntax
100 Logging in With Facebook
101 Testing Facebooks Login Flow
102 Quick Note
103 Worlds Biggest Gotcha
104 The Auth Reducer
105 Skipping the Auth Screen
106 Testing Auth Flow
107 Advancing the Welcome Screen
108 Resolving the Loading Screen

MapViews on React Native
109 Showing a Map
110 Interacting with the MapView
111 Working around MapView Issues
112 Indeed API Key
113 The Indeed Jobs API
114 Location API Mismatch
115 Converting LatLong to Zip Code
116 Fetching a List of Jobs
117 Issuing Action Creators from MapScreen
118 The Jobs Reducer
119 Navigating from Action Creators
120 The Deck Screen
121 Importing the Deck Component
122 Applying the Swipe Component
123 Styling Job Cards
124 Customizing MapViews
125 Android Compatibility
126 Dynamic Key Props
127 One More Swipe Deck Fix
128 Liking a Job
129 Considering Only Unique Jobs
130 The Review Screen
131 Rendering a List of Liked Jobs
132 Applying to Jobs
133 Mapping a Jobs Location
134 Styling the Job Card
135 Clearing Liked Jobs
136 Redirecting Back to the Map
137 Callback Gotcha
138 Tab Bar Icons
139 Tab Bar Config
140 Android Specific Fixes

Offline Data Persistence
141 Push Notifications and Data Persistence
142 Persisting Application State
143 Wiring Up Redux Persist
144 How Redux Persist Works
145 Redux Persist Huge Gotcha

Push Notifications
146 Push Notification Overview
147 Registering For Push Notifications
148 Generating Push Tokens
149 Testing Notifications
150 More on Notifications and Wrapup

151 Bonus