React Native: Advanced Concepts

Visit Tutorial Page ( Report)
Note: This course assumes you've got the basics of React Native down.  Check out my course 'The Complete React Native and Redux' course, its the perfect preparation! Go beyond the basics of React Native!  This course will teach you the advanced topics you need to make a #1 best-selling app. Push Notifications? You will learn it.  In Depth Animations? Included.  Offline Data Persistence? Of course! ------------------------------ 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. Who is the target audience? This course is for anyone looking to learn advanced topics of React Native
  • Expo Setup
    • Introduction - Start Here!
    • Github Links
    • Creating React Native Apps
    • Why Expo?
    • Creating Our First App
  • Animations with React Native
    • Animation Systems
    • The Animation Module
    • Animation from Square One
    • Moving a Ball
    • How Animations Work
    • Animation from Another Angle
    • Swipe Deck Props
    • Component Boilerplate
    • Deck Data
    • Interplay Between Components
    • Customizing Individual Cards
  • Handling Gestures
    • The Pan Responder System
    • Pan Responder's Event Handlers
    • The Gesture Object
    • Dragging a Card
  • Applying Animation Styling
    • Animating Single Cards
    • How to Rotate Elements
    • Interpolating Rotation Values
    • Linear Relations with Interpolation
    • Limiting Rotation with Interpolation
    • Springing Back to Default
    • Detecting Minimum Swipe Distance
    • Programmatic Animation
    • Forcing Swipes
    • Callbacks on Swipe Completion
  • Component Reusability
    • Writing Reusable Components
    • The DefaultProps System
    • Resetting Card Position
    • Advancing the Deck
    • Handling Empty Lists
    • Getting the Cards to Stack
    • Troubleshooting Flashing Images
    • Cascading Card List
    • Animating Advancing Cards
    • Resetting the Index
    • Deck Wrapup
  • One Time Password Authentication
    • Review of Common Auth Flows
    • The Details of One Time Passwords
    • Tech Stack with Google Cloud Functions
    • Traditional Servers vs Google Cloud Functions
    • Layout of Google Cloud Functions
    • Firebase Project Setup
    • Deploying a Firebase Project
    • Testing Deployed Functions
    • Project File Structure
    • The Request and Response Objects
    • Generating a Service Account
    • Sanitizing User Inputs
    • Creating New Users
    • Testing New User Creation
  • Twilio Integration
    • Texting from Twilio
    • Twilio Credentials
    • Accessing Saved Users
    • Quick Note
    • Sending Texts to Users
    • Generating Access Codes
    • Verifying One Time Passwords
    • Invalidating Used Codes
    • Generating JWT's
  • Client Side One Time Passwords
    • Transitioning to React Native
    • App Boilerplate
    • Defining Instance Properties
    • Invoking Cloud Functions
    • Refactoring with Async/Await
    • Debugging with Async/Await
    • Async/Await on User Signin
    • Capturing Tokens
    • Firebase Auth with a JWT
    • Breather and Review
  • Bringing it All Together
    • App Overview
    • Screen Walkthrough
    • More Screen Walkthroughs
    • App Challenges and Solutions
    • Screens vs Components
    • React Native Navigation Options
    • React Navigation in Practice
    • Screen Boilerplate
    • Implementing the First Navigator
    • Nesting Navigators
    • Wiring Up Stack Navigators
    • Class vs Instance Properties
    • Customization with Header Options
    • Programmatic Navigation
    • Styling the NavBar
    • The Welcome Screen
    • Styling the Welcome Screen
    • Even More Welcome Screen Styling!
    • Navigation from the Welcome Screen
    • More on Welcome Screen Navigation
  • Facebook Authentication
    • Facebook Auth Flow
    • The Facebook Dev Console
    • Redux Setup
    • Using Async Storage
    • Crazy Async/Await Syntax
    • Logging in With Facebook
    • Testing Facebook's Login Flow
    • World's Biggest Gotcha
    • The Auth Reducer
    • Skipping the Auth Screen
    • Testing Auth Flow
    • Advancing the Welcome Screen
    • Resolving the Loading Screen
  • MapViews on React Native
    • Showing a Map
    • Interacting with the MapView
    • Working around MapView Issues
    • The Indeed Jobs API
    • Location API Mismatch
    • Converting LatLong to Zip Code
    • Fetching a List of Jobs
    • Issuing Action Creators from MapScreen
    • The Jobs Reducer
    • Navigating from Action Creators
    • The Deck Screen
    • Importing the Deck Component
    • Applying the Swipe Component
    • Styling Job Cards
    • Customizing MapViews
    • Android Compatibility
    • Dynamic Key Props
    • One More Swipe Deck Fix
    • Liking a Job
    • Considering Only Unique Jobs
    • The Review Screen
    • Rendering a List of Liked Jobs
    • Applying to Jobs
    • Mapping a Jobs Location
    • Styling the Job Card
    • Clearing Liked Jobs
    • Redirecting Back to the Map
    • Callback Gotcha
    • Tab Bar Icons
    • Tab Bar Config
    • Android Specific Fixes
  • Offline Data Persistence
    • Push Notifications and Data Persistence
    • Persisting Application State
    • Wiring Up Redux Persist
    • How Redux Persist Works
    • Redux Persist - Huge Gotcha!
  • Push Notifications
    • Push Notification Overview
    • Registering For Push Notifications
    • Generating Push Tokens
    • Testing Notifications
    • More on Notifications and Wrapup
Write Your Review

Reviews