Complete React Native Developer in 2021: Zero to Mastery [with Hooks]
The only course you need to learn React Native, build large-scale React Native iOS + Android apps from scratch & get hired as a mobile developer.
What you'll learn
- ✓Build enterprise level React Native apps and deploy to Apple App Store and Google Play Store
- ✓Learn to lead Mobile App projects by making good architecture decisions and helping others on your team
- ✓Learn the latest features in React Native including Hooks, Context API, AsyncStorage, and Animation + more
- ✓Become a top 10% React Native Developer
- ✓Set up authentication and user accounts using Firebase and Firebase Functions
- ✓Use the latest ES6/ES7/ES8/ES9/ES10 JavaScript to write clean code
- ✓Google Maps API and adding interactive maps to your projects
- ✓Build reactive, performant, large scale applications like a senior mobile app developer
- ✓Build cross platform mobile apps for iOS and Android without using Swift, Objective C, Java and Kotlin
- ✓Master the latest ecosystem of a React Native Developer from scratch
- ✓Stripe Payments (Online Payments) integration in your mobile apps
- ✓Routing with React Navigation
- ✓Using native phone capabilities like Camera and Vibration
- ✓Styled-Components and native styling to make modern and beautiful apps
Meet your instructors
Hi! I'm Andrei.
Senior Software Developer turned Instructor, Founder of ZTM
Andrei is the instructor of some of the highest rated programming courses on the web. Some of his students (400,000+ in the past few years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM, Shopify and many more.
He has worked as a Senior Software Developer in Silicon Valley and Toronto for many years and is now taking all that he has learned to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.
Hi! I'm Mo.
Solutions Architect & Instructor
Mo is a Solutions Architect with over 7 years of experience in Software Architecture and Development. Having worked as a consultant for the majority of his career, he has seen it all.
He has worked on global applications for multi-nationals, governments and Fortune 500 companies.
Mo's goal is to make sure you learn and master the foundational concepts to set you up for life-long learning and success. Software and development practices change often, but when you have the right foundation, adapting to the constant change becomes easy.
Having been a mentor to many new developers throughout his career, Mo knows what works and what doesn't and is excited to teach you and help you succeed in your career!
Why Zero To Mastery is right for you
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you the skills you need to get hired.
That’s why the Zero To Mastery Academy exists, to provide industry-leading courses and content to teach you the relevant skills you need to advance your career and get you hired at some of the top companies in the world.
Join now to get complete access to this course and all others for only $23/month.
Course Curriculum
We want you to make sure this course is a good fit for you. So start learning for free right now by clicking the PREVIEW links below.
Course Curriculum
-
FocusTime Demo
(3:32)
-
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)
-
Building A Simple Navigation
(4:52)
-
Creating Our Focus Feature
(8:15)
-
Adding An Input
(5:33)
-
Storing The Focus Item
(10:45)
-
RoundedButton On Press
-
Storing Our Focus Input
(7:45)
-
Quick Note On The Docs
(2:01)
-
Cleaning Up Our Styling
(6:23)
-
Building The Timer Feature
(8:53)
-
Building The Countdown Feature
(11:40)
-
Building The Countdown Feature Part 2
(6:26)
-
Building The Countdown Feature Part 3
(8:07)
-
A Quick Note On Error Screens
(2:35)
-
Reporting The Progress
(8:16)
-
Preset Timing Buttons
(11:32)
-
Keeping The App Awake
(3:25)
-
Vibrating When Finished With A Task
(8:12)
-
Going Full Circle
(3:50)
-
Quick Cleanup
(1:04)
-
Quick Review Of What We Have Accomplished So Far
(6:50)
-
Clearing The Subject
(4:20)
-
Storing Focus History
(4:24)
-
Storing Focus History With Statuses
(4:28)
-
Building The Focus History List
(13:02)
-
Clearing The Focus History
(4:13)
-
Quick Note On AsyncStorage
-
Storing And Loading The Focus History
(7:06)
-
Reflection Time!
(3:26)
-
Reflection Time Part 2!
(3:17)
-
Reflection Time Part 3!
(3:41)
-
Reflection Time Part 4!
(1:54)
-
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)
-
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)
-
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)
-
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)
-
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)
-
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)
-
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)
-
Before We Start
-
Introduction To React.js
(12:21)
-
Quick Note: CRA Growing Pains
-
create-react-app
(11:50)
-
create-react-app 2
(5:55)
-
create-react-app 3
(2:11)
-
Quick Note: Class vs Functional App.js
(3:23)
-
Code From Previous Video
-
Your First React Component
(20:13)
-
Building A React App 1
(16:03)
-
Building A React App 2
(9:47)
-
Building A React App 3
(26:35)
-
Styling Your React App
(4:59)
-
Quick Note: JSON Placeholder
-
Building A React App 4
(15:30)
-
Building A React App 5
(8:53)
-
Building A React App 6
(9:05)
-
Project Files
-
Keeping Your Projects Up To Date
(8:30)
-
React Review
(2:34)
-
Error Boundaries In React
(8:11)
-
Deploying Our React App
(5:10)
-
React Hooks
(3:42)
-
React Hooks 2
(3:47)
-
React Hooks 3
(3:23)
-
React Hooks 4
(4:01)
-
React Hooks 5
(3:36)
-
React Hooks 6
(6:54)
-
React Hooks 7
(9:16)
-
React Hooks 8
(4:48)
-
Project Files
-
React Hooks 9
(5:58)
-
Next Steps
Course Details
We guarantee you that this is the most comprehensive and up to date React Native course that you can find. You will learn React Native, build your own mobile apps (Android and iOS) and get hired as a mobile app developer in 2021!
Using the latest version of React Native, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore, and instead, learn to build professional and modern Android and iPhone (iOS) apps.
Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies. This could be you.
By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors. Most importantly, you will be learning from industry experts that have actual real-world experience working with React Native, building mobile apps for large companies in Toronto And Silicon Valley.
This project based course will introduce you to all of the modern toolchain of a React Native app developer in 2021. Along the way, you will build a massive restaurant application using React, React Hooks, Expo, React Navigation, Firebase, Styled-Components, Google Maps/Places API, React Animations, Stripe Payments, + more. This is a full iOS and Android app that you'll be able to impress prospective employers with!
The curriculum is very hands on as we walk you from start to finish of releasing a professional React Native project all the way into production. We will start from the very beginning by teaching you React basics and then teach you advanced topics so you can make good decisions on architecture and tools on any of your future React Native projects.
All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up to the course will have their own app to put on their portfolio right away.
The topics covered are:
- React Basics
- React Native Fundamentals
- Debugging React Native
- React Navigation
- React Hooks
- Custom React Hooks
- Firebase API
- Google Maps API
- React Best Practices
- React Native Best Practices
- Persistence + Session Storage
- Android Development
- iOS Development
- Lottie Animations
- Eslint And Cleaning Up Code
- Asynchronous Javascript
- React Native AsyncStorage and Animation
- CSS in JS - Styled Components
- React Native Styling
- Installing Custom Fonts
- Device Permissions
- React Native App Layout
- Modular React Code
- Building On Expo
- Distributing App to App and Google Play Store
- Integrating Payments With Stripe API
- and more!
Wait wait… I know what you’re thinking. Why aren’t we building 10+ projects? Well, here’s the truth: most other courses and bootcamps do just that. They show you how to get started, build 10 projects that are simple and easy to build in a day, and just add some styling to make them look fancy. Will these get you hired? Unlikely.
In real-life and at your future employer, you’re not building simple, silly applications. When you apply to jobs, nobody is going to care that you built a really pretty single page app. Employers want to see that you know how to build large apps that can scale, that have good architecture, and that can be deployed to the app stores.
Let us tell you 5 reasons why this course is different from any other React Native tutorial you can find:
1️⃣ You will build the biggest project you will see in any course. This type of project would take you months to implement yourself. Let’s just say... your portfolio is definitely going to stand out compared to other applicants.
2️⃣ Learn React Native from the best. This course is taught by Mo and Andrei, two Senior Developers who have actually worked on massive projects for some of the top tech companies in the world.
Mo is a super star when it comes to React Native. He is a Solutions Architect with over 7 years of experience in Software Architecture and Development. Having worked as a consultant for the majority of his career, he has seen it all in the Mobile Development world. He is also a tech lead who has build mobile and web apps for top banks, big tech companies, and one of the biggest online e-commerce stores in the world.
Andrei has worked on enterprise level React applications for large tech firms in Silicon Valley as well as Toronto and his latest project was a React Native app for one of the biggest pharmaceutical companies in the world. 400,000+ students from around the world have now taken his courses and many are now working at places like Google, Amazon, Facebook, Shopify and Tesla.
By having both of us teach, you get to see different perspectives and you'll learn from 2 senior developers as if the 3 of us were working at a real company together.
3️⃣ This is not another free beginner React Native tutorial you can find anywhere. You will learn about design patterns, how to architect your app, organize your code, structure your folders, and how to think about performance. Let’s just say we don’t shy away from the advanced topics.
Most importantly, this React Native course will be continually updated with new lectures, resources and content as the mobile landscape evolves so that you'll continue to learn React Native best practices and keep your skills up to date 📈.
4️⃣ This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!
This course will push you and challenge you to go from an absolute React Native beginner to someone that is in the top 10% of React Native developers 💪.
5️⃣ You're going to actually have FUN learning how to build mobile apps and you'll be learning alongside hundreds of other students from around the world in our online community.
Click Start Learning Now to join the Academy and we'll see you inside the course!
Answers to (at least some of) your questions
Are there any prerequisites for this course?
- Just basic JavaScript knowledge. If you've taken Complete Web Developer, you're all set
- You DO NOT need any experience with React or any other framework/library
- You DO NOT need any Java, Kotlin, Swift or Objective C experience
Why should I learn React Native? What about Flutter?
- Best framework for mobile apps: widely regarded as the best framework for mobile app development. It's also cross-platform meaning you only need to code your app once for it to run on Android or iOS.
- Lots of jobs available: Used by major companies (other than just Facebook) like Shopify, Pinterest, Discord, Coinbase, Flipkart means there is huge job demand for React Native developers.
- High demand = High salary: Per ZipRecruiter, the avg annual salary for a React Native developer in the United States is $117,277.
- Flutter is garbage! Ok, we're just kidding. Flutter is totally fine. If you really want to now how we feel, Mo did a deep dive on Youtube answering the React Native vs. Flutter question.
Who is this course for?
- Students who are interested in going beyond a normal "beginner" tutorial
- Programmers who want to learn the most in demand skill of a mobile app developer
- Developers that want to be in the top 10% of React Native Developers
- Students who want to gain experience working on scalable large cross platform applications
- Bootcamp or online tutorial graduates that want to go beyond the basics
- Any mobile developer who wants to learn only one language to write both iOS and Android mobile apps
- Anyone looking to build their own mobile applications to put on the Google Play Store or the Apple App Store
- Web developers who want to get hired as a mobile developer
Do you provide a certificate of completion?
We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.
Can I use the course project in my portfolio?
Yes, you’d be crazy not to! This restaurant application project is a large-scale real-world project that is downloadable and ready to use the minute you join.
Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview. You know what that means? Job offer!
Can I download the videos?
Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun, and accessible whether that’s on your commute, on a flight or if you just have limited access to good wifi.
How long does it usually take for me to build something and get hired?
Ultimately you’re the only can that can control that. Everyone learns at a different pace, but students who put in a couple hours each day to apply what they’ve learned should be able to confidently build their own projects and get hired within 6 months.
We don’t see just getting hired as the end goal though. Our advanced courses will also teach you the topics and skills you need to get promoted and hired as a senior developer.
Still have more questions specific to the Academy membership? No problem, head to the bottom of this page.
Live the life you want, starting now
Learning to code and becoming a developer provides endless opportunities to live the life you want. Whether that’s a high paying job with a world-class tech company, working remotely or building your own apps, the ZTM Academy will equip you with the skills and knowledge to achieve your dreams.
Our courses walk you through the entire journey of starting to learn to code to having a successful career as a developer. Along the way, you’ll not only be supported by Andrei, Adam and course TAs but also your peers in the exclusive Zero To Mastery community.
Join now to take the first step to change your life.