React Native: Advanced Concepts
React Native: Advanced Concepts

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

Created by Stephen Grider
Language English

React Native: Advanced Concepts

React Native: Advanced Concepts
React Native: Advanced Concepts

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

Created by Stephen Grider
Language English
1. Expo Setup
  • 1. Introduction - Start Here 00:01:43
  • 2. Github Links .html
  • 3. Creating React Native Apps 00:02:23
  • 4. Why Expo 00:06:44
  • 5. Creating Our First App 00:04:14
2. Animations with React Native
  • 1. Animation Systems 00:06:16
  • 2. The Animation Module 00:09:47
  • 3. Animation from Square One 00:08:14
  • 4. Moving a Ball 00:05:23
  • 5. How Animations Work 00:09:36
  • 6. Animation from Another Angle 00:08:47
  • 7. Swipe Deck Props 00:04:17
  • 8. Component Boilerplate 00:03:51
  • 9. Deck Data .html
  • 10. Interplay Between Components 00:07:34
  • 11. Customizing Individual Cards 00:13:51
3. Handling Gestures
  • 1. The Pan Responder System 00:10:23
  • 2. Pan Responders Event Handlers 00:08:47
  • 3. The Gesture Object 00:09:54
  • 4. Dragging a Card 00:11:28
4. Applying Animation Styling
  • 1. Animating Single Cards 00:04:38
  • 2. How to Rotate Elements 00:06:59
  • 3. Interpolating Rotation Values 00:06:14
  • 4. Linear Relations with Interpolation 00:05:34
  • 5. Limiting Rotation with Interpolation 00:05:33
  • 6. Springing Back to Default 00:05:10
  • 7. Detecting Minimum Swipe Distance 00:07:22
  • 8. Programmatic Animation 00:08:42
  • 9. Forcing Swipes 00:04:11
  • 10. Callbacks on Swipe Completion 00:06:25
5. Component Reusability
  • 1. Writing Reusable Components 00:04:49
  • 2. The DefaultProps System 00:04:20
  • 3. Resetting Card Position 00:06:03
  • 4. Advancing the Deck 00:06:10
  • 5. Handling Empty Lists 00:06:49
  • 6. Getting the Cards to Stack 00:08:31
  • 7. Troubleshooting Flashing Images 00:03:09
  • 8. Cascading Card List 00:05:34
  • 9. Animating Advancing Cards 00:04:22
  • 10. Resetting the Index 00:05:15
  • 11. Deck Wrapup 00:03:39
6. One Time Password Authentication
  • 1. Review of Common Auth Flows 00:08:20
  • 2. The Details of One Time Passwords 00:10:04
  • 3. Tech Stack with Google Cloud Functions 00:08:26
  • 4. Traditional Servers vs Google Cloud Functions 00:08:21
  • 5. Layout of Google Cloud Functions 00:09:49
  • 6. Firebase Project Setup 00:07:21
  • 7. Deploying a Firebase Project 00:04:35
  • 8. Testing Deployed Functions 00:07:42
  • 9. Project File Structure 00:05:48
  • 10. The Request and Response Objects 00:10:49
  • 11. Generating a Service Account 00:05:49
  • 12. Sanitizing User Inputs 00:08:54
  • 13. Creating New Users 00:06:22
  • 14. Testing New User Creation 00:05:23
7. Twilio Integration
  • 1. Texting from Twilio 00:06:29
  • 2. Twilio Credentials 00:07:03
  • 3. Accessing Saved Users 00:06:10
  • 4. Quick Note .html
  • 5. Sending Texts to Users 00:08:45
  • 6. Generating Access Codes 00:09:05
  • 7. Verifying One Time Passwords 00:08:00
  • 8. Invalidating Used Codes 00:07:52
  • 9. Generating JWTs 00:04:31
8. Client Side One Time Passwords
  • 1. Transitioning to React Native 00:02:53
  • 2. App Boilerplate 00:06:57
  • 3. Defining Instance Properties 00:08:09
  • 4. Invoking Cloud Functions 00:06:57
  • 5. Refactoring with AsyncAwait 00:09:07
  • 6. Debugging with AsyncAwait 00:04:33
  • 7. AsyncAwait on User Signin 00:05:59
  • 8. Capturing Tokens 00:03:52
  • 9. Firebase Auth with a JWT 00:05:58
  • 10. Breather and Review 00:07:23
