React Native - The Practical Guide [2024]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

What you'll learn

Learn how to use ReactJS to build real native mobile apps for iOS and Android

Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

Explore React Native basics and advanced features!

Learn how to use key mobile app features like Google maps or the device camera

Requirements

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

Description

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!But wouldn't it be amazing if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?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!With this course, you can join this league. I'll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.You'll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera and so much more!And which better way to learn than by building a real app? We'll build the "Favorite Places" app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things like using maps, the camera, user authentication, connecting to a server and much more in action.By the end of the course, we'll of course also go through all steps required to get it into an app store.Here's a detailed look at what you'll get:The core concepts and theoryHow to use React, JavaScript and native componentsUnderstand how to navigate in React Native appsA closer look at styling and animating React Native appsInstructions on how to use third-party libraries in your React Native appDetailed examples on how to use maps or an image pickerA full user authentication flowHow to connect to a backend server from your appDebugging instructionsAnd so much more!What will you need to succeed in this course?NO Android, Java, Swift or ObjectiveC knowledge is required!JavaScript and React (for the web) knowledge is required though - you don't need to be an expert but the basics need to be set (though there are refresher sections in this course!)I'd be very happy to welcome you in the course!Max

Overview

Section 1: Getting Started

Lecture 1 Welcome To This Course & What To Expect!

Lecture 2 What Is React Native?

Lecture 3 Join our Online Learning Community

Lecture 4 A Glance Under The Hood Of React Native

Lecture 5 Creating React Native Projects: Expo CLI vs React Native CLI

Lecture 6 Creating a New React Native Project

Lecture 7 Analyzing The Created Project

Lecture 8 Running Our First App On A Real Device!

Lecture 9 Setting Up A Local Development Environment

Lecture 10 About This Course

Lecture 11 Course Resources, Code Snapshots & How To Use

Section 2: React Native Basics [COURSE GOALS APP]

Lecture 12 Module Introduction

Lecture 13 Exploring Core Components & Component Styling

Lecture 14 Working With Core Components

Lecture 15 Styling React Native Apps

Lecture 16 React Native: Core Components, Styling & Colors - More Information

Lecture 17 Exploring Layouts & Flexbox

Lecture 18 React Native & Flexbox

Lecture 19 Using Flexbox To Create Layouts

Lecture 20 Flexbox - A Deep Dive

Lecture 21 Improving The Layout

Lecture 22 Handling Events

Lecture 23 Managing A List Of Course Goals (in our Demo App)

Lecture 24 iOS & Android Styling Differences

Lecture 25 Making Content Scrollable with ScrollView

Lecture 26 Optimizing Lists with FlatList

Lecture 27 Splitting Components Into Smaller Components

Lecture 28 Utilizing Props

Lecture 29 Working on the "Goal Input" Component

Lecture 30 Handling Taps with the Pressable Component

Lecture 31 Making Items Deletable & Using IDs

Lecture 32 Adding an Android Ripple Effect & an iOS Alternative

Lecture 33 Adding a Modal Screen

Lecture 34 Styling the Modal Overlay

Lecture 35 Opening & Closing the Modal

Lecture 36 Working with Images & Changing Colors

Lecture 37 App Finishing Touches

Lecture 38 Module Summary

Section 3: Debugging React Native Apps (Introduction)

Lecture 39 Module Introduction

Lecture 40 Handling Errors

Lecture 41 Logging to the Console

Lecture 42 Debugging JavaScript Remotely

Lecture 43 Using the React DevTools

Lecture 44 Using the Documentation

Section 4: Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App

Lecture 45 Module Introduction & What We'll Build

Lecture 46 Starting Setup & Analyzing the Target App

Lecture 47 Setting Up our Screen Components

Lecture 48 Creating Custom Buttons

Lecture 49 Styling for Android & iOS

Lecture 50 Styling the "Number Input" Element

Lecture 51 Configuring the TextInput Field

Lecture 52 Adding Visual Feedback to the Buttons

Lecture 53 Improving the Buttons

Lecture 54 Coloring the Components & The Overall App

Lecture 55 Adding a Linear Gradient

