React Native - The Practical Guide 2020

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

Start

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 animate React Native apps, 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 "Awesome 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!

Who this course is for:

  • 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

Section: Getting Started

1. Welcome! (3:13) Preview
2. What is React Native? (4:22) Preview
3. How React Native Works (6:15) Preview
4. Expo vs React Native CLI (6:06) Preview
5. Creating Our First React Native App (7:47) Preview
6. Join our Online Learning Community (1:00) Preview
7. Working on Our First App (9:42) Preview
8. React Native Apps Are Hard Work! (2:53) Preview
9. React Native Alternatives (4:51) Preview
10. Course Requirements (1:26) Preview
11. Course Requirement Refreshers (1:00)
12. Running the App on an Android Emulator (8:36) Preview
13. Running the App on an iOS Simulator (3:15) Preview
14. Course Outline (7:41) Preview
15. How to get the Most out of This Course (3:53) Preview
16. Useful Resources & Links (1:00) Preview

Section: Diving into the Basics [COURSE GOALS APP]

17. Module Introduction (0:33)
18. How to work with React Native Components (2:45)
19. Setting Up A New Project (3:04)
20. Planning the App (1:42)
21. Working with Core Components (4:56)
22. Getting Started with Styles (7:52)
23. Flexbox & Layouts (Intro) (3:54)
24. React Native Flexbox Deep Dive (12:19)
25. Inline Styles & StyleSheet Objects (5:12)
26. Quiz 1: Components, Styles, Layouts (1:00)
27. Working with State & Events (9:44)
28. Outputting a List of Items (3:51)
29. Styling List Items (3:21)
30. Making it Scrollable with ScrollView! (3:48)
31. A Better List: FlatList (7:20)
32. Quiz 2: More Components & Lists (1:00)
33. Splitting the App Into Components (4:34)
34. Passing Data Between Components (6:48)
35. Working with Touchable Components (8:39)
36. Deleting Items (4:57)
37. Adding a Modal Overlay (6:06)
38. More Flexbox Styling (3:49)
39. Closing the Modal & Clearing Input (6:45)
40. Finishing the Modal Styling (5:08)
41. Wrap Up (2:29)
42. Useful Resources & Links (1:00)

Section: Debugging React Native Apps

43. Module Introduction (0:32)
44. What To Debug & How To Debug? (6:18)
45. Handling Error Messages (5:26)
46. Understanding Code Flow with console.log() (4:06)
47. Using the Remote Debugger & Breakpoints (4:03)
48. Working with the Device DevTools Overlay (2:17)
49. Debugging the UI & Using React Native Debugger (7:25)
50. Wrap Up (1:02)
51. Useful Resources & Links (1:00)

Section: Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

52. Module Introduction (2:33)
53. Setup & App Planning (3:25)
54. Adding a Custom Header Component (7:54)
55. Adding a Screen Component (5:32)
56. Working on the Layout (7:03)
57. Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners) (7:03)
58. React Native Styling vs CSS Styling (1:00)
59. Extracting a Card Component (Presentational Component) (5:57)
60. Quiz 3: Components & Styling (1:00)
61. Color Theming with Constants (6:03)
62. Configuring & Styling a TextInput (10:19)
63. Cleaning User Input & Controlling the Soft Keyboard (5:23)
64. Resetting & Confirming User Input (8:28)
65. Quiz 4: Configuring Components (1:00)
66. Showing an Alert (2:50)
67. Time to Finish the "Confirmation Box" (7:44)
68. Adding Random Number Generation (6:34)
69. Switching Between Multiple "Screens" (10:41)
70. Adding Game Features: Hints & Validation (11:02)
71. Checking the "Win" Condition with useEffect() (10:11)
72. Finishing the Game Logic (5:17)
73. Adding Custom Fonts (9:50)
74. Installing expo-font (1:00)
75. A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles (10:34)
76. Adding Local Images (4:56)
77. Styling Images (6:07)
78. Working with Network (Web) Images (2:51)
79. A Closer Look at the "Text" Component (and what you can do with it) (9:09)
80. vs - A Summary (1:00)
81. Building a Custom Button Component (11:41)
82. Adding Icons (4:43)
83. Exploring UI Libraries (2:58)
84. Managing Past Guesses as a List (7:56)
85. Styling List Items & Lists (8:54)
86. ScrollView & Flexbox (Yes, that works!) (7:20)
87. Using FlatList Instead of ScrollView (9:50)
88. Wrap Up (5:14)
89. Useful Resources & Links (1:00)