9. Bringing it All Together
  • 1. App Overview 00:05:39
  • 2. Screen Walkthrough 00:06:24
  • 3. More Screen Walkthroughs 00:06:42
  • 4. App Challenges and Solutions 00:05:10
  • 5. Screens vs Components 00:03:12
  • 6. React Native Navigation Options 00:09:21
  • 7. React Navigation in Practice 00:10:24
  • 8. Screen Boilerplate 00:07:05
  • 9. Implementing the First Navigator 00:07:13
  • 10. Nesting Navigators 00:07:12
  • 11. Wiring Up Stack Navigators 00:03:15
  • 12. Class vs Instance Properties 00:05:40
  • 13. Customization with Header Options 00:04:43
  • 14. Programmatic Navigation 00:06:41
  • 15. Styling the NavBar 00:05:12
  • 16. The Welcome Screen 00:06:12
  • 17. Styling the Welcome Screen 00:07:40
  • 18. Even More Welcome Screen Styling 00:08:40
  • 19. Navigation from the Welcome Screen 00:04:57
  • 20. More on Welcome Screen Navigation 00:10:01
10. Facebook Authentication
  • 1. Facebook Auth Flow 00:05:32
  • 2. The Facebook Dev Console 00:05:50
  • 3. Redux Setup 00:13:01
  • 4. Using Async Storage 00:10:06
  • 5. Crazy AsyncAwait Syntax 00:13:00
  • 6. Logging in With Facebook 00:17:46
  • 7. Testing Facebooks Login Flow 00:10:37
  • 8. Quick Note .html
  • 9. Worlds Biggest Gotcha 00:09:13
  • 10. The Auth Reducer 00:05:46
  • 11. Skipping the Auth Screen 00:08:49
  • 12. Testing Auth Flow 00:03:52
  • 13. Advancing the Welcome Screen 00:11:36
  • 14. Resolving the Loading Screen 00:03:01
11. MapViews on React Native
  • 1. Showing a Map 00:05:25
  • 2. Interacting with the MapView 00:07:23
  • 3. Working around MapView Issues 00:04:43
  • 4. Indeed API Key .html
  • 5. The Indeed Jobs API 00:08:55
  • 6. Location API Mismatch 00:08:58
  • 7. Converting LatLong to Zip Code 00:10:32
  • 8. Fetching a List of Jobs 00:07:42
  • 9. Issuing Action Creators from MapScreen 00:10:04
  • 10. The Jobs Reducer 00:08:44
  • 11. Navigating from Action Creators 00:05:29
  • 12. The Deck Screen 00:03:57
  • 13. Importing the Deck Component 00:04:24
  • 14. Applying the Swipe Component 00:06:11
  • 15. Styling Job Cards 00:08:38
  • 16. Customizing MapViews 00:10:29
  • 17. Android Compatibility 00:07:07
  • 18. Dynamic Key Props 00:04:42
  • 19. One More Swipe Deck Fix 00:02:08
  • 20. Liking a Job 00:03:29
  • 21. Considering Only Unique Jobs 00:10:40
  • 22. The Review Screen 00:03:20
  • 23. Rendering a List of Liked Jobs 00:08:01
  • 24. Applying to Jobs 00:08:19
  • 25. Mapping a Jobs Location 00:08:25
  • 26. Styling the Job Card 00:06:33
  • 27. Clearing Liked Jobs 00:07:36
  • 28. Redirecting Back to the Map 00:03:23
  • 29. Callback Gotcha 00:03:26
  • 30. Tab Bar Icons 00:05:30
  • 31. Tab Bar Config 00:06:47
  • 32. Android Specific Fixes 00:04:37
12. Offline Data Persistence
  • 1. Push Notifications and Data Persistence 00:03:30
  • 2. Persisting Application State 00:05:25
  • 3. Wiring Up Redux Persist 00:03:29
  • 4. How Redux Persist Works 00:06:57
  • 5. Redux Persist - Huge Gotcha 00:08:23
13. Push Notifications
  • 1. Push Notification Overview 00:05:50
  • 2. Registering For Push Notifications 00:08:18
  • 3. Generating Push Tokens 00:05:15
  • 4. Testing Notifications 00:06:15
  • 5. More on Notifications and Wrapup 00:04:50
14. Extras
  • 1. Bonus .html