React Native – The Practical Guide [2022]

React Native – The Practical Guide [2022]

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 289 lectures (28h 37m) | 12.9 GB

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

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 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 theory
  • How to use React, JavaScript and native components
  • Understand how to navigate in React Native apps
  • A closer look at styling and animating React Native apps
  • Instructions on how to use third-party libraries in your React Native app
  • Detailed examples on how to use maps or an image picker
  • A full user authentication flow
  • How to connect to a backend server from your app
  • Debugging instructions
  • And so much more!

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
Table of Contents

Getting Started
1 Welcome To This Course & What To Expect!
2 What Is React Native
3 Join our Online Learning Community
4 A Glance Under The Hood Of React Native
5 Creating React Native Projects Expo CLI vs React Native CLI
6 Creating a New React Native Project
7 Analyzing The Created Project
8 Running Our First App On A Real Device!
9 Setting Up A Local Development Environment
10 About This Course
11 Course Resources, Code Snapshots & How To Use

React Native Basics [COURSE GOALS APP]
12 Module Introduction
13 Exploring Core Components & Component Styling
14 Working With Core Components
15 Styling React Native Apps
16 React Native Core Components, Styling & Colors – More Information
17 Exploring Layouts & Flexbox
18 React Native & Flexbox
19 Using Flexbox To Create Layouts
20 Flexbox – A Deep Dive
21 Improving The Layout
22 Handling Events
23 Managing A List Of Course Goals (in our Demo App)
24 iOS & Android Styling Differences
25 Making Content Scrollable with ScrollView
26 Optimizing Lists with FlatList
27 Splitting Components Into Smaller Components
28 Utilizing Props
29 Working on the Goal Input Component
30 Handling Taps with the Pressable Component
31 Making Items Deletable & Using IDs
32 Adding an Android Ripple Effect & an iOS Alternative
33 Adding a Modal Screen
34 Styling the Modal Overlay
35 Opening & Closing the Modal
36 Working with Images & Changing Colors
37 App Finishing Touches
38 Module Summary

Debugging React Native Apps (Introduction)
39 Module Introduction
40 Handling Errors
41 Logging to the Console
42 Debugging JavaScript Remotely
43 Using the React DevTools
44 Using the Documentation

Diving Deeper into Components, Layouts & Styling – Building a Mini-Game App
45 Module Introduction & What We’ll Build
46 Starting Setup & Analyzing the Target App
47 Setting Up our Screen Components
48 Creating Custom Buttons
49 Styling for Android & iOS
50 Styling the Number Input Element
51 Configuring the TextInput Field
52 Adding Visual Feedback to the Buttons
53 Improving the Buttons
54 Coloring the Components & The Overall App
55 Adding a Linear Gradient
56 Adding a Background Image
57 Getting Started with the Game Logic
58 Handling User Input & Showing an Alert Dialog
59 Switching Screens Programmatically
60 Starting Work on the Game Screen
61 Respecting Device Screen Restrictions with the SafeAreaView
62 Creating a Title Component
63 Managing Colors Globally
64 Creating, Using & Displaying Random Numbers
65 Adding Game Control Buttons (+ & -) to the App
66 Checking for Game Over
67 Improving the Game Screen Visuals
68 Using Cascading Styles
69 Working with Icons (Button Icons)
70 Adding & Using Custom Fonts with React Native Apps
71 Adding a (Foreground) Image
72 Using & Styling Nested Text
73 Adding Logic to (Re-)Start Games & Displaying a Summary Screen
74 Logging Game Rounds
75 Outputting Log Data with FlatList
76 Styling the Game Round Logs
77 Finishing Touches
78 Module Summary

Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)
79 Module Introduction
80 Setting Dynamic Widths
81 Introducing the Dimensions API
82 Adjusting Image Sizes with the Dimensions API
83 Understanding Screen Orientation Problems
84 Setting Sizes Dynamically (for different Orientations)
85 Managing Screen Content with KeyboardAvoidingView
86 Improving the Landscape Mode UI
87 Further Improvements with useWindowDimensions
88 Writing Platform-specific Code with the Platform API
89 Styling the Status Bar

React Native Navigation with React Navigation [MEALS APP]
90 Module Introduction
91 What Is Navigation
92 Getting Started with the App & Outputting Meal Categories
93 Displaying Items in a Grid
94 Getting Started with the React Navigation Package
95 Implementing Navigation Between Two Screens
96 Setting the Default Screen
97 Understanding the useNavigation Hook
98 Working with Route Parameters To Pass Data Between Screens
99 Displaying Meals
100 Adding Images & Styling
101 Styling Screen Headers & Backgrounds
102 Setting Navigation Options Dynamically
103 Adding & Configuring the Meal Details Screen
104 Outputting Content in the Meal Detail Screen
105 Finishing the Meal Detail Screen
106 Adding Header Buttons
107 Adding an Icon Button to a Header
108 Adding Drawer Navigation & Creating a Drawer
109 Configuring the Drawer Navigator & The Drawer
110 Adding, Configuring & Using Bottom Tabs
111 Nesting Navigators
112 Bottom Tabs & App Finishing Touches
113 Module Summary

App-wide State Management with Redux & Context API
114 Module Introduction
115 Getting Started with React’s Context API
116 Managing App-wide State with Context
117 Using the Created Context with useContext
118 Managing Favorite Meals with the Context API
119 Getting Started with Redux & Redux Toolkit
120 Working with Redux Slices
121 Managing Redux State & Dispatching Actions
122 Using Redux State in Components
123 Module Summary

