React Native - The Practical Guide

Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps

18 sections, 282 lectures
Total duration: 28h 22m

Course Overview

About This Course

You know React on the web, but mobile still feels like a different world—new tooling, new UI patterns, and a lot of “native-only” features that seem out of reach. You want an app that feels real on iOS and Android, not a demo that falls apart the moment you need the camera or maps.

This course gives you a clear, practical path into React Native so you can turn your JavaScript + React skills into true native mobile apps. You’ll move from core concepts to real-world workflows, with guidance on responsive layouts, navigation, third-party libraries, debugging, and connecting your app to a server.

By the end, you’ll be able to build and ship a complete cross-platform app experience—capturing photos, attaching locations, handling user sign-in, and communicating with a backend. You’ll also walk through the steps required to publish to the Google Play Store and Apple App Store, so your work can actually reach users.

What You'll Learn

You’ll cover the React Native ecosystem end-to-end: from core concepts and native components to device features, backend connectivity, and app store release.

Build native apps
Create real iOS and Android apps with React Native using your existing ReactJS and JavaScript knowledge—without needing Swift, ObjectiveC, Java, or Android-specific development experience.
Navigation flows
Implement in-app navigation so users can move through screens in a predictable way, and structure your app so navigation stays maintainable as features grow.
Responsive UI styling
Design layouts that adapt to different device sizes, and apply styling and animation techniques so your app looks polished and behaves smoothly on mobile.
Device features integration
Add key mobile capabilities like Google Maps and the device camera via an image picker, so your app can work with real-world locations and photos.
Auth and backend connection
Build a complete user authentication flow and connect your app to a backend server, enabling real data exchange instead of isolated on-device state.
Libraries and debugging
Confidently bring in third-party libraries when you need them and troubleshoot issues with practical debugging steps, so you can keep shipping even when things break.

Ready to get started?

See enrollment options

Prerequisites

Basic JavaScript and React (for the web) knowledge is required (refresher sections are included).
No Android, Java, Swift, or ObjectiveC knowledge is required.

Who Is This Course For?

React web developers
You already build with React in the browser and want to use the same skill set to create native mobile apps that run on both iOS and Android.
Cross-platform builders
You want to avoid learning separate stacks for each platform and would rather focus on one language and workflow to ship to both app stores.
Mobile-curious developers
You’ve built web or mobile software before, but you’re looking for a practical way to create high-performance native apps with JavaScript—without getting pulled into platform-specific languages.

Curriculum Overview

Start Now

Preview the structure and pacing of this course before you begin.

Getting Started10 lectures46m
- 01Welcome To This Course & What To Expect!1:05 min
- 02What Is React Native?3:27 min
- 03A Glance Under The Hood Of React Native5:05 min
- 04Creating React Native Projects: Expo CLI vs React Native CLI6:26 min
- 05Creating a New React Native Project4:39 min
- 06Analyzing The Created Project5:15 min
- 07Running Our First App On A Real Device!4:20 min
- 08Setting Up A Local Development Environment9:26 min
- 09About This Course6:54 min
- 10Course Resources, Code Snapshots & How To Use0:00 min
React Native Basics [COURSE GOALS APP]27 lectures2h 43m
- 01Module Introduction1:44 min
- 02Exploring Core Components & Component Styling7:52 min
- 03Working With Core Components7:00 min
- 04Styling React Native Apps10:13 min
- 05React Native: Core Components, Styling & Colors - More Information0:00 min
- 06Exploring Layouts & Flexbox3:19 min
- 07React Native & Flexbox2:31 min
- 08Using Flexbox To Create Layouts5:08 min
- 09Flexbox - A Deep Dive12:19 min
- 10Improving The Layout7:12 min
- 11Handling Events7:29 min
- 12Managing A List Of Course Goals (in our Demo App)7:10 min
- 13iOS & Android Styling Differences8:50 min
- 14Making Content Scrollable with ScrollView6:15 min
- 15Optimizing Lists with FlatList13:41 min
- 16Splitting Components Into Smaller Components5:11 min
- 17Utilizing Props2:33 min
- 18Working on the "Goal Input" Component9:40 min
- 19Handling Taps with the Pressable Component3:34 min
- 20Making Items Deletable & Using IDs5:17 min
- 21Adding an Android Ripple Effect & an iOS Alternative4:52 min
- 22Adding a Modal Screen6:57 min
- 23Styling the Modal Overlay5:41 min
- 24Opening & Closing the Modal2:30 min
- 25Working with Images & Changing Colors6:04 min
- 26App Finishing Touches7:15 min
- 27Module Summary3:32 min
Debugging React Native Apps (Introduction)6 lectures14m
- 01Module Introduction1:17 min
- 02Handling Errors4:37 min
- 03Logging to the Console1:52 min
- 04Debugging JavaScript Remotely3:05 min
- 05Using the React DevTools3:27 min
- 06Using the Documentation0:34 min
Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App34 lectures3h 51m
- 01Module Introduction & What We'll Build2:06 min
- 02Starting Setup & Analyzing the Target App3:03 min
- 03Setting Up our Screen Components5:39 min
- 04Creating Custom Buttons6:58 min
- 05Styling for Android & iOS11:16 min
- 06Styling the "Number Input" Element6:52 min
- 07Configuring the TextInput Field3:21 min
- 08Adding Visual Feedback to the Buttons15:46 min
- 09Improving the Buttons7:38 min
- 10Coloring the Components & The Overall App3:19 min
- 11Adding a Linear Gradient4:02 min
- 12Adding a Background Image7:03 min
- 13Getting Started with the Game Logic7:10 min
- 14Handling User Input & Showing an Alert Dialog7:30 min
- 15Switching Screens Programmatically7:11 min
- 16Starting Work on the Game Screen4:45 min
- 17Respecting Device Screen Restrictions with the SafeAreaView3:06 min
- 18Creating a Title Component4:37 min
- 19Managing Colors Globally6:53 min
- 20Creating, Using & Displaying Random Numbers12:43 min
- 21Adding Game Control Buttons ("+" & "-") to the App15:27 min
- 22Checking for "Game Over"11:12 min
- 23Improving the Game Screen Visuals11:40 min
- 24Using "Cascading Styles"5:45 min
- 25Working with Icons (Button Icons)4:08 min
- 26Adding & Using Custom Fonts with React Native Apps7:03 min
- 27Adding a (Foreground) Image9:01 min
- 28Using & Styling Nested Text4:52 min
- 29Adding Logic to (Re-)Start Games & Displaying a Summary Screen6:58 min
- 30Logging Game Rounds5:51 min
- 31Outputting Log Data with FlatList2:49 min
- 32Styling the Game Round Logs8:10 min
- 33Finishing Touches4:33 min
- 34Module Summary2:56 min
Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)11 lectures59m
- 01Module Introduction4:05 min
- 02Setting Dynamic Widths4:29 min
- 03Introducing the Dimensions API6:39 min
- 04Adjusting Image Sizes with the Dimensions API4:04 min
- 05Understanding Screen Orientation Problems3:16 min
- 06Setting Sizes Dynamically (for different Orientations)7:55 min
- 07Managing Screen Content with KeyboardAvoidingView5:49 min
- 08Improving the Landscape Mode UI7:54 min
- 09Further Improvements with useWindowDimensions4:35 min
- 10Writing Platform-specific Code with the Platform API8:59 min
- 11Styling the Status Bar2:08 min
React Native Navigation with React Navigation [MEALS APP]24 lectures3h 15m
- 01Module Introduction1:28 min
- 02What Is Navigation?4:21 min
- 03Getting Started with the App & Outputting Meal Categories9:31 min
- 04Displaying Items in a Grid14:28 min
- 05Getting Started with the React Navigation Package9:44 min
- 06Implementing Navigation Between Two Screens8:30 min
- 07Setting the Default Screen0:00 min
- 08Understanding the useNavigation Hook3:38 min
- 09Working with Route Parameters To Pass Data Between Screens6:36 min
- 10Displaying Meals7:51 min
- 11Adding Images & Styling17:11 min
- 12Styling Screen Headers & Backgrounds7:59 min
- 13Setting Navigation Options Dynamically9:04 min
- 14Adding & Configuring the Meal Details Screen8:57 min
- 15Outputting Content in the Meal Detail Screen9:24 min
- 16Finishing the Meal Detail Screen18:57 min
- 17Adding Header Buttons6:55 min
- 18Adding an Icon Button to a Header4:50 min
- 19Adding Drawer Navigation & Creating a Drawer9:31 min
- 20Configuring the Drawer Navigator & The Drawer10:09 min
- 21Adding, Configuring & Using Bottom Tabs6:30 min
- 22Nesting Navigators13:04 min
- 23Bottom Tabs & App Finishing Touches3:52 min
- 24Module Summary2:43 min
App-wide State Management with Redux & Context API10 lectures48m
- 01Module Introduction3:04 min
- 02Getting Started with React's Context API5:22 min
- 03Managing App-wide State with Context4:59 min
- 04Using the Created Context with useContext5:11 min
- 05Managing Favorite Meals with the Context API9:39 min
- 06Getting Started with Redux & Redux Toolkit4:45 min
- 07Working with Redux Slices7:02 min
- 08Managing Redux State & Dispatching Actions5:13 min
- 09Using Redux State in Components1:45 min
- 10Module Summary1:16 min
Time To Practice - The Expense Tracker App22 lectures2h 39m
- 01Module Introduction & What We'll Build2:21 min
- 02The Starting Setup6:17 min
- 03Adding Navigation (with React Navigation) & Configuring Navigation8:28 min
- 04Adding Global Colors & Editing Navigation Configuration10:03 min
- 05Creating Key App Components to Display Expenses6:17 min
- 06Continuing Work on the Expense-related Components6:48 min
- 07Adding Dummy Expense Data5:37 min
- 08Outputting a List of Expenses4:44 min
- 09Improving App Layout & Styling7:50 min
- 10Working on Expense List Items13:24 min
- 11Formatting Dates4:41 min
- 12Adding a Header Button & Making Expense Items Tappable11:32 min
- 13Navigating Programmatically Between Screens5:16 min
- 14Styling The Expense Management Screen3:06 min
- 15Supporting Different Editing Modes & Using Route Parameters7:00 min
- 16Adding a "Delete" Button5:34 min
- 17Adding Custom Buttons9:40 min
- 18Closing A Modal Programmatically3:21 min
- 19Managing App-wide State With Context18:17 min
- 20Using Context From Inside Components8:18 min
- 21Deleting & Updating Expenses6:32 min
- 22Finishing Touches4:25 min

And 10 more sections in the full course.

Ready to Get Started?

Choose the option that works best for you.

Single Course

React Native - The Practical Guide

One Payment. Lifetime Access.

$99one-time

One-time payment
All future updates for this course
Downloadable resources & code
Certificate of completion
Hands-on exercises & projects
Self-paced learning
English captions on all videos
Lifetime access

Buy React Native

Single course license

All-Access Membership

Everything we teach. One subscription.

$25/mo

$4,729+ worth of courses

Full access to all courses
All future courses included
Downloadable resources & code
Certificates of completion
Hands-on exercises & projects
Self-paced learning
English captions on all videos
Cancel anytime

Subscribe Now

61 courses included

React Native - The Practical Guide

Build native apps

Navigation flows

Responsive UI styling

Device features integration

Auth and backend connection

Libraries and debugging

React web developers

Cross-platform builders

Mobile-curious developers