Lecture 56 Adding a Background Image

Lecture 57 Getting Started with the Game Logic

Lecture 58 Handling User Input & Showing an Alert Dialog

Lecture 59 Switching Screens Programmatically

Lecture 60 Starting Work on the Game Screen

Lecture 61 Respecting Device Screen Restrictions with the SafeAreaView

Lecture 62 Creating a Title Component

Lecture 63 Managing Colors Globally

Lecture 64 Creating, Using & Displaying Random Numbers

Lecture 65 Adding Game Control Buttons ("+" & "-") to the App

Lecture 66 Checking for "Game Over"

Lecture 67 Improving the Game Screen Visuals

Lecture 68 Using "Cascading Styles"

Lecture 69 Working with Icons (Button Icons)

Lecture 70 Adding & Using Custom Fonts with React Native Apps

Lecture 71 Adding a (Foreground) Image

Lecture 72 Using & Styling Nested Text

Lecture 73 Adding Logic to (Re-)Start Games & Displaying a Summary Screen

Lecture 74 Logging Game Rounds

Lecture 75 Outputting Log Data with FlatList

Lecture 76 Styling the Game Round Logs

Lecture 77 Finishing Touches

Lecture 78 Module Summary

Section 5: Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)

Lecture 79 Module Introduction

Lecture 80 Setting Dynamic Widths

Lecture 81 Introducing the Dimensions API

Lecture 82 Adjusting Image Sizes with the Dimensions API

Lecture 83 Understanding Screen Orientation Problems

Lecture 84 Setting Sizes Dynamically (for different Orientations)

Lecture 85 Managing Screen Content with KeyboardAvoidingView

Lecture 86 Improving the Landscape Mode UI

Lecture 87 Further Improvements with useWindowDimensions

Lecture 88 Writing Platform-specific Code with the Platform API

Lecture 89 Styling the Status Bar

Section 6: React Native Navigation with React Navigation [MEALS APP]

Lecture 90 Module Introduction

Lecture 91 What Is Navigation?

Lecture 92 Getting Started with the App & Outputting Meal Categories

Lecture 93 Displaying Items in a Grid

Lecture 94 Getting Started with the React Navigation Package

Lecture 95 Implementing Navigation Between Two Screens

Lecture 96 Setting the Default Screen

Lecture 97 Understanding the useNavigation Hook

Lecture 98 Working with Route Parameters To Pass Data Between Screens

Lecture 99 Displaying Meals

Lecture 100 Adding Images & Styling

Lecture 101 Styling Screen Headers & Backgrounds

Lecture 102 Setting Navigation Options Dynamically

Lecture 103 Adding & Configuring the Meal Details Screen

Lecture 104 Outputting Content in the Meal Detail Screen

Lecture 105 Finishing the Meal Detail Screen

Lecture 106 Adding Header Buttons

Lecture 107 Adding an Icon Button to a Header

Lecture 108 Adding Drawer Navigation & Creating a Drawer

Lecture 109 Configuring the Drawer Navigator & The Drawer

Lecture 110 Adding, Configuring & Using Bottom Tabs

Lecture 111 Nesting Navigators

Lecture 112 App Finishing Touches

Lecture 113 Module Summary

Section 7: App-wide State Management with Redux & Context API

Lecture 114 Module Introduction

Lecture 115 Getting Started with React's Context API

Lecture 116 Managing App-wide State with Context

Lecture 117 Using the Created Context with useContext

Lecture 118 Managing Favorite Meals with the Context API

Lecture 119 Getting Started with Redux & Redux Toolkit

Lecture 120 Working with Redux Slices

Lecture 121 Managing Redux State & Dispatching Actions

Lecture 122 Using Redux State in Components

Lecture 123 Module Summary

Section 8: Time To Practice - The Expense Tracker App

Lecture 124 Module Introduction & What We'll Build

Lecture 125 The Starting Setup

Lecture 126 Adding Navigation (with React Navigation) & Configuring Navigation

Lecture 127 Adding Global Colors & Editing Navigation Configuration

Lecture 128 Creating Key App Components to Display Expenses

Lecture 129 Continuing Work on the Expense-related Components

Lecture 130 Adding Dummy Expense Data

Lecture 131 Outputting a List of Expenses

Lecture 132 Improving App Layout & Styling

Lecture 133 Working on Expense List Items

Lecture 134 Formatting Dates

Lecture 135 Adding a Header Button & Making Expense Items Tappable

Lecture 136 Navigating Programmatically Between Screens

Lecture 137 Styling The Expense Management Screen

Lecture 138 Supporting Different Editing Modes & Using Route Parameters

Lecture 139 Adding a "Delete" Button

Lecture 140 Adding Custom Buttons

Lecture 141 Closing A Modal Programmatically

Lecture 142 Managing App-wide State With Context

Lecture 143 Using Context From Inside Components

Lecture 144 Deleting & Updating Expenses

Lecture 145 Finishing Touches

Section 9: Handling User Input

Lecture 146 Module Introduction

Lecture 147 Building a Custom Input Component

Lecture 148 Creating an Overall Form

Lecture 149 Configuring the Form Input Elements

Lecture 150 Adding Styling

Lecture 151 Setting the Form Layout

Lecture 152 Handling User Input in a Generic Way

Lecture 153 Managing Form State & Submission

Lecture 154 Working with Entered Data

Lecture 155 Setting & Using Default Values

Lecture 156 Adding Validation

Lecture 157 Providing Visual Validation Feedback

Lecture 158 Adding Error Styling

Lecture 159 Module Summary

Section 10: Sending Http Requests

Lecture 160 Module Introduction

Lecture 161 Backend Setup (Firebase)

Lecture 162 Installing Axios

Lecture 163 Sending POST Http Requests

Lecture 164 Fetching Backend Data (GET Requests)

Lecture 165 Transforming & Using Fetched Data

Lecture 166 Using Response Data from POST Requests

Lecture 167 Updating & Deleting Backend Data (UPDATE & DELETE Requests)

Lecture 168 Managing the Loading State

Lecture 169 Handling Request Errors

Lecture 170 Module Summary

Section 11: User Authentication

Lecture 171 Module Introduction

Lecture 172 Demo App Walkthrough

Lecture 173 How Does Authentication Work?

Lecture 174 Backend Setup

Lecture 175 Controlling Signup & Login Screens

Lecture 176 Sending Authentication Requests to the Backend

Lecture 177 Creating New Users

Lecture 178 Logging Users In

Lecture 179 Authentication Error Handling

Lecture 180 Storing & Managing the User Authentication State (with Context)

Lecture 181 Extracting the Authentication Token

Lecture 182 Protecting Screens

Lecture 183 Adding a Logout Functionality

Lecture 184 Accessing Protected Resources

Lecture 185 Storing Auth Tokens on the Device & Logging Users In Automatically

Lecture 186 A Note About Token Expiration

Lecture 187 Module Summary

Section 12: Using Native Device Features (Camera, Location & More)

Lecture 188 Module Introduction

Lecture 189 Adding a "Favorite Places" List

Lecture 190 Editing the Favorite Place Items

Lecture 191 Adding an "Add Place" Screen + Navigation

Lecture 192 Adding a Header Button

Lecture 193 Global Colors & Styling

Lecture 194 Getting Started with a Custom Form

Lecture 195 Adding & Configuring the Camera Package (for Native Camera Access)

Lecture 196 Taking Photos on Android

Lecture 197 Taking Photos on iOS + Managing Permissions

Lecture 198 Showing an Image Preview

Lecture 199 Creating a Custom Button

Lecture 200 Getting Started with the Location Picker

Lecture 201 Locating Users

Lecture 202 Adding a Location Preview Map

Lecture 203 Adding an Interactive Map (Google Maps & Apple Maps)

Lecture 204 Allowing Map Interaction & Adding Markers

Lecture 205 Confirming Picked Locations

Lecture 206 Previewing Picked Locations

Lecture 207 Adding a Form Submit Button

Lecture 208 Managing Location & Image State in the Form

Lecture 209 Converting Picked Locations to Human-Readable Addresses

Lecture 210 Passing Entered Data to the "AllPlaces" Screen

Lecture 211 Outputting a List Of Places

Lecture 212 Styling Place Items

Lecture 213 SQLite: Getting Started & Initialization

Lecture 214 Preparing Code to Insert Data into the SQLite Database

Lecture 215 Inserting Places into the Database

Lecture 216 Fetching Places from the Database

Lecture 217 Adding the Place Details Screen

Lecture 218 Fetching Place Detail Data from the Database

Lecture 219 Showing a Readonly Map

Lecture 220 Module Summary

Section 13: Building React Native Apps Without Expo

Lecture 221 Module Introduction

Lecture 222 How Exactly Does Expo Work?

Lecture 223 Expo Alternatives

Lecture 224 Setting Up Our System

Lecture 225 Using Expo's Bare Workflow

Lecture 226 Using Native Device Features with the Bare Workflow

Lecture 227 Ejecting To The Bare Workflow

Lecture 228 Creating Projects with the React Native CLI (no Expo)

Lecture 229 Non-Expo Apps & Native Device Features

Lecture 230 Module Summary

Section 14: Publishing React Native Apps

Lecture 231 Module Introduction

Lecture 232 Publishing Apps: An Overview

Lecture 233 Key Configuration Items & Considerations

Lecture 234 Configuring App Names & Versions

Lecture 235 A Quick Note About Environment Variables

Lecture 236 Adding Icons & A Splash Screen

Lecture 237 Building Expo Apps with EAS

Lecture 238 EAS for iOS (even on Windows Devices)

Lecture 239 Building for iOS Without Expo

Lecture 240 Building for Android Without Expo

Lecture 241 Configuring Android Apps

Section 15: Push Notifications

Lecture 242 Module Introduction

Lecture 243 What are (Local) Notifications?

Lecture 244 Adding the Expo Notification Package

Lecture 245 Scheduling Notifications

Lecture 246 Configuring Scheduled Notifications

Lecture 247 Handling Incoming Notifications

Lecture 248 Local Notifications - Permissions

Lecture 249 Reacting To Incoming Notifications

Lecture 250 Reacting To User Interaction With Incoming Notifications

Lecture 251 Understanding Push Notifications

Lecture 252 Push Notifications Setup

Lecture 253 Using the Push Token

Lecture 254 Sending Push Notifications

Lecture 255 Module Summary

Section 16: Course Roundup

Lecture 256 Course Roundup

Section 17: Bonus: JavaScript Refresher

Lecture 257 Module Introduction

Lecture 258 JavaScript - A Summary

Lecture 259 Project Setup

Lecture 260 Core Syntax Refresher

Lecture 261 let & const

Lecture 262 Arrow Functions

Lecture 263 Objects: Properties & Methods

Lecture 264 Arrays & Array Methods

Lecture 265 Arrays, Objects & Reference Types

Lecture 266 Spread Operator & Rest Parameters

Lecture 267 Destructuring

Lecture 268 Async Code & Promises

Lecture 269 Wrap Up

Lecture 270 Module Resources

Section 18: Bonus: React.js Refresher

Lecture 271 Module Introduction

Lecture 272 What is React

Lecture 273 A Starting Project

Lecture 274 Understanding JSX

Lecture 275 Understanding Components

Lecture 276 Working with Multiple Components

Lecture 277 Working with Props

Lecture 278 Rendering Lists of Data

Lecture 279 Handling Events

Lecture 280 Parent-Child Communication

Lecture 281 Managing State

Lecture 282 More on State

Lecture 283 User Input & Two-Way Binding

Lecture 284 Wrap Up

Lecture 285 Module Resources

Section 19: Bonus

Lecture 286 Legacy Course Content

Lecture 287 This Course Was Updated | Update Information

Lecture 288 Course Update Information & FAQs

Lecture 289 Bonus: More Content!

Anyone who wants to use React to build native mobile apps,Every mobile developer who wishes to learn only one language to write cross-platform mobile apps,Every mobile or web developer who's interested in writing high-performance native apps with JavaScript