Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete React Native Developer in 2024: Zero to Mastery [with Hooks]
Introduction
React Native: Zero to Mastery (3:49)
Course Outline (6:32)
Exercise: Meet Your Classmates and Instructor
Meeting Bruno (1:56)
Complete Course Resources + Code
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal
React Native Fundamentals
How We Got Here - React Native History (9:32)
How We Got Here 2 - React Native History (3:54)
Why React Native? (3:32)
Our First React Native App (11:54)
React Native Internals (8:54)
React Native Internals 2 (4:57)
Let's Have Some Fun (+ Free Resources)
Exercise: Is There CSS? (2:55)
The 2 Paths
The 2 Paths (1:16)
React DOM vs React Native (2:53)
Recommended Setup (4:42)
Keeping Your App Up To Date
Unlimited Updates
Building With React Native: FocusTime App
FocusTime Demo (1:38)
Before We Get Going!
Introduction To Expo (2:47)
Getting Ready To Hit The Ground Running! (3:27)
Who Likes Snacks? (2:51)
Running Snacks On Your Device (1:59)
Running The FocusTime Demo On Your Device (2:08)
Proper Preparation Prevents Poor Snacking! (4:13)
Quick Recap On What We've Done So Far (2:06)
A Rundown Of What's In Our Snack (7:41)
Why We Don't Run On Web (2:20)
How To Avoid The Notch (3:31)
How To Avoid The StatusBar (3:19)
Styling The Background (2:34)
Setting Up Our Focus Feature (4:02)
Adding Text Input (5:35)
Storing A Subject (3:44)
Adding A Button (7:11)
Making The App Reactive (4:20)
Cleaning Up Spacing (3:02)
Adding A Countdown Component (7:26)
Adding The Timer Feature (3:44)
Hooking Up Our Countdown (7:54)
Adding The Focus Subject (5:20)
Hooking Up The Progress Bar (6:56)
Vibrating When The Timer Ends (4:12)
Adding Timer Controls (9:54)
Resetting The Timer (4:10)
Keeping The App Awake (1:55)
Focus History Feature Setup (3:31)
Designing Our Focus List (8:34)
Populating The Focus History (3:56)
Course Check-In
Mobile Development Professional: Local Setup
Before You Start, Read This!
[MAC] Exporting FocusTime Locally (1:47)
[MAC] Installing GIT (5:52)
[MAC] Installing Node and Yarn (4:26)
[MAC] Running it on IOS Simulator (4:09)
[MAC] Installing Android Studio (1:52)
[MAC] Installing Android SDK Tools (3:15)
[MAC] Running On An Emulator (5:25)
[MAC] Installing VSCode (3:21)
[MAC] Optional: Using GIT With Visual Studio Code (6:38)
[WINDOWS] Exporting FocusTime Locally (2:55)
[WINDOWS] Installing GIT And VSCode (8:57)
[WINDOWS] Optional: Using GIT With Visual Studio Code Part 1 (5:41)
[WINDOWS] Optional: Using GIT With Visual Studio Code Part 2 (7:50)
Github What Is It Good For? (3:39)
Github Appendix
[WINDOWS] Optional: Publishing Your Code To Github (7:48)
[MAC] Optional: Publishing Your Code To Github (8:18)
[WINDOWS] Installing Android Studio (11:38)
[WINDOWS] Installing Node and Yarn (8:22)
[WINDOWS] Running FocusTime On My Device (3:44)
What If I'm Still Running Into Issues? (4:42)
Implement a New Life System
Master Project: MealsToGo Project Setup
MealsToGo Demo (2:13)
Project Files
Navigating Package Versions and Staying Up-to-Date
Setting Up Our Master Project (7:08)
Note For Windows Users
Creating The MealsToGo Project (1:28)
[Optional] MealsToGo On Github (2:29)
Watch This Before Getting Started! (1:05)
Endorsements On LinkedIn
Master Project: MealsToGo Core Part 1
Time For Yoga! (2:52)
Let's Do Some Yoga! (5:51)
React Native Flexbox And Snacks (4:14)
Spring Cleaning The Expo Setup (5:04)
Quick Note On Publishing Your App
Exercise App Layout (2:36)
Solution App Layout (5:59)
Android StatusBar Issue (6:34)
Quick Note On Debugging (2:30)
Keeping Up With The Code Step By Step (1:31)
Setting Up Eslint And Prettier (4:41)
Using Eslint (5:25)
Optimizing Eslint (2:51)
Setting Up Prettier (3:00)
Exercise SearchBar (4:06)
Solution SearchBar (1:16)
Feature Overview: Restaurant List Item (1:31)
Restaurant Info Setup Part 1 (5:22)
Restaurant Info Setup Part 2 (5:09)
Exercise Restaurant Info Card (1:06)
Solution Restaurant Info Card (3:49)
Reflection Time Restaurant Info (1:40)
The Way We Are Styling Feels Weird (4:37)
Trying Out Styled Components (3:32)
Installing And Using Styled Component (3:53)
Quick Note On How To Look At Changes (2:32)
Exercise Migrating To Styled Components (1:56)
Solution Migrating To Styled Components (6:31)
Uhoh We Have An IOS Error (3:24)
How Do We Make Things Consistent (2:30)
Setting Up Our Theme (8:40)
Exercise Theme Cleanup (1:08)
Solution Theme Cleanup (3:17)
Exercise: Imposter Syndrome (2:55)
Custom Fonts Fonts Fonts! (0:53)
Loading Custom Fonts (8:28)
Adding The Address (2:15)
Using SVG With Rating (6:49)
Exercise Adding Open Now SVG (0:45)
Solution Finishing Our Restaurant Card (6:14)
Quick Reminder
Building A Spacer Component (8:44)
Optimizing The Spacer Component (12:09)
Hold Up Why Do We Need Consistency (5:54)
Wait A Second It Won't Render On Android (3:55)
Creating A Typography Component And Cleanup (11:40)
Solution Code Cleanup (2:19)
FlatList! (0:25)
List It! (15:24)
Note On Content Container Style
No Inline Styles (2:11)
Why Is There A White Bar? (4:00)
Feature Overview: App Navigation (0:41)
Navigation Installation (6:07)
Exercise Tab Navigation (3:22)
Solution Tab Navigation (6:16)
Exercise Tab Bar Icons (3:11)
Solution Tab Bar Icons (3:59)
Simplifying Tab Icon Logic (5:14)
Master Project: MealsToGo Core Part 2
Feature Overview: Adding Data (6:50)
Quick Recap Of What We'll Be Doing (2:58)
Fake An API Request (6:35)
Quick Refresh On Promises (2:33)
Let's Transform The Data (6:34)
Let's Transform The Data Part 2 (6:13)
Setting Up RestaurantContext (6:36)
Hooking Up Our Context (13:48)
Exercise Activity Indicator (1:04)
Solution Activity Indicator (4:34)
Quick Architecture Overview (4:40)
Feature Overview Geocoding And Search (3:54)
Setting Up Our Geocoding Service (7:35)
Setting Up Our Geocoding Context (9:45)
Hooking Up The Searchbar (11:48)
Searching For Restaurants (6:26)
Oh No A Bug! (0:40)
Oh No A Bug Solution! (2:48)
Key Warnings (2:52)
Oh No An Anti-Pattern (7:35)
Our Next Feature! (2:11)
Let's Optimize Before We Build! (0:51)
Building Navigation Infrastructure For Scale (3:48)
Restructuring Navigation (3:32)
Setting Up Stack Navigation (7:56)
Setting Up Restaurant Detail Navigation (3:32)
Modals And Touch Feedback (4:30)
Exercise Rendering The Card (1:39)
Solution Rendering The Card (3:06)
Back To Our Feature! (0:25)
Exercise Menu List (1:34)
Solution Menu List (7:28)
Feature Overview Map (0:56)
Installing React Native Maps (5:26)
Map Screen And Search (9:21)
Setting The Map Region (8:31)
Rendering Map Markers (3:03)
Custom Map Callout Exercise (4:43)
Custom Map Callout Solution (8:57)
Linking A Callout To Details (2:00)
Feature Overview Favourites (0:57)
Favourites Context (6:16)
Hooking Up Favourites Part 1 (7:16)
Hooking Up Favourites Part 2 (4:36)
Building A Favourites Bar Part 1 (4:33)
Building A Favourites Bar Part 2 (9:46)
Storing Favourites (9:24)
Uh Oh An Android Bug (2:11)
Feature Overview Firebase And Authentication (6:20)
Firebase Installation (5:41)
Quick Note On Firebase (0:20)
Let's Test Authentication (5:54)
Authentication Service And Context (5:39)
Account And Authentication Navigation (6:31)
Image Background Exercise (4:01)
Image Background Solution (3:12)
Lighten Up The Background (3:29)
Account Screen Buttons (11:31)
Exercise Login Screen (1:38)
Solution Login Screen (9:19)
Tying Up Some Loose Ends (2:09)
Feature Overview: Registration (5:55)
Activity Indicators (2:21)
Favourites Is Broken Part 1 (6:17)
Favourites Is Broken Part 2 (8:58)
Adding A Watermelon Animation (8:44)
Feature Overview: Settings (0:54)
Building The Settings Feature (7:43)
Making The Settings Screen Look Nice (4:00)
Favourites Screen Exercise (2:20)
Favourites Screen Solution (9:29)
Animations And Polish (8:33)
App Icons (2:21)
Expo Publish (2:56)
Bonus: Mobile Camera Module
Feature Overview Camera Module (0:47)
Setting Up The Infrastructure (3:16)
Exercise Expo Camera (3:11)
Solution Expo Camera (5:34)
Taking A Picture (4:18)
Additional Changes For Android To Take a Picture
Storing And Retrieving The Picture (11:03)
Bonus: Google Maps Integration
Important Note On This Section! (4:40)
Setting Up Your Payment Information For Firebase (2:44)
Setting Up Firebase CLI (9:22)
Quick Note On Running Functions Locally
Running Firebase Functions Locally (5:05)
Moving Location Mock Part 1 (9:55)
Moving Location Mock Part 2 (3:54)
Moving Restaurants Mock (11:46)
Deploying Our Functions (4:07)
Switching Between Local And Deployed Functions (3:57)
Oh No Android Doesn't Work! (1:06)
Creating a Google Cloud Account (2:36)
A Cautionary Tale (4:15)
Configuring Our Google Cloud Project (5:31)
Setting Up Google Node SDK (7:01)
Firebase Environment (1:35)
Integrating Geocoding API (8:11)
Integrating Places API (6:29)
Integrating Places Photos (4:21)
Publishing Our Expo App And Functions (3:41)
Minor Optimizations (3:01)
Error Management (10:19)
Bonus: Mobile Payments With Stripe
Stripe Integration Demo (3:11)
Stripe Integration Architecture (2:37)
Signing Up For Stripe (4:13)
Quick Recap On Firebase Functions (3:18)
High Level Stripe Payment Flow (3:14)
React Native Stripe Client (3:09)
Setting Up Our Checkout (5:18)
Our Credit Card Input (9:45)
Getting Our First Stripe Token (6:14)
Hooking Up Our Credit Card Form (6:48)
Checkout Cart Overview (3:42)
Building The Cart Context (8:19)
Integrating Our Cart (11:44)
Oh No! A Cart Bug (3:10)
An Empty Cart (6:44)
Adding The Checkout UI (10:31)
Starting On The Payment Flow (1:09)
Getting The Payee Name (6:57)
Setting Up For Payment (6:42)
Building Our Payment Gateway (6:44)
Payment Request Part 1 (8:43)
Payment Request Part 2 (5:45)
Payment Request Part 3 (6:52)
Adding Loading State (6:21)
Handling Error States (14:26)
Exercise Cart Persistence (1:11)
Solution Cart Persistence (5:09)
Bonus: Releasing To The App Stores
Before We Get Started (3:25)
What Will I Get Out Of This Section (2:46)
Building Standalone Apps (3:52)
Building An APK For Android (3:23)
Running Our APK On The Emulator (3:45)
Creating A Play Store Account (4:14)
Building iOS With Expo (6:49)
Testing Your iOS Build On A Simulator (4:04)
AppStore Connect And TestFlight (8:24)
Bonus: App Polish + Customizing MealsToGo
Adding Some Polish (1:31)
Adapting The Theme Colors (3:55)
Improving The Settings Screen (7:01)
Improving Restaurant Detail Screen (2:30)
The Favourites Bar (4:11)
Keeping Your App Up To Date
New Year New Me (2:01)
Why Upgrade (3:06)
Upgrading (5:27)
Smoke Testing the Upgrade (3:09)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Learning Guideline
LinkedIn Endorsements
Become An Alumni
Coding Challenges
Appendix: Learn React
Before We Start
React Fundamentals Lessons
Next Steps
Appendix: Git + Github + Open Source Projects
Watch Git, Github + Open Source Projects Section
Our First React Native App
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures