React Native – The Practical Guide

React Native – The Practical Guide
React Native – The Practical Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 43.5 Hours | 17.6 GB
eLearning | Skill level: All Levels


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

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

Getting Started
1 Welcome!
2 What is React Native?
3 How React Native Works
4 Expo vs React Native CLI
5 Creating Our First React Native App
6 Working on Our First App
7 React Native Apps Are Hard Work!
8 React Native Alternatives
9 Course Requirements
10 Running the App on an Android Emulator
11 Running the App on an iOS Simulator
12 Course Outline
13 How to get the Most out of This Course
14 Useful Resources & Links

Diving into the Basics [COURSE GOALS APP]
15 Module Introduction
16 How to work with React Native Components
17 Setting Up A New Project
18 Planning the App
19 Working with Core Components
20 Getting Started with Styles
21 Flexbox & Layouts (Intro)
22 React Native Flexbox Deep Dive
23 Inline Styles & StyleSheet Objects
24 Working with State & Events
25 Outputting a List of Items
26 Styling List Items
27 Making it Scrollable with ScrollView!
28 A Better List: FlatList
29 Splitting the App Into Components
30 Passing Data Between Components
31 Working with Touchable Components
32 Deleting Items
33 Adding a Modal Overlay
34 More Flexbox Styling
35 Closing the Modal & Clearing Input
36 Finishing the Modal Styling
37 Wrap Up
38 Useful Resources & Links

Debugging React Native Apps
39 Module Introduction
40 What To Debug & How To Debug?
41 Running the App on a Real Device & Debugging
42 Handling Error Messages
43 Understanding Code Flow with console.log()
44 Using the Remote Debugger & Breakpoints
45 Working with the Device DevTools Overlay
46 Debugging the UI & Using React Native Debugger
47 Wrap Up
48 Useful Resources & Links

Components, Styling, Layouts – Building Real Apps [GUESS A NUMBER APP]
49 Module Introduction
50 Setup & App Planning
51 Adding a Custom Header Component
52 Adding a Screen Component
53 Working on the Layout
54 Styling a View as a “Card” Container (with Drop Shadows & Rounded Corners)
55 React Native Styling vs CSS Styling
56 Extracting a Card Component (Presentational Component)
57 Color Theming with Constants
58 Configuring & Styling a TextInput
59 Cleaning User Input & Controlling the Soft Keyboard
60 Resetting & Confirming User Input
61 Showing an Alert
62 Time to Finish the “Confirmation Box”
63 Adding Random Number Generation
64 Switching Between Multiple “Screens”
65 Adding Game Features: Hints & Validation
66 Checking the “Win” Condition with useEffect()
67 Finishing the Game Logic
68 Adding Custom Fonts
69 Installing expo-font
70 A Synthetic Style “Cascade”: Custom Wrapper Components & Global Styles
71 Adding Local Images
72 Styling Images
73 Working with Network (Web) Images
74 A Closer Look at the “Text” Component (and what you can do with it)
75 vs – A Summary
76 Building a Custom Button Component
77 Adding Icons
78 Exploring UI Libraries
79 Managing Past Guesses as a List
80 Styling List Items & Lists
81 ScrollView & Flexbox (Yes, that works!)
82 Using FlatList Instead of ScrollView
83 Wrap Up
84 Useful Resources & Links

Responsive & Adaptive User Interfaces and Apps
85 Module Introduction
86 Finding Improvement Opportunities
87 Working with More Flexible Styling Rules
88 Introducing the Dimensions API
89 Using Dimensions in “if” Checks
90 Calculating Sizes Dynamically
91 Problems with Different Device Orientations
92 Controlling Orientation & Using the KeyboardAvoidingView
93 Listening to Orientation Changes
94 Rendering Different Layouts
95 Fixing the GameOver Screen
96 Updating All Code to Update Dynamically
97 Expo’s ScreenOrientation API
98 Introducing the Platform API
99 Working with Platform.select() and Platform in “if” Checks
100 Using Platform-specific Code Files
101 Wrap Up
102 Useful Resources & Links

Navigation with React Navigation [THE MEALS APP]
103 Module Introduction
104 Planning the App
105 Adding Screens
106 Adding Fonts
107 Installing React Navigation & Adding Navigation to the App
108 Creating a StackNavigator
109 Navigating Between Screens
110 Alternative Navigation Syntax
111 Navigation to the “Meal Details” Screen
112 Pushing, Popping & Replacing
113 Outputting a Grid of Categories
114 Configuring the Header with Navigation Options
115 Passing & Reading Params Upon Navigation
116 Setting Dynamic Navigation Options
117 Default Navigation Options & Config
118 Grid Styling & Some Refactoring
119 Adding Meal Models & Data
120 Loading Meals for Categories
121 Rendering a Meals List
122 Passing Data to the Meal Detail Screen
123 Adding Header Buttons
124 Fixing the Shadows
125 Adding Tabs-based Navigation
126 Setting Icons and Configuring Tabs
127 navigationOptions inside of a Navigator
128 Adding MaterialBottomTabs
129 Adding a Favorites Stack
130 Adding a Menu Button & Drawer Navigation
131 Configuring the Drawer
132 More Navigation Config & Styling
133 Adding a DefaultText Component
134 Adding the MealDetail Screen Content
135 Time for the “Filters” Screen Content!
136 Passing Data Between Component & Navigation Options (Header)
137 [React Refresher] useEffect() & useCallback()
138 Wrap Up
139 Useful Resources & Links

State Management & Redux
140 Module Introduction
141 What is State & What is Redux?
142 Redux & Store Setup
143 Selecting State Slices
144 Redux Data & Navigation Options
145 Dispatching Actions & Reducer Logic
146 Switching the Favorites Icon
147 Rendering a Fallback Text
148 Adding Filtering Logic
149 Dispatching Filter Actions
150 Debugging Redux in React Native Apps
151 Wrap Up
152 Useful Resources & Links

Time to Practice – THE SHOP APP
153 Module Introduction
154 Planning the App
155 Creating the Basic Project Setup
156 The Products Overview Screen
157 Setting Up a Navigator
158 Styling the Product Items
159 Adding Touchable Components
160 Working on the Product Details Screen
161 Using Custom Fonts
162 Adding Items to the Cart
163 Implementing Header Buttons
164 Outputting Cart Items
165 Adding Logic to Delete Items
166 Adding Redux Logic for Orders
167 SideDrawer & The Orders Screen
168 Clearing the Cart
169 Styling Order Items
170 Making the “Show Details” Button Work
171 Building the “User Products” Screen
172 Reorganizing the ProductItem Component
173 Deleting Items
174 Adding Basic Editing & Navigation Logic
175 Handling User Input
176 Using Params to Submit User Input
177 Dispatching Actions for Creating & Updating
178 Time to Improve the App!
179 Wrap Up
180 Useful Resources & Links

Handling User Input
181 Module Introduction
182 Configuring TextInputs
183 Adding Basic Validation
184 Getting Started with useReducer()
185 Finishing the Merged Form & Input Management
186 Moving Input Logic Into A Separate Component
187 Connecting Input Component & Form
188 Tweaking Styles & Handling the Soft Keyboard
189 Alternatives & Wrap Up
190 Useful Resources & Links

Http Requests & Adding a Web Server + Database
191 Module Introduction
192 Setup & How To Send Requests
193 Installing Redux Thunk
194 Storing Products on a Server
195 Fetching Products from the Server
196 Displaying a Loading Spinner & Handling Errors
197 Setting Up a Navigation Listener
198 Updating & Deleting Products
199 Handling Additional Errors
200 Storing Orders
201 Displaying an ActivityIndicator
202 Fetching Stored Orders
203 Adding “Pull to Refresh”
204 Wrap Up
205 Useful Resources & Links

User Authentication
206 Module Introduction
207 How Authentication Works
208 Implementing a Basic Login Screen
209 Adding User Signup
210 Logging Users In
211 Managing the Loading State & Errors
212 Using the Token
213 Mapping Orders to Users
214 Improved Mapping (Scoping)
215 Implementing “Auto Login”
216 Adding Logout
217 Implementing “Auto Logout”
218 Auto-Logout & Android (Warning)
219 Wrap Up
220 Useful Resources & Links

Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
221 Module Introduction
222 Planning the App
223 Screen & Navigation Setup
224 Getting Started with the Form
225 Redux & Adding Places
226 Outputting a List of Places
227 Accessing the Device Camera
228 Configuring the Camera Access
229 Using the Picked Image
230 Storing the Image on the Filesystem
231 Diving into SQLite for Permanent Data Storage
232 Storing Data in the Local Database
233 Fetching Data from the Local Database
234 Getting the User Location
235 Showing a Map Preview of the Location
236 More on Environment Variables
237 Displaying an Interactive Map
238 Adding a Marker
239 Making the Picked Location “Saveable”
240 Storing Picked Places
241 Updating the Location Screen When the Location Changes
242 Storing the Address
243 Displaying the “Details” Screen
244 Finishing the “Map” Screen
245 Running the App on iOS
246 Running the App on Android
247 Wrap Up
248 Useful Resources & Links

Building Apps Without Expo
249 Module Introduction
250 Alternatives to Expo
251 Building Apps with Just the React Native CLI
252 Live Reload and RN CLI Apps
253 Adding Native Modules to Non-Expo Apps
254 Understanding Expo’s “Bare Workflow”
255 Ejecting from Expo’s “Managed Workflow”
256 When To Use Which?
257 Useful Resources & Links

Publishing React Native Apps
258 Module Introduction
259 Deployment Steps
260 Configuring the App & Publishing
261 Configuring Icons & The Splash Screen
262 Working with Offline Asset Bundles
263 Using “Over the Air Updates” (OTA Updates)
264 Building the Apps for Deployment (iOS & Android)
265 Publishing iOS Apps without Expo
266 Publishing Android Apps without Expo
267 Configuring Android Apps
268 Useful Resources & Links

Course Roundup & Next Steps
269 Roundup & Next Steps

About the Latest Course Update
270 About the Latest Course Update

[LEGACY] Diving into the Basics
271 What does LEGACY mean?
272 Module Introduction
273 Creating a New Project with Expo
274 Creating a New Project
275 JSX Elements you Can and Can’t Use
276 Switching Away from create-react-native-app
277 The Starting Project
278 How to Use the Attached Code
279 Running the App on an Android Simulator (+ Setup)
280 Running our App on a Real Android Device
281 Preparing XCode (for iOS)
282 Running our App on an iOS Simulator
283 Running our App on an iOS Device
284 A Good Development Setup
285 Working on the App: Adding a Textinput
286 Styling – Understanding the Basics
287 More on Flexbox
288 Positioning Elements with Flexbox
289 Adding a Button and Managing State
290 Creating a Custom Component
291 [OPTIONAL] Assignment Solution
292 Listening to Touch Events
293 Reacting to Press Events
294 Using a ScrollView
295 Rendering Lists Correctly
296 Adding Static Images
297 Using Network Images
298 Adding a Modal
299 React vs React Native
300 JavaScript – Supported Features
301 Wrap Up
302 Useful Resources & Links

[LEGACY] Using Redux with React Native
303 Module Introduction
304 A Brief Redux Refresher
305 Install react-redux v6
306 Installing Redux and Creating a Basic Setup
307 Setting Up Actions
308 Setting Up the Reducer
309 Creating the Store
310 Connecting React Native to Redux
311 Wrap Up
312 Useful Resources & Links

[LEGACY] Debugging React Native Apps
313 Module Introduction
314 Using the Remote JavaScript Debugging console.log
315 Debugging with Breakpoints
316 Debugging+++ with React Native Debugger
317 Debugging Redux
318 Wrap Up
319 Useful Resources & Links

[LEGACY] Linking and Using Third Party Libraries
320 Module Introduction
321 Installing Libraries
322 Automatic Linking
323 Linking Libraries on iOS
324 Linking Libraries on Android
325 Using Library Features: Adding Icons
326 Wrap Up

[LEGACY] Navigation in React Native Apps
327 Module Introduction
328 Navigation in Web Apps vs Native Apps
329 Exploring Native Navigation Solutions
330 Fixing Installation Issues with React Native Navigation
331 Adding React Native Navigation to iOS
332 Adding React Native Navigation to Android
333 Finishing the Library Setup
334 Registering and Rendering a Screen
335 Adding a Tabs Screen (Tabs Navigation)
336 Adding Icons to Tabs
337 Connecting Screens to Redux
338 Updating Redux
339 Pushing Pages (Navigating “Forwards”)
340 Popping Pages (Navigating “Backwards”)
341 More Navigator Methods
342 Adding a Side Drawer
343 Using Navigation Events & Toggling the Drawer
344 Finishing the Drawer
345 Wrap Up
346 Useful Resources & Links

[LEGACY] Styling & Animating React Native Apps (Correctly)
347 Module Introduction
348 Using StyleSheet vs Normal JS Objects
349 Vanilla CSS vs React Native Styles
350 Flexbox in Action
351 Styling with Relative Units
352 “Global Styles” with Custom Components
353 Synthetic Cascading of Styles
354 Styling Text
355 Cascading Text Styles
356 Adding a Background Image
357 Creating a Re-Usable Custom Button
358 Editing the “Share Place” Screen
359 Styling & Splitting the “Share Place” Screen
360 Finishing the “Share Place” Screen
361 Your Challenge!
362 Styling the Side Drawer
363 Quick Bug Fix: PlaceInput Component
364 Intro: Cross Platform Styles & Responsiveness
365 Cross-Platform Styling Made Easy!
366 Using the Platform API
367 Loading Different Icons for Different Platforms
368 Using Different Entry Points (into the App)
369 Cross-Platform UI Libraries
370 The “Responsive Styling” Problem
371 Responsive Design Solutions
372 Using the Dimensions API
373 Adjusting Styles Dynamically (to changing Width / Height)
374 A Better Responsive Solution
375 Bug Fix: Centering with Margins
376 Cleaning Up Dimensions Listeners
377 Styling Navigation Items (react-native-navigation)
378 Preparing the App for Animations
379 Using the Animated API
380 [OPTIONAL] Assignment Solution
381 Animations Summary
382 Wrap Up
383 Useful Resources & Links

[LEGACY] Handling User Input
384 Module Introduction
385 Managing Input/ Control State
386 Adding Custom Validation Logic
387 Using the Validation State
388 Dispatching an Auth Action
389 Switching Form (Auth) Modes
390 Configuring Text Input Components
391 Handling the Soft Keyboard
392 Wrap Up
393 KeyboardAvoidingView and ScrollView
394 Useful Resources & Links

[LEGACY] Using Native Device Features – Maps, Camera & Image Gallery
395 Module Introduction
396 A Note on Installing React-Native Maps
397 Installing react-native-maps
398 Rendering a Map
399 Picking a Location on the Map
400 Adding a Map Marker
401 Animating Map Movement
402 Locating the User
403 Storing the Picked Location with Redux
404 Installing react-native-image-picker
405 Fixing Issues with React Native Image Picker
406 Using the Image Picker
407 Storing the Picked Images
408 Image Picker and the Data it Returns
409 Wrap Up
410 Useful Resources & Links

[LEGACY] Networking – Sending Http Requests
411 Module Introduction
412 Sending Http Requests – Theory
413 Firebase & The Right Database
414 Creating the Server
415 Using the Fetch-API
416 Storing Data in Firebase
417 Adjusting Firebase Functions (Fixing an Error)
418 Storing Images
419 Fixing Firebase Function Linting Errors
420 Finishing the Image Upload Function
421 Storing the Remaining Data
422 Adding the Activity Indicator
423 Handling Errors
424 Http, fetch() and Error Handling
425 Getting Data from the Server
426 Fixing an Error
427 Wrap Up
428 Useful Resources & Links

[LEGACY] Authentication in React Native Apps
429 Module Introduction
430 How Authentication Works in React Native Apps
431 Enabling Firebase Authentication
432 Signing Users Up
433 Using the Authentication Result (Response)
434 Supporting Signup and Login
435 Adding User Login
436 Protecting Routes on Firebase
437 Storing the Auth Token in Redux
438 Using the Auth Token
439 Fetching the Token in a Re-Usable Way
440 Protecting the Firebase Cloudfunction
441 Adding Places (Authenticated)
442 Storing the Token in AsyncStorage
443 Adding an Auto-Signin Functionality
444 Managing the Token Expiration
445 Clearing the Auth Storage (AsyncStorage)
446 Refreshing the Token
447 Adding User Logout
448 Refreshing the Token Without App Reloads
449 Wrap Up
450 Useful Resources & Links

[LEGACY] Polishing the App
451 Module Introduction
452 Identifying “Improvement Potential”
453 Shrinking Image Sizes
454 Resetting the “Share Place” Screen
455 Redirecting to Another Tab
456 Loading Places All The Time!
457 Improving Http Error Handling
458 Adjust the Image-Delete Code
459 Cleaning Stored Images (on Firebase)
460 Wrap Up

[LEGACY] Publishing the App
461 Module Introduction
462 Adding Launcher Icons
463 Adding a Splash Screen
464 Configuring & Building the App
465 Publishing to Google Play Store (Android)
466 Publishing to the App Store (iOS)
467 Publishing the App – Detailed Instructions
468 Useful Resources & Links

[LEGACY] Round Up
469 Course Roundup
470 Bonus: More Content!