You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete React Native Developer in 2025: 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
ZTM Plugin + Understanding Your Video Player
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)
Exercise: Is There CSS? (2:55)
Let's Have Some Fun (+ Free Resources)
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 (3:29)
[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 the Code Locally (1:59)
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:26)
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!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Appendix: Learn React
Before We Start
React Fundamentals Lessons
Next Steps
Appendix: Git + Github + Open Source Projects
Watch Git, Github + Open Source Projects Section
What Will I Get Out Of This Section
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