Time To Practice – The Expense Tracker App
124 Module Introduction & What We’ll Build
125 The Starting Setup
126 Adding Navigation (with React Navigation) & Configuring Navigation
127 Adding Global Colors & Editing Navigation Configuration
128 Creating Key App Components to Display Expenses
129 Continuing Work on the Expense-related Components
130 Adding Dummy Expense Data
131 Outputting a List of Expenses
132 Improving App Layout & Styling
133 Working on Expense List Items
134 Formatting Dates
135 Adding a Header Button & Making Expense Items Tappable
136 Navigating Programmatically Between Screens
137 Styling The Expense Management Screen
138 Supporting Different Editing Modes & Using Route Parameters
139 Adding a Delete Button
140 Adding Custom Buttons
141 Closing A Modal Programmatically
142 Managing App-wide State With Context
143 Using Context From Inside Components
144 Deleting & Updating Expenses
145 Finishing Touches

Handling User Input
146 Module Introduction
147 Building a Custom Input Component
148 Creating an Overall Form
149 Configuring the Form Input Elements
150 Adding Styling
151 Setting the Form Layout
152 Handling User Input in a Generic Way
153 Managing Form State & Submission
154 Working with Entered Data
155 Setting & Using Default Values
156 Adding Validation
157 Providing Visual Validation Feedback
158 Adding Error Styling
159 Module Summary

Sending Http Requests
160 Module Introduction
161 Backend Setup (Firebase)
162 Installing Axios
163 Sending POST Http Requests
164 Fetching Backend Data (GET Requests)
165 Transforming & Using Fetched Data
166 Using Response Data from POST Requests
167 Updating & Deleting Backend Data (UPDATE & DELETE Requests)
168 Managing the Loading State
169 Handling Request Errors
170 Module Summary

User Authentication
171 Module Introduction
172 Demo App Walkthrough
173 How Does Authentication Work
174 Backend Setup
175 Controlling Signup & Login Screens
176 Sending Authentication Requests to the Backend
177 Creating New Users
178 Logging Users In
179 Authentication Error Handling
180 Storing & Managing the User Authentication State (with Context)
181 Extracting the Authentication Token
182 Protecting Screens
183 Adding a Logout Functionality
184 Accessing Protected Resources
185 Storing Auth Tokens on the Device & Logging Users In Automatically
186 A Note About Token Expiration
187 Module Summary

Using Native Device Features (Camera, Location & More)
188 Module Introduction
189 Adding a Favorite Places List
190 Editing the Favorite Place Items
191 Adding an Add Place Screen + Navigation
192 Adding a Header Button
193 Global Colors & Styling
194 Getting Started with a Custom Form
195 Adding & Configuring the Camera Package (for Native Camera Access)
196 Taking Photos on Android
197 Taking Photos on iOS + Managing Permissions
198 Showing an Image Preview
199 Creating a Custom Button
200 Getting Started with the Location Picker
201 Locating Users
202 Adding a Location Preview Map
203 Adding an Interactive Map (Google Maps & Apple Maps)
204 Allowing Map Interaction & Adding Markers
205 Confirming Picked Locations
206 Previewing Picked Locations
207 Adding a Form Submit Button
208 Managing Location & Image State in the Form
209 Converting Picked Locations to Human-Readable Addresses
210 Passing Entered Data to the AllPlaces Screen
211 Outputting a List Of Places
212 Styling Place Items
213 SQLite Getting Started & Initialization
214 Preparing Code to Insert Data into the SQLite Database
215 Inserting Places into the Database
216 Fetching Places from the Database
217 Adding the Place Details Screen
218 Fetching Place Detail Data from the Database
219 Showing a Readonly Map
220 Module Summary

Building React Native Apps Without Expo
221 Module Introduction
222 How Exactly Does Expo Work
223 Expo Alternatives
224 Setting Up Our System
225 Using Expo’s Bare Workflow
226 Using Native Device Features with the Bare Workflow
227 Ejecting To The Bare Workflow
228 Creating Projects with the React Native CLI (no Expo)
229 Non-Expo Apps & Native Device Features
230 Module Summary

Publishing React Native Apps
231 Module Introduction
232 Publishing Apps An Overview
233 Key Configuration Items & Considerations
234 Configuring App Names & Versions
235 A Quick Note About Environment Variables
236 Adding Icons & A Splash Screen
237 Building Expo Apps with EAS
238 EAS for iOS (even on Windows Devices)
239 Building for iOS Without Expo
240 Building for Android Without Expo
241 Configuring Android Apps

Push Notifications
242 Module Introduction
243 What are (Local) Notifications
244 Adding the Expo Notification Package
245 Scheduling Notifications
246 Configuring Scheduled Notifications
247 Handling Incoming Notifications
248 Local Notifications – Permissions
249 Reacting To Incoming Notifications
250 Reacting To User Interaction With Incoming Notifications
251 Understanding Push Notifications
252 Push Notifications Setup
253 Using the Push Token
254 Sending Push Notifications
255 Module Summary

Course Roundup
256 Course Roundup

Bonus JavaScript Refresher
257 Module Introduction
258 JavaScript – A Summary
259 Project Setup
260 Core Syntax Refresher
261 let & const
262 Arrow Functions
263 Objects Properties & Methods
264 Arrays & Array Methods
265 Arrays, Objects & Reference Types
266 Spread Operator & Rest Parameters
267 Destructuring
268 Async Code & Promises
269 Wrap Up
270 Module Resources

Bonus React.js Refresher
271 Module Introduction
272 What is React
273 A Starting Project
274 Understanding JSX
275 Understanding Components
276 Working with Multiple Components
277 Working with Props
278 Rendering Lists of Data
279 Handling Events
280 Parent-Child Communication
281 Managing State
282 More on State
283 User Input & Two-Way Binding
284 Wrap Up
285 Module Resources

286 Legacy Course Content
287 This Course Was Updated Update Information
288 Course Update Information & FAQs
289 Bonus More Content