Section: Responsive & Adaptive User Interfaces and Apps

90. Module Introduction (2:26)
91. Finding Improvement Opportunities (3:51)
92. Working with More Flexible Styling Rules (3:08)
93. Introducing the Dimensions API (3:50)
94. Using Dimensions in "if" Checks (7:51)
95. Calculating Sizes Dynamically (7:02)
96. Problems with Different Device Orientations (3:11)
97. Controlling Orientation & Using the KeyboardAvoidingView (3:49)
98. Listening to Orientation Changes (5:31)
99. Rendering Different Layouts (7:09)
100. Fixing the GameOver Screen (2:09)
101. Quiz 5: The Dimensions API & Responsive UIs (1:00)
102. Expo's ScreenOrientation API (3:42)
103. Introducing the Platform API (4:25)
104. Working with Platform.select() and Platform in "if" Checks (7:04)
105. Using Platform-specific Code Files (3:32)
106. Quiz 6: The Platform API (1:00)
107. Using the SafeAreaView (5:55)
108. Wrap Up (1:37)
109. Useful Resources & Links (1:00)

Section: Navigation with React Navigation [THE MEALS APP]

110. Module Introduction (1:13)
111. Planning the App (4:00)
112. Screen & Navigation Setup (13:27)
113. Getting Started with the Form (5:36)
114. Redux & Adding Places (7:29)
115. Outputting a List of Places (6:36)
116. Accessing the Device Camera (17:26)
117. Configuring the Camera Access (5:10)
118. Using the Picked Image (4:59)
119. Storing the Image on the Filesystem (8:29)
120. Diving into SQLite for Permanent Data Storage (10:24)
121. Storing Data in the Local Database (7:52)
122. Fetching Data from the Local Database (7:00)
123. Getting the User Location (11:00)
124. Showing a Map Preview of the Location (13:24)
125. More on Environment Variables (1:00)
126. Displaying an Interactive Map (8:31)
127. Adding a Marker (5:27)
128. Making the Picked Location "Saveable" (7:22)
129. Storing Picked Places (2:50)
130. Updating the Location Screen When the Location Changes (4:25)
131. Storing the Address (7:33)
132. Displaying the "Details" Screen (6:28)
133. Finishing the "Map" Screen (6:19)
134. Running the App on iOS (3:05)
135. Running the App on Android (1:21)
136. Wrap Up (1:35)
137. Useful Resources & Links (1:00)

Section: State Management & Redux

138. Module Introduction (1:04)
139. What is State & What is Redux? (4:08)
140. Redux & Store Setup (10:58)
141. Selecting State Slices (8:30)
142. Redux Data & Navigation Options (5:04)
143. Dispatching Actions & Reducer Logic (13:55)
144. Switching the Favorites Icon (7:09)
145. Rendering a Fallback Text (2:43)
146. Adding Filtering Logic (6:16)
147. Dispatching Filter Actions (6:08)
148. Debugging Redux in React Native Apps (1:00)
149. Wrap Up (1:33)
150. Useful Resources & Links (1:00)

Section: Time to Practice - THE SHOP APP

151. Module Introduction (1:34)
152. Planning the App (10:42)
153. Creating the Basic Project Setup (6:08)
154. The Products Overview Screen (9:49)
155. Setting Up a Navigator (10:41)
156. Styling the Product Items (19:15)
157. Adding Touchable Components (12:26)
158. Working on the Product Details Screen (5:56)
159. Using Custom Fonts (5:10)
160. Adding Items to the Cart (21:08)
161. Implementing Header Buttons (18:29)
162. Outputting Cart Items (11:48)
163. Adding Logic to Delete Items (10:33)
164. Adding Redux Logic for Orders (9:09)
165. SideDrawer & The Orders Screen (13:07)
166. Clearing the Cart (1:43)
167. Styling Order Items (12:43)
168. Making the "Show Details" Button Work (8:55)
169. Building the "User Products" Screen (9:36)
170. Reorganizing the ProductItem Component (5:29)
171. Deleting Items (7:57)
172. Adding Basic Editing & Navigation Logic (6:37)
173. Handling User Input (12:05)
174. Using Params to Submit User Input (2:16)
175. Dispatching Actions for Creating & Updating (15:34)
176. Time to Improve the App! (9:22)
177. Wrap Up (1:12)
178. Useful Resources & Links (1:00)

Section: Handling User Input

179. Module Introduction (0:59)
180. Configuring TextInputs (8:21)
181. Adding Basic Validation (5:45)
182. Getting Started with useReducer() (12:12)
183. Finishing the Merged Form & Input Management (12:59)
184. Moving Input Logic Into A Separate Component (11:18)
185. Connecting Input Component & Form (14:47)
186. Tweaking Styles & Handling the Soft Keyboard (5:28)
187. Alternatives & Wrap Up (2:06)
188. Useful Resources & Links (1:00)

Section: Http Requests & Adding a Web Server + Database

189. Module Introduction (1:03)
190. Setup & How To Send Requests (3:27)
191. Installing Redux Thunk (2:03)
192. Storing Products on a Server (9:05)
193. Fetching Products from the Server (7:53)
194. Displaying a Loading Spinner & Handling Errors (13:03)
195. Setting Up a Navigation Listener (5:15)
196. Updating & Deleting Products (4:47)
197. Handling Additional Errors (9:31)
198. Storing Orders (4:34)
199. Displaying an ActivityIndicator (3:12)
200. Fetching Stored Orders (8:15)
201. Adding "Pull to Refresh" (4:12)
202. Wrap Up (1:07)
203. Useful Resources & Links (1:00)

Section: User Authentication

204. Module Introduction (0:44)
205. How Authentication Works (3:36)
206. Implementing a Basic Login Screen (14:57)
207. Adding User Signup (12:44)
208. Logging Users In (6:26)
209. Managing the Loading State & Errors (9:01)
210. Using the Token (11:04)
211. Mapping Orders to Users (7:42)
212. Improved Mapping (Scoping) (1:14)
213. Implementing "Auto Login" (16:50)
214. Adding Logout (7:20)
215. Implementing "Auto Logout" (15:26)
216. Auto-Logout & Android (Warning) (1:00)
217. Wrap Up (1:03)
218. Useful Resources & Links (1:00)

Section: Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]

219. Module Introduction (1:13)
220. Planning the App (4:00)
221. Screen & Navigation Setup (13:27)
222. Getting Started with the Form (5:36)
223. Redux & Adding Places (7:29)
224. Outputting a List of Places (6:36)
225. Accessing the Device Camera (17:26)
226. Configuring the Camera Access (5:10)
227. Using the Picked Image (4:59)
228. Storing the Image on the Filesystem (8:29)
229. Diving into SQLite for Permanent Data Storage (10:24)
230. Storing Data in the Local Database (7:52)
231. Fetching Data from the Local Database (7:00)
232. Getting the User Location (11:00)
233. Showing a Map Preview of the Location (13:24)
234. More on Environment Variables (1:00)
235. Displaying an Interactive Map (8:31)
236. Adding a Marker (5:27)
237. Making the Picked Location "Saveable" (7:22)
238. Storing Picked Places (2:50)
239. Updating the Location Screen When the Location Changes (4:25)
240. Storing the Address (7:33)
241. Displaying the "Details" Screen (6:28)
242. Finishing the "Map" Screen (6:19)
243. Running the App on iOS (3:05)
244. Running the App on Android (1:21)
245. Wrap Up (1:35)
246. Useful Resources & Links (1:00)

Section: Building Apps Without Expo

247. Module Introduction (3:32)
248. Alternatives to Expo (6:01)
249. Building Apps with Just the React Native CLI (9:26)
250. Live Reload and RN CLI Apps (1:00)
251. Adding Native Modules to Non-Expo Apps (8:55)
252. Understanding Expo's "Bare Workflow" (8:35)
253. Ejecting from Expo's "Managed Workflow" (10:59)
254. When To Use Which? (5:28)
255. Useful Resources & Links (1:00)

Section: Publishing React Native Apps

256. Module Introduction (0:41)
257. Deployment Steps (4:31)
258. Configuring the App & Publishing (8:09)
259. Configuring Icons & The Splash Screen (9:13)
260. Working with Offline Asset Bundles (3:03)
261. Using "Over the Air Updates" (OTA Updates) (7:43)
262. Building the Apps for Deployment (iOS & Android) (17:27)
263. Publishing iOS Apps without Expo (10:23)
264. Configuring Android Apps (1:00)
265. Publishing Android Apps without Expo (7:21)
266. Useful Resources & Links (1:00)

Section: Updating to React Navigation 5+

267. Module Introduction (1:07)
268. What Changed? (3:55)
269. Preparing the Project (4:02)
270. More Information & Updating the Project Dependencies (2:08)
271. From the "Registry-like" to a "Component-based" Approach (10:35)
272. Starting the Migration Process (11:37)
273. Converting more Stack Navigators (6:49)
274. Adding Drawer Navigation (8:12)
275. Replacing the Auth Flow & Switch Navigator (12:50)
276. Logout & Further Fixes (4:57)
277. Extracting Params (7:47)
278. Setting Options Dynamically (3:02)
279. Remaining Migrations (3:02)
280. A Summary Of All Changes (5:47)
281. Useful Resources & Links (1:00)

Section: Push Notifications

282. Module Introduction (1:18)
283. Understanding Notifications (3:36)
284. Sending Local Notifications (8:16)
285. Getting Permissions (7:34)
286. Controlling How Notifications Are Displayed (3:36)
287. Reacting to Foreground Notifications (4:26)
288. Reacting to Background Notifications (4:13)
289. How Push Notifications Work (3:39)
290. Expo & Push Notifications (6:45)
291. Getting a Push Token (4:44)
292. Sending Push Notifications (2:59)
293. Using Expo's Push Server (4:29)
294. More on Push Tokens (5:49)
295. Adding Push Notifications to the Shop App (1/3) (10:06)
296. Adding Push Notifications to the Shop App (2/3) (14:13)
297. Adding Push Notifications to the Shop App (3/3) (2:37)
298. Push Notifications in non-Expo Managed Apps (1:00)
299. Module Resources (1:00)

Section: Course Roundup & Next Steps

300. Roundup & Next Steps (3:52)

Section: JavaScript Refresher

301. Module Introduction (1:36)
302. JavaScript in a Nutshell (2:35)
303. Refreshing the Core Syntax (4:34)
304. let & const (2:27)
305. Arrow Functions (5:17)
306. Objects, Properties & Methods (3:19)
307. Arrays & Array Methods (4:16)
308. Arrays, Objects & Reference Types (2:13)
309. Spread Operators & REST Parameters (6:40)
310. Destructuring (5:37)
311. Async Code & Promises (10:28)
312. Template Literals (1:00)
313. Wrap Up (0:50)
314. Useful Resources & Links (0:50)

Section: React Refresher

315. Module Introduction (1:12)
316. What is React? (3:13)
317. Setting Up a Starting Project (4:03)
318. Understanding JSX (5:31)
319. Understanding Components (2:50)
320. Working with Multiple Components (7:04)
321. Working with Props (6:52)
322. Rendering Lists of Data (4:30)
323. Handling Events (7:24)
324. Child Parent Communication (4:38)
325. Managing State (5:54)
326. More on State (4:20)
327. Fetching User Input (Two-way Binding) (5:52)
328. Wrap Up (2:11)
329. Useful Resources & Links (1:00)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.