React Native - The Practical Guide [2024 Edition]

28h 33m 46s
English
Paid

Course description

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?

Read more about the course

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!

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

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
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

What you'll learn:

  • Build native mobile apps with JavaScript and React
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 275 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Native - The Practical Guide [2024 Edition]

0:00
/
#1: Welcome To This Course & What To Expect!

All Course Lessons (275)

#Lesson TitleDurationAccess
1
Welcome To This Course & What To Expect! Demo
01:06
2
What Is React Native?
03:28
3
A Glance Under The Hood Of React Native
05:06
4
Creating React Native Projects: Expo CLI vs React Native CLI
06:27
5
Creating a New React Native Project
04:40
6
Analyzing The Created Project
05:17
7
Running Our First App On A Real Device!
04:21
8
Setting Up A Local Development Environment
09:27
9
About This Course
06:55
10
Module Introduction
01:45
11
Exploring Core Components & Component Styling
07:53
12
Working With Core Components
07:01
13
Styling React Native Apps
10:14
14
Exploring Layouts & Flexbox
03:20
15
React Native & Flexbox
02:32
16
Using Flexbox To Create Layouts
05:09
17
Flexbox - A Deep Dive
12:20
18
Improving The Layout
07:13
19
Handling Events
07:30
20
Managing A List Of Course Goals (in our Demo App)
07:11
21
iOS & Android Styling Differences
08:51
22
Making Content Scrollable with ScrollView
06:16
23
Optimizing Lists with FlatList
13:42
24
Splitting Components Into Smaller Components
05:12
25
Utilizing Props
02:34
26
Working on the "Goal Input" Component
09:41
27
Handling Taps with the Pressable Component
03:35
28
Making Items Deletable & Using IDs
05:18
29
Adding an Android Ripple Effect & an iOS Alternative
04:53
30
Adding a Modal Screen
06:58
31
Styling the Modal Overlay
05:42
32
Opening & Closing the Modal
02:31
33
Working with Images & Changing Colors
06:05
34
App Finishing Touches
07:16
35
Module Summary
03:33
36
Module Introduction
01:18
37
Handling Errors
04:38
38
Logging to the Console
01:53
39
Debugging JavaScript Remotely
03:06
40
Using the React DevTools
03:28
41
Using the Documentation
00:35
42
Module Introduction & What We'll Build
02:07
43
Starting Setup & Analyzing the Target App
03:04
44
Setting Up our Screen Components
05:41
45
Creating Custom Buttons
06:59
46
Styling for Android & iOS
11:17
47
Styling the "Number Input" Element
06:53
48
Configuring the TextInput Field
03:22
49
Adding Visual Feedback to the Buttons
15:47
50
Improving the Buttons
07:39
51
Coloring the Components & The Overall App
03:20
52
Adding a Linear Gradient
04:03
53
Adding a Background Image
07:04
54
Getting Started with the Game Logic
07:11
55
Handling User Input & Showing an Alert Dialog
07:31
56
Switching Screens Programmatically
07:12
57
Starting Work on the Game Screen
04:46
58
Respecting Device Screen Restrictions with the SafeAreaView
03:07
59
Creating a Title Component
04:38
60
Managing Colors Globally
06:54
61
Creating, Using & Displaying Random Numbers
12:44
62
Adding Game Control Buttons ("+" & "-") to the App
15:28
63
Checking for "Game Over"
11:13
64
Improving the Game Screen Visuals
11:41
65
Using "Cascading Styles"
05:46
66
Working with Icons (Button Icons)
04:09
67
Adding & Using Custom Fonts with React Native Apps
07:04
68
Adding a (Foreground) Image
09:02
69
Using & Styling Nested Text
04:53
70
Adding Logic to (Re-)Start Games & Displaying a Summary Screen
06:59
71
Logging Game Rounds
05:52
72
Outputting Log Data with FlatList
02:51
73
Styling the Game Round Logs
08:11
74
Finishing Touches
04:34
75
Module Summary
02:57
76
Module Introduction
04:06
77
Setting Dynamic Widths
04:30
78
Introducing the Dimensions API
06:40
79
Adjusting Image Sizes with the Dimensions API
04:05
80
Understanding Screen Orientation Problems
03:17
81
Setting Sizes Dynamically (for different Orientations)
07:57
82
Managing Screen Content with KeyboardAvoidingView
05:50
83
Improving the Landscape Mode UI
07:55
84
Further Improvements with useWindowDimensions
04:36
85
Writing Platform-specific Code with the Platform API
09:00
86
Styling the Status Bar
02:09
87
Module Introduction
01:29
88
What Is Navigation?
04:22
89
Getting Started with the App & Outputting Meal Categories
09:32
90
Displaying Items in a Grid
14:29
91
Getting Started with the React Navigation Package
09:45
92
Implementing Navigation Between Two Screens
08:31
93
Understanding the useNavigation Hook
03:39
94
Working with Route Parameters To Pass Data Between Screens
06:37
95
Displaying Meals
07:52
96
Adding Images & Styling
17:12
97
Styling Screen Headers & Backgrounds
08:00
98
Setting Navigation Options Dynamically
09:05
99
Adding & Configuring the Meal Details Screen
08:58
100
Outputting Content in the Meal Detail Screen
09:25
101
Finishing the Meal Detail Screen
18:58
102
Adding Header Buttons
06:56
103
Adding an Icon Button to a Header
04:51
104
Adding Drawer Navigation & Creating a Drawer
09:33
105
Configuring the Drawer Navigator & The Drawer
10:10
106
Adding, Configuring & Using Bottom Tabs
06:31
107
Nesting Navigators
13:05
108
App Finishing Touches
03:53
109
Module Summary
02:44
110
Module Introduction
03:05
111
Getting Started with React's Context API
05:23
112
Managing App-wide State with Context
05:00
113
Using the Created Context with useContext
05:12
114
Managing Favorite Meals with the Context API
09:40
115
Getting Started with Redux & Redux Toolkit
04:46
116
Working with Redux Slices
07:03
117
Managing Redux State & Dispatching Actions
05:14
118
Using Redux State in Components
01:46
119
Module Summary
01:17
120
Module Introduction & What We'll Build
02:22
121
The Starting Setup
06:18
122
Adding Navigation (with React Navigation) & Configuring Navigation
08:29
123
Adding Global Colors & Editing Navigation Configuration
10:04
124
Creating Key App Components to Display Expenses
06:18
125
Continuing Work on the Expense-related Components
06:49
126
Adding Dummy Expense Data
05:38
127
Outputting a List of Expenses
04:46
128
Improving App Layout & Styling
07:51
129
Working on Expense List Items
13:25
130
Formatting Dates
04:42
131
Adding a Header Button & Making Expense Items Tappable
11:33
132
Navigating Programmatically Between Screens
05:17
133
Styling The Expense Management Screen
03:07
134
Supporting Different Editing Modes & Using Route Parameters
07:01
135
Adding a "Delete" Button
05:35
136
Adding Custom Buttons
09:41
137
Closing A Modal Programmatically
03:22
138
Managing App-wide State With Context
18:18
139
Using Context From Inside Components
08:20
140
Deleting & Updating Expenses
06:33
141
Finishing Touches
04:26
142
Module Introduction
01:27
143
Building a Custom Input Component
08:35
144
Creating an Overall Form
05:58
145
Configuring the Form Input Elements
04:10
146
Adding Styling
07:41
147
Setting the Form Layout
06:42
148
Handling User Input in a Generic Way
09:57
149
Managing Form State & Submission
04:55
150
Working with Entered Data
05:21
151
Setting & Using Default Values
07:09
152
Adding Validation
06:39
153
Providing Visual Validation Feedback
09:19
154
Adding Error Styling
04:55
155
Module Summary
01:42
156
Module Introduction
02:23
157
Backend Setup (Firebase)
03:30
158
Installing Axios
02:13
159
Sending POST Http Requests
06:35
160
Fetching Backend Data (GET Requests)
09:26
161
Transforming & Using Fetched Data
08:20
162
Using Response Data from POST Requests
05:44
163
Updating & Deleting Backend Data (UPDATE & DELETE Requests)
07:51
164
Managing the Loading State
08:58
165
Handling Request Errors
12:03
166
Module Summary
00:59
167
Module Introduction
02:00
168
Demo App Walkthrough
03:57
169
How Does Authentication Work?
02:59
170
Backend Setup
05:36
171
Controlling Signup & Login Screens
04:40
172
Sending Authentication Requests to the Backend
05:20
173
Creating New Users
05:40
174
Logging Users In
06:32
175
Authentication Error Handling
03:50
176
Storing & Managing the User Authentication State (with Context)
07:14
177
Extracting the Authentication Token
04:17
178
Protecting Screens
06:58
179
Adding a Logout Functionality
03:39
180
Accessing Protected Resources
10:18
181
Storing Auth Tokens on the Device & Logging Users In Automatically
11:47
182
Module Summary
02:14
183
Module Introduction
02:38
184
Adding a "Favorite Places" List
08:55
185
Editing the Favorite Place Items
08:00
186
Adding an "Add Place" Screen + Navigation
06:35
187
Adding a Header Button
07:18
188
Global Colors & Styling
05:04
189
Getting Started with a Custom Form
06:00
190
Adding & Configuring the Camera Package (for Native Camera Access)
06:20
191
Taking Photos on Android
06:09
192
Taking Photos on iOS + Managing Permissions
08:29
193
Showing an Image Preview
06:42
194
Creating a Custom Button
06:02
195
Getting Started with the Location Picker
05:34
196
Locating Users
09:07
197
Adding a Location Preview Map
12:26
198
Adding an Interactive Map (Google Maps & Apple Maps)
08:33
199
Allowing Map Interaction & Adding Markers
05:11
200
Confirming Picked Locations
07:40
201
Previewing Picked Locations
09:16
202
Adding a Form Submit Button
04:45
203
Managing Location & Image State in the Form
09:31
204
Converting Picked Locations to Human-Readable Addresses
09:46
205
Passing Entered Data to the "AllPlaces" Screen
05:21
206
Outputting a List Of Places
04:40
207
Styling Place Items
06:30
208
SQLite: Getting Started & Initialization
16:12
209
Preparing Code to Insert Data into the SQLite Database
07:10
210
Inserting Places into the Database
03:18
211
Fetching Places from the Database
09:36
212
Adding the Place Details Screen
09:16
213
Fetching Place Detail Data from the Database
08:37
214
Showing a Readonly Map
09:10
215
Module Summary
02:29
216
Module Introduction
01:31
217
How Exactly Does Expo Work?
04:21
218
Expo Alternatives
05:35
219
Setting Up Our System
04:44
220
Using Expo's Bare Workflow
07:49
221
Using Native Device Features with the Bare Workflow
07:27
222
Ejecting To The Bare Workflow
05:42
223
Creating Projects with the React Native CLI (no Expo)
07:12
224
Non-Expo Apps & Native Device Features
03:28
225
Module Summary
01:52
226
Module Introduction
01:37
227
Publishing Apps: An Overview
04:06
228
Key Configuration Items & Considerations
02:31
229
Configuring App Names & Versions
08:17
230
A Quick Note About Environment Variables
01:52
231
Adding Icons & A Splash Screen
03:41
232
Building Expo Apps with EAS
14:32
233
EAS for iOS (even on Windows Devices)
16:47
234
Building for iOS Without Expo
10:24
235
Building for Android Without Expo
07:22
236
Module Introduction
01:03
237
What are (Local) Notifications?
02:09
238
Adding the Expo Notification Package
06:12
239
Scheduling Notifications
06:06
240
Handling Incoming Notifications
05:23
241
Reacting To Incoming Notifications
07:11
242
Reacting To User Interaction With Incoming Notifications
04:52
243
Understanding Push Notifications
06:41
244
Push Notifications Setup
05:14
245
Using the Push Token
08:55
246
Sending Push Notifications
08:43
247
Module Summary
02:25
248
Course Roundup
00:56
249
Module Introduction
01:37
250
JavaScript - A Summary
02:36
251
Core Syntax Refresher
04:35
252
let & const
02:29
253
Arrow Functions
05:18
254
Objects: Properties & Methods
03:20
255
Arrays & Array Methods
04:17
256
Arrays, Objects & Reference Types
02:14
257
Spread Operator & Rest Parameters
06:42
258
Destructuring
05:38
259
Async Code & Promises
10:29
260
Wrap Up
00:51
261
Module Introduction
01:13
262
What is React
03:14
263
A Starting Project
04:04
264
Understanding JSX
05:32
265
Understanding Components
02:51
266
Working with Multiple Components
07:05
267
Working with Props
06:53
268
Rendering Lists of Data
04:31
269
Handling Events
07:25
270
Parent-Child Communication
04:39
271
Managing State
05:55
272
More on State
04:21
273
User Input & Two-Way Binding
05:53
274
Wrap Up
02:12
275
This Course Was Updated | Update Information
07:17

