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.
About This Course
Welcome to "React Native - The Practical Guide"!
Build Native Mobile Apps with React & JavaScript! This bestselling course teaches you how to create native iOS and Android apps using your existing web development and React knowledge.
Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one! Wouldn't it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps?
That's exactly what React Native allows you to do! No need to learn Java, Android, Swift, ObjectiveC or anything of that - React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS.
That's probably the reason why Instagram, AirBnB, Skype and many other global companies are using it to build their mobile apps. By the end of this course, you'll be able to publish your own apps to the Google Play Store and Apple App Store!
Why Learn React Native?
React Native lets you build truly native mobile apps using JavaScript and React - skills you may already have! My goal is to ensure that you feel confident building mobile applications with React Native, so that you can create your own apps, enhance your existing projects, or boost your portfolio as a mobile developer - whatever your goal is: This course gets you there!
What's in This Course?
This course will teach you WHY React Native is a great choice for mobile development and introduce you to all the key concepts you'll need - from core concepts to publishing your app.
React Native Core Concepts
Learn the theory behind React Native, its core concepts, and how to use React, JavaScript, and native components to build real mobile applications.
Styling & Animations
Build responsive designs that work on different device sizes. Master styling techniques and learn how to create smooth, engaging animations in your apps.
Navigation & User Flow
Understand how to navigate in React Native apps and create intuitive user experiences with proper screen transitions and navigation patterns.
Device Features & Backend
Access native device features like maps and camera. Learn how to implement user authentication and connect your app to a backend server.
In Detail, You'll Learn
This course covers everything you need to master React Native with a complete demo project where all concepts are applied step-by-step.
Core Concepts
Master these essential React Native skills:
- React Native core concepts & theory
- Using React, JavaScript & native components
- Styling & animating React Native apps
- Navigation in React Native apps
- Using third-party libraries
- Debugging React Native apps
Advanced Topics
Take your skills to the next level:
- Using maps & image picker
- Full user authentication flow
- Connecting to a backend server
- Responsive designs for different devices
- Publishing to Google Play Store
- Publishing to Apple App Store
Build the "Awesome Places" App!
This course includes a complete real-world project - the "Awesome Places" app where users can share amazing pictures and the location where they took them. You'll learn to use maps, the camera, user authentication, connecting to a server and much more - and we'll go through all steps to get it into an app store!
Basic React Knowledge Required
See The Course In Action
Curriculum
- Welcome To This Course & What To Expect! (1:05)
- What Is React Native? (3:27)
- A Glance Under The Hood Of React Native (5:05)
- Creating React Native Projects: Expo CLI vs React Native CLI (6:26)
- Creating a New React Native Project (4:39)
- Analyzing The Created Project (5:15)
- Running Our First App On A Real Device! (4:20)
- Setting Up A Local Development Environment (9:26)
- About This Course (6:54)
- Course Resources, Code Snapshots & How To Use
- Module Introduction (1:44)
- Exploring Core Components & Component Styling (7:52)
- Working With Core Components (7:00)
- Styling React Native Apps (10:13)
- React Native: Core Components, Styling & Colors - More Information
- Exploring Layouts & Flexbox (3:19)
- React Native & Flexbox (2:31)
- Using Flexbox To Create Layouts (5:08)
- Flexbox - A Deep Dive (12:19)
- Improving The Layout (7:12)
- Handling Events (7:29)
- Managing A List Of Course Goals (in our Demo App) (7:10)
- iOS & Android Styling Differences (8:50)
- Making Content Scrollable with ScrollView (6:15)
- Optimizing Lists with FlatList (13:41)
- Splitting Components Into Smaller Components (5:11)
- Utilizing Props (2:33)
- Working on the "Goal Input" Component (9:40)
- Handling Taps with the Pressable Component (3:34)
- Making Items Deletable & Using IDs (5:17)
- Adding an Android Ripple Effect & an iOS Alternative (4:52)
- Adding a Modal Screen (6:57)
- Styling the Modal Overlay (5:41)
- Opening & Closing the Modal (2:30)
- Working with Images & Changing Colors (6:04)
- App Finishing Touches (7:15)
- Module Summary (3:32)
- Module Introduction & What We'll Build (2:05)
- Starting Setup & Analyzing the Target App (3:03)
- Setting Up our Screen Components (5:39)
- Creating Custom Buttons (6:58)
- Styling for Android & iOS (11:16)
- Styling the "Number Input" Element (6:52)
- Configuring the TextInput Field (3:21)
- Adding Visual Feedback to the Buttons (15:46)
- Improving the Buttons (7:38)
- Coloring the Components & The Overall App (3:19)
- Adding a Linear Gradient (4:02)
- Adding a Background Image (7:03)
- Getting Started with the Game Logic (7:10)
- Handling User Input & Showing an Alert Dialog (7:30)
- Switching Screens Programmatically (7:11)
- Starting Work on the Game Screen (4:45)
- Respecting Device Screen Restrictions with the SafeAreaView (3:06)
- Creating a Title Component (4:37)
- Managing Colors Globally (6:53)
- Creating, Using & Displaying Random Numbers (12:43)
- Adding Game Control Buttons ("+" & "-") to the App (15:27)
- Checking for "Game Over" (11:12)
- Improving the Game Screen Visuals (11:39)
- Using "Cascading Styles" (5:45)
- Working with Icons (Button Icons) (4:08)
- Adding & Using Custom Fonts with React Native Apps (7:03)
- Adding a (Foreground) Image (9:01)
- Using & Styling Nested Text (4:52)
- Adding Logic to (Re-)Start Games & Displaying a Summary Screen (6:58)
- Logging Game Rounds (5:51)
- Outputting Log Data with FlatList (2:49)
- Styling the Game Round Logs (8:10)
- Finishing Touches (4:33)
- Module Summary (2:56)
- Module Introduction (4:05)
- Setting Dynamic Widths (4:29)
- Introducing the Dimensions API (6:39)
- Adjusting Image Sizes with the Dimensions API (4:04)
- Understanding Screen Orientation Problems (3:16)
- Setting Sizes Dynamically (for different Orientations) (7:55)
- Managing Screen Content with KeyboardAvoidingView (5:49)
- Improving the Landscape Mode UI (7:54)
- Further Improvements with useWindowDimensions (4:35)
- Writing Platform-specific Code with the Platform API (8:59)
- Styling the Status Bar (2:08)
- Module Introduction (1:28)
- What Is Navigation? (4:21)
- Getting Started with the App & Outputting Meal Categories (9:31)
- Displaying Items in a Grid (14:28)
- Getting Started with the React Navigation Package (9:44)
- Implementing Navigation Between Two Screens (8:30)
- Setting the Default Screen
- Understanding the useNavigation Hook (3:38)
- Working with Route Parameters To Pass Data Between Screens (6:36)
- Displaying Meals (7:51)
- Adding Images & Styling (17:10)
- Styling Screen Headers & Backgrounds (7:59)
- Setting Navigation Options Dynamically (9:04)
- Adding & Configuring the Meal Details Screen (8:57)
- Outputting Content in the Meal Detail Screen (9:23)
- Finishing the Meal Detail Screen (18:57)
- Adding Header Buttons (6:55)
- Adding an Icon Button to a Header (4:50)
- Adding Drawer Navigation & Creating a Drawer (9:31)
- Configuring the Drawer Navigator & The Drawer (10:09)
- Adding, Configuring & Using Bottom Tabs (6:29)
- Nesting Navigators (13:04)
- Bottom Tabs & App Finishing Touches (3:52)
- Module Summary (2:42)
- Module Introduction (3:04)
- Getting Started with React's Context API (5:22)
- Managing App-wide State with Context (4:59)
- Using the Created Context with useContext (5:11)
- Managing Favorite Meals with the Context API (9:39)
- Getting Started with Redux & Redux Toolkit (4:45)
- Working with Redux Slices (7:02)
- Managing Redux State & Dispatching Actions (5:13)
- Using Redux State in Components (1:45)
- Module Summary (1:15)
- Module Introduction & What We'll Build (2:21)
- The Starting Setup (6:17)
- Adding Navigation (with React Navigation) & Configuring Navigation (8:27)
- Adding Global Colors & Editing Navigation Configuration (10:03)
- Creating Key App Components to Display Expenses (6:17)
- Continuing Work on the Expense-related Components (6:48)
- Adding Dummy Expense Data (5:37)
- Outputting a List of Expenses (4:44)
- Improving App Layout & Styling (7:50)
- Working on Expense List Items (13:24)
- Formatting Dates (4:41)
- Adding a Header Button & Making Expense Items Tappable (11:32)
- Navigating Programmatically Between Screens (5:16)
- Styling The Expense Management Screen (3:06)
- Supporting Different Editing Modes & Using Route Parameters (7:00)
- Adding a "Delete" Button (5:34)
- Adding Custom Buttons (9:40)
- Closing A Modal Programmatically (3:21)
- Managing App-wide State With Context (18:17)
- Using Context From Inside Components (8:18)
- Deleting & Updating Expenses (6:32)
- Finishing Touches (4:25)
- Module Introduction (1:26)
- Building a Custom Input Component (8:34)
- Creating an Overall Form (5:57)
- Configuring the Form Input Elements (4:08)
- Adding Styling (7:40)
- Setting the Form Layout (6:41)
- Handling User Input in a Generic Way (9:56)
- Managing Form State & Submission (4:54)
- Working with Entered Data (5:20)
- Setting & Using Default Values (7:08)
- Adding Validation (6:38)
- Providing Visual Validation Feedback (9:18)
- Adding Error Styling (4:54)
- Module Summary (1:41)
- Module Introduction (2:22)
- Backend Setup (Firebase) (3:29)
- Installing Axios (2:12)
- Sending POST Http Requests (6:34)
- Fetching Backend Data (GET Requests) (9:25)
- Transforming & Using Fetched Data (8:19)
- Using Response Data from POST Requests (5:43)
- Updating & Deleting Backend Data (UPDATE & DELETE Requests) (7:50)
- Managing the Loading State (8:57)
- Handling Request Errors (12:01)
- Module Summary (0:58)
- Module Introduction (1:59)
- Demo App Walkthrough (3:56)
- How Does Authentication Work? (2:58)
- Backend Setup (5:34)
- Controlling Signup & Login Screens (4:39)
- Sending Authentication Requests to the Backend (5:19)
- Creating New Users (5:39)
- Logging Users In (6:30)
- Authentication Error Handling (3:49)
- Storing & Managing the User Authentication State (with Context) (7:13)
- Extracting the Authentication Token (4:16)
- Protecting Screens (6:57)
- Adding a Logout Functionality (3:38)
- Accessing Protected Resources (10:17)
- Storing Auth Tokens on the Device & Logging Users In Automatically (11:46)
- A Note About Token Expiration
- Module Summary (2:12)
- Module Introduction (2:36)
- Adding a "Favorite Places" List (8:54)
- Editing the Favorite Place Items (7:59)
- Adding an "Add Place" Screen + Navigation (6:34)
- Adding a Header Button (7:17)
- Global Colors & Styling (5:03)
- Getting Started with a Custom Form (5:59)
- Adding & Configuring the Camera Package (for Native Camera Access) (6:19)
- Taking Photos on Android (6:08)
- Taking Photos on iOS + Managing Permissions (8:28)
- Showing an Image Preview (6:41)
- Creating a Custom Button (6:00)
- Getting Started with the Location Picker (5:33)
- Locating Users (9:06)
- Adding a Location Preview Map (12:24)
- Adding an Interactive Map (Google Maps & Apple Maps) (8:32)
- Allowing Map Interaction & Adding Markers (5:10)
- Confirming Picked Locations (7:38)
- Previewing Picked Locations (9:15)
- Adding a Form Submit Button (4:44)
- Managing Location & Image State in the Form (9:30)
- Converting Picked Locations to Human-Readable Addresses (9:45)
- Passing Entered Data to the "AllPlaces" Screen (5:20)
- Outputting a List Of Places (4:39)
- Styling Place Items (6:29)
- SQLite: Getting Started & Initialization (16:11)
- Preparing Code to Insert Data into the SQLite Database (7:09)
- Inserting Places into the Database (3:17)
- Fetching Places from the Database (9:35)
- Adding the Place Details Screen (9:15)
- Fetching Place Detail Data from the Database (8:36)
- Showing a Readonly Map (9:09)
- Module Summary (2:28)
- Module Introduction (1:30)
- How Exactly Does Expo Work? (4:20)
- Expo Alternatives (5:33)
- Setting Up Our System (4:43)
- Using Expo's Bare Workflow (7:48)
- Using Native Device Features with the Bare Workflow (7:26)
- Ejecting To The Bare Workflow (5:41)
- Creating Projects with the React Native CLI (no Expo) (7:11)
- Non-Expo Apps & Native Device Features (3:27)
- Module Summary (1:50)
- Module Introduction (1:36)
- Publishing Apps: An Overview (4:05)
- Key Configuration Items & Considerations (2:30)
- Configuring App Names & Versions (8:16)
- A Quick Note About Environment Variables (1:51)
- Adding Icons & A Splash Screen (3:40)
- Building Expo Apps with EAS (14:31)
- EAS for iOS (even on Windows Devices) (16:46)
- Building for iOS Without Expo (10:23)
- Building for Android Without Expo (7:21)
- Configuring Android Apps
- Module Introduction (1:02)
- What are (Local) Notifications? (2:08)
- Adding the Expo Notification Package (6:11)
- Scheduling Notifications (6:05)
- Configuring Scheduled Notifications
- Handling Incoming Notifications (5:22)
- Local Notifications - Permissions
- Reacting To Incoming Notifications (7:10)
- Reacting To User Interaction With Incoming Notifications (4:51)
- Understanding Push Notifications (6:40)
- Push Notifications Setup (5:12)
- Using the Push Token (8:54)
- Sending Push Notifications (8:42)
- Module Summary (2:24)
- Module Introduction (1:38)
- JavaScript - A Summary (2:38)
- Project Setup
- Core Syntax Refresher (4:37)
- let & const (2:29)
- Arrow Functions (5:21)
- Objects: Properties & Methods (3:23)
- Arrays & Array Methods (4:19)
- Arrays, Objects & Reference Types (2:16)
- Spread Operator & Rest Parameters (6:46)
- Destructuring (5:40)
- Async Code & Promises (10:33)
- Wrap Up (0:51)
- Module Introduction (1:12)
- What is React (3:13)
- A Starting Project (4:03)
- Understanding JSX (5:31)
- Understanding Components (2:50)
- Working with Multiple Components (7:04)
- Working with Props (6:52)
- Rendering Lists of Data (4:30)
- Handling Events (7:24)
- Parent-Child Communication (4:38)
- Managing State (5:54)
- More on State (4:20)
- User Input & Two-Way Binding (5:52)
- Wrap Up (2:11)
Course Prerequisites
Here's what you need to get the most out of this course
- React knowledge is a must (but you absolutely DON'T have to be an expert).
- JavaScript knowledge is a must, next-gen JavaScript knowledge (i.e. ES6+) is recommended.
- NO Android/ Java or iOS (Swift, ObjectiveC) development experience is required.
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 5195 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "React Native - The Practical Guide"
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.
