React Native: Advanced Concepts
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.
- Basic understanding of React Native
- 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
| # | 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
Instagram Clone Coding 3.0
React Native Complete Guide 2023: Zero to Mastery
React Native Firebase Chat with Expo Router
Deeplinks with Expo Router
The Ultimate React Native Series: Advanced Concepts
![React Native - The Practical Guide [2021 Edition]](https://cdn.courseflix.net/courses/200x112/react-native-the-practical-guide-2021-edition.webp)
React Native - The Practical Guide [2021 Edition]
Native Modules with Expo
Testing React Native Apps
Universal Apps with Tamagui