Unlock unlimited learning

Get instant access to all 274 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

A Complete React Native Course - Redux - Context API - 2020

A Complete React Native Course - Redux - Context API - 2020

Sources: udemy
A complete course to start react native cross platform mobile application development. This react native course is a beginners level course that will give you e
7 hours 42 seconds
React Native Styling Basics

React Native Styling Basics

Sources: Simon Grimm
Master the art of styling in React Native with our comprehensive course, “React Native Styling Basics.” Learn how to use the StyleSheet API, the Flexbox...
1 hour 18 minutes 28 seconds
Event System with Express API and Authentication

Event System with Express API and Authentication

Sources: Simon Grimm
Let's create a full-fledged event system with authentication using React Native and Express API. Together, we will go through all the stages of full-stack...
Universal Apps with Tamagui

Universal Apps with Tamagui

Sources: Simon Grimm
Create a universal app with React Native and Tamagui. Learn how to use the same codebase for iOS, Android, and Web. Discover the power of Tamagui in bridging...
1 hour 35 minutes 34 seconds
React Native Mastery - the Ultimate React Native and Expo Course

React Native Mastery - the Ultimate React Native and Expo Course

Sources: Vadim Savin (notjust.dev)
The "React Native Mastery" course offers comprehensive training in mobile development using React Native and Expo. Throughout the course, you will create 7...
15 hours 56 minutes 3 seconds