Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Clone Tinder
Up and Running in < 10 minutes ⏳
Download (0:55)
Install Homebrew & Watchman (macOS only) (1:19)
What is React Native? (0:57)
What is Expo? (2:02)
Hello World (2:28)
Setting Up Our Coding Environment
Setup Visual Studio Code (4:21)
Workflow (2:03)
Run an iPhone simulator on your MacOS 🍏 (Optional)
Setup iOS Dev Environment (1:28)
Test iOS Dev Environment (0:50)
React Native Basics
Creating our First Component 👍 (4:07)
3 Minute Theory - const & let (3:10)
3 Minute Theory - Data Types (2:44)
Basic Styling (5:28)
Flexbox in a Nutshell (2:26)
Build a Tinder Card 👤 with Swipe Animation 🙌
Creating a Card (3:13)
Adding a Profile Image from Facebook (3:21)
The PanResponder - Handling Gestures (1:03)
3 Minute Theory - Functions (2:42)
Gesture Animation (6:48)
Interpolation (0:41)
Card Rotation & Spring (3:04)
Stacking Tinder Cards (5:43)
Swipe Away (3:25)
Creating Different Card Profiles (5:15)
Using the Map Function (1:44)
Creating Cards with Map (2:15)
Understanding State in React Native (3:27)
Using State to build a Dynamic Card Stack (4:57)
Firebase 🔥
What is Firebase?
Setup, Demo Data and Testing (4:26)
Using Data From Firebase (2:27)
Navigation
Restructuring Our Project (4:09)
Login Screen & Facebook Button (6:06)
Introducing React Navigation
React Navigation Setup (3:37)
Facebook Login
Async Await (Asynchronous code) (2:56)
Login With Facebook (5:58)
Authenticate Users with Firebase using Facebook (2:45)
Facebook Permissions (3:25)
Create a User in Firebase (3:19)
Checking if a User is Logged in (2:04)
Location 📍
Accessing User Location (2:20)
Setting Location in Firebase using GeoFire (3:28)
New Demo Data (2:36)
Get Profiles Within 10km Using GeoFire (3:35)
Getting Users and Rebuilding the Card Stack (4:47)
Creating a Simple Scroller Component
Basic Setup (5:15)
Adding Screens (5:20)
Flick Gestures & Scroll Limits (4:53)
Making the Login Process Awesome
Reset the Navigation Stack (2:31)
Adding a Spinner (Activity Indicator) (2:27)
Get User Data from Firebase Before Login (4:31)
Bulding a Profile Screen
Adding a Profile Image (5:20)
Sliders (5:20)
Switches (2:50)
Connecting Components to Firebase (5:43)
Filtering Our Card Stack
Filter by Location (3:42)
Filter by Gender (6:41)
Filter by Age (4:20)
Matching 😍
Creating Relationships in Firebase (6:25)
Filter Swiped Cards (4:45)
Create a Match Screen with the ListView Component (7:19)
Enabling Vertical Scrolling (2:46)
Fetching Matches from Firebase (8:44)
Chat
Adding Demo Messages (4:56)
Sending Messages to Firebase (7:31)
Fetching Messages from Firebase (4:37)
Firebase Security
Lockdown Users and Location (6:53)
Lockdown Relationships (3:56)
Lockdown Messages (2:00)
Packaging for the App Store
Building Standalone Apps using Expo
Stacking Tinder Cards
Load more
Load more