React Native - The Practical Guide

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!

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

Course content

Section 1Getting Started

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

Section 2Diving into the Basics [COURSE GOALS APP]

Module IntroductionPremium
0:33
How to work with React Native ComponentsPremium
2:45
Setting Up A New ProjectPremium
3:04
Planning the AppPremium
1:42
Working with Core ComponentsPremium
4:56
Getting Started with StylesPremium
7:52
Flexbox & Layouts (Intro)Premium
3:54
React Native Flexbox Deep DivePremium
12:19
Inline Styles & StyleSheet ObjectsPremium
5:12
Quiz 1: Components, Styles, LayoutsPremium
1:00
Working with State & EventsPremium
9:44
Outputting a List of ItemsPremium
3:51
Styling List ItemsPremium
3:21
Making it Scrollable with ScrollView!Premium
3:48
A Better List: FlatListPremium
7:20
Quiz 2: More Components & ListsPremium
1:00
Splitting the App Into ComponentsPremium
4:34
Passing Data Between ComponentsPremium
6:48
Working with Touchable ComponentsPremium
8:39
Deleting ItemsPremium
4:57
Adding a Modal OverlayPremium
6:06
More Flexbox StylingPremium
3:49
Closing the Modal & Clearing InputPremium
6:45
Finishing the Modal StylingPremium
5:08
Wrap UpPremium
2:29
Useful Resources & LinksPremium
1:00

Section 3Debugging React Native Apps

Module IntroductionPremium
0:32
What To Debug & How To Debug?Premium
6:18
Handling Error MessagesPremium
5:26
Understanding Code Flow with console.log()Premium
4:06
Using the Remote Debugger & BreakpointsPremium
4:03
Working with the Device DevTools OverlayPremium
2:17
Debugging the UI & Using React Native DebuggerPremium
7:25
Wrap UpPremium
1:02
Useful Resources & LinksPremium
1:00

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

Module IntroductionPremium
2:33
Setup & App PlanningPremium
3:25
Adding a Custom Header ComponentPremium
7:54
Adding a Screen ComponentPremium
5:32
Working on the LayoutPremium
7:03
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)Premium
7:03
React Native Styling vs CSS StylingPremium
1:00
Extracting a Card Component (Presentational Component)Premium
5:57
Quiz 3: Components & StylingPremium
1:00
Color Theming with ConstantsPremium
6:03
Configuring & Styling a TextInputPremium
10:19
Cleaning User Input & Controlling the Soft KeyboardPremium
5:23
Resetting & Confirming User InputPremium
8:28
Quiz 4: Configuring ComponentsPremium
1:00
Showing an AlertPremium
2:50
Time to Finish the "Confirmation Box"Premium
7:44
Adding Random Number GenerationPremium
6:34
Switching Between Multiple "Screens"Premium
10:41
Adding Game Features: Hints & ValidationPremium
11:02
Checking the "Win" Condition with useEffect()Premium
10:11
Finishing the Game LogicPremium
5:17
Adding Custom FontsPremium
9:50
Installing expo-fontPremium
1:00
A Synthetic Style "Cascade": Custom Wrapper Components & Global StylesPremium
10:34
Adding Local ImagesPremium
4:56
Styling ImagesPremium
6:07
Working with Network (Web) ImagesPremium
2:51
A Closer Look at the "Text" Component (and what you can do with it)Premium
9:09
vs - A SummaryPremium
1:00
Building a Custom Button ComponentPremium
11:41
Adding IconsPremium
4:43
Exploring UI LibrariesPremium
2:58
Managing Past Guesses as a ListPremium
7:56
Styling List Items & ListsPremium
8:54
ScrollView & Flexbox (Yes, that works!)Premium
7:20
Using FlatList Instead of ScrollViewPremium
9:50
Wrap UpPremium
5:14
Useful Resources & LinksPremium
1:00

Section 5Responsive & Adaptive User Interfaces and Apps

Module IntroductionPremium
2:26
Finding Improvement OpportunitiesPremium
3:51
Working with More Flexible Styling RulesPremium
3:08
Introducing the Dimensions APIPremium
3:50
Using Dimensions in "if" ChecksPremium
7:51
Calculating Sizes DynamicallyPremium
7:02
Problems with Different Device OrientationsPremium
3:11
Controlling Orientation & Using the KeyboardAvoidingViewPremium
3:49
Listening to Orientation ChangesPremium
5:31
Rendering Different LayoutsPremium
7:09
Fixing the GameOver ScreenPremium
2:09
Quiz 5: The Dimensions API & Responsive UIsPremium
1:00
Expo's ScreenOrientation APIPremium
3:42
Introducing the Platform APIPremium
4:25
Working with Platform.select() and Platform in "if" ChecksPremium
7:04
Using Platform-specific Code FilesPremium
3:32
Quiz 6: The Platform APIPremium
1:00
Using the SafeAreaViewPremium
5:55
Wrap UpPremium
1:37
Useful Resources & LinksPremium
1:00

Section 6Navigation with React Navigation [THE MEALS APP]

Module IntroductionPremium
1:13
Planning the AppPremium
4:00
Screen & Navigation SetupPremium
13:27
Getting Started with the FormPremium
5:36
Redux & Adding PlacesPremium
7:29
Outputting a List of PlacesPremium
6:36
Accessing the Device CameraPremium
17:26
Configuring the Camera AccessPremium
5:10
Using the Picked ImagePremium
4:59
Storing the Image on the FilesystemPremium
8:29
Diving into SQLite for Permanent Data StoragePremium
10:24
Storing Data in the Local DatabasePremium
7:52
Fetching Data from the Local DatabasePremium
7:00
Getting the User LocationPremium
11:00
Showing a Map Preview of the LocationPremium
13:24
More on Environment VariablesPremium
1:00
Displaying an Interactive MapPremium
8:31
Adding a MarkerPremium
5:27
Making the Picked Location "Saveable"Premium
7:22
Storing Picked PlacesPremium
2:50
Updating the Location Screen When the Location ChangesPremium
4:25
Storing the AddressPremium
7:33
Displaying the "Details" ScreenPremium
6:28
Finishing the "Map" ScreenPremium
6:19
Running the App on iOSPremium
3:05
Running the App on AndroidPremium
1:21
Wrap UpPremium
1:35
Useful Resources & LinksPremium
1:00

Section 7State Management & Redux

Module IntroductionPremium
1:04
What is State & What is Redux?Premium
4:08
Redux & Store SetupPremium
10:58
Selecting State SlicesPremium
8:30
Redux Data & Navigation OptionsPremium
5:04
Dispatching Actions & Reducer LogicPremium
13:55
Switching the Favorites IconPremium
7:09
Rendering a Fallback TextPremium
2:43
Adding Filtering LogicPremium
6:16
Dispatching Filter ActionsPremium
6:08
Debugging Redux in React Native AppsPremium
1:00
Wrap UpPremium
1:33
Useful Resources & LinksPremium
1:00

Section 8Time to Practice - THE SHOP APP

Module IntroductionPremium
1:34
Planning the AppPremium
10:42
Creating the Basic Project SetupPremium
6:08
The Products Overview ScreenPremium
9:49
Setting Up a NavigatorPremium
10:41
Styling the Product ItemsPremium
19:15
Adding Touchable ComponentsPremium
12:26
Working on the Product Details ScreenPremium
5:56
Using Custom FontsPremium
5:10
Adding Items to the CartPremium
21:08
Implementing Header ButtonsPremium
18:29
Outputting Cart ItemsPremium
11:48
Adding Logic to Delete ItemsPremium
10:33
Adding Redux Logic for OrdersPremium
9:09
SideDrawer & The Orders ScreenPremium
13:07
Clearing the CartPremium
1:43
Styling Order ItemsPremium
12:43
Making the "Show Details" Button WorkPremium
8:55
Building the "User Products" ScreenPremium
9:36
Reorganizing the ProductItem ComponentPremium
5:29
Deleting ItemsPremium
7:57
Adding Basic Editing & Navigation LogicPremium
6:37
Handling User InputPremium
12:05
Using Params to Submit User InputPremium
2:16
Dispatching Actions for Creating & UpdatingPremium
15:34
Time to Improve the App!Premium
9:22
Wrap UpPremium
1:12
Useful Resources & LinksPremium
1:00

Section 9Handling User Input

Module IntroductionPremium
0:59
Configuring TextInputsPremium
8:21
Adding Basic ValidationPremium
5:45
Getting Started with useReducer()Premium
12:12
Finishing the Merged Form & Input ManagementPremium
12:59
Moving Input Logic Into A Separate ComponentPremium
11:18
Connecting Input Component & FormPremium
14:47
Tweaking Styles & Handling the Soft KeyboardPremium
5:28
Alternatives & Wrap UpPremium
2:06
Useful Resources & LinksPremium
1:00

Section 10Http Requests & Adding a Web Server + Database

Module IntroductionPremium
1:03
Setup & How To Send RequestsPremium
3:27
Installing Redux ThunkPremium
2:03
Storing Products on a ServerPremium
9:05
Fetching Products from the ServerPremium
7:53
Displaying a Loading Spinner & Handling ErrorsPremium
13:03
Setting Up a Navigation ListenerPremium
5:15
Updating & Deleting ProductsPremium
4:47
Handling Additional ErrorsPremium
9:31
Storing OrdersPremium
4:34
Displaying an ActivityIndicatorPremium
3:12
Fetching Stored OrdersPremium
8:15
Adding "Pull to Refresh"Premium
4:12
Wrap UpPremium
1:07
Useful Resources & LinksPremium
1:00

Section 11User Authentication

Module IntroductionPremium
0:44
How Authentication WorksPremium
3:36
Implementing a Basic Login ScreenPremium
14:57
Adding User SignupPremium
12:44
Logging Users InPremium
6:26
Managing the Loading State & ErrorsPremium
9:01
Using the TokenPremium
11:04
Mapping Orders to UsersPremium
7:42
Improved Mapping (Scoping)Premium
1:14
Implementing "Auto Login"Premium
16:50
Adding LogoutPremium
7:20
Implementing "Auto Logout"Premium
15:26
Auto-Logout & Android (Warning)Premium
1:00
Wrap UpPremium
1:03
Useful Resources & LinksPremium
1:00

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

Module IntroductionPremium
1:13
Planning the AppPremium
4:00
Screen & Navigation SetupPremium
13:27
Getting Started with the FormPremium
5:36
Redux & Adding PlacesPremium
7:29
Outputting a List of PlacesPremium
6:36
Accessing the Device CameraPremium
17:26
Configuring the Camera AccessPremium
5:10
Using the Picked ImagePremium
4:59
Storing the Image on the FilesystemPremium
8:29
Diving into SQLite for Permanent Data StoragePremium
10:24
Storing Data in the Local DatabasePremium
7:52
Fetching Data from the Local DatabasePremium
7:00
Getting the User LocationPremium
11:00
Showing a Map Preview of the LocationPremium
13:24
More on Environment VariablesPremium
1:00
Displaying an Interactive MapPremium
8:31
Adding a MarkerPremium
5:27
Making the Picked Location "Saveable"Premium
7:22
Storing Picked PlacesPremium
2:50
Updating the Location Screen When the Location ChangesPremium
4:25
Storing the AddressPremium
7:33
Displaying the "Details" ScreenPremium
6:28
Finishing the "Map" ScreenPremium
6:19
Running the App on iOSPremium
3:05
Running the App on AndroidPremium
1:21
Wrap UpPremium
1:35
Useful Resources & LinksPremium
1:00

Section 13Building Apps Without Expo

Module IntroductionPremium
3:32
Alternatives to ExpoPremium
6:01
Building Apps with Just the React Native CLIPremium
9:26
Live Reload and RN CLI AppsPremium
1:00
Adding Native Modules to Non-Expo AppsPremium
8:55
Understanding Expo's "Bare Workflow"Premium
8:35
Ejecting from Expo's "Managed Workflow"Premium
10:59
When To Use Which?Premium
5:28
Useful Resources & LinksPremium
1:00

Section 14Publishing React Native Apps

Module IntroductionPremium
0:41
Deployment StepsPremium
4:31
Configuring the App & PublishingPremium
8:09
Configuring Icons & The Splash ScreenPremium
9:13
Working with Offline Asset BundlesPremium
3:03
Using "Over the Air Updates" (OTA Updates)Premium
7:43
Building the Apps for Deployment (iOS & Android)Premium
17:27
Publishing iOS Apps without ExpoPremium
10:23
Configuring Android AppsPremium
1:00
Publishing Android Apps without ExpoPremium
7:21
Useful Resources & LinksPremium
1:00

Section 15Updating to React Navigation 5+

Module IntroductionPremium
1:07
What Changed?Premium
3:55
Preparing the ProjectPremium
4:02
More Information & Updating the Project DependenciesPremium
2:08
From the "Registry-like" to a "Component-based" ApproachPremium
10:35
Starting the Migration ProcessPremium
11:37
Converting more Stack NavigatorsPremium
6:49
Adding Drawer NavigationPremium
8:12
Replacing the Auth Flow & Switch NavigatorPremium
12:50
Logout & Further FixesPremium
4:57
Extracting ParamsPremium
7:47
Setting Options DynamicallyPremium
3:02
Remaining MigrationsPremium
3:02
A Summary Of All ChangesPremium
5:47
Useful Resources & LinksPremium
1:00

Section 16Push Notifications

Module IntroductionPremium
1:18
Understanding NotificationsPremium
3:36
Sending Local NotificationsPremium
8:16
Getting PermissionsPremium
7:34
Controlling How Notifications Are DisplayedPremium
3:36
Reacting to Foreground NotificationsPremium
4:26
Reacting to Background NotificationsPremium
4:13
How Push Notifications WorkPremium
3:39
Expo & Push NotificationsPremium
6:45
Getting a Push TokenPremium
4:44
Sending Push NotificationsPremium
2:59
Using Expo's Push ServerPremium
4:29
More on Push TokensPremium
5:49
Adding Push Notifications to the Shop App (1/3)Premium
10:06
Adding Push Notifications to the Shop App (2/3)Premium
14:13
Adding Push Notifications to the Shop App (3/3)Premium
2:37
Push Notifications in non-Expo Managed AppsPremium
1:00
Module ResourcesPremium
1:00

Section 17Course Roundup & Next Steps

Roundup & Next StepsPremium
3:52

Section 18JavaScript Refresher

Module IntroductionPremium
1:36
JavaScript in a NutshellPremium
2:35
Refreshing the Core SyntaxPremium
4:34
let & constPremium
2:27
Arrow FunctionsPremium
5:17
Objects, Properties & MethodsPremium
3:19
Arrays & Array MethodsPremium
4:16
Arrays, Objects & Reference TypesPremium
2:13
Spread Operators & REST ParametersPremium
6:40
DestructuringPremium
5:37
Async Code & PromisesPremium
10:28
Template LiteralsPremium
1:00
Wrap UpPremium
0:50
Useful Resources & LinksPremium
0:50

Section 19React Refresher

Module IntroductionPremium
1:12
What is React?Premium
3:13
Setting Up a Starting ProjectPremium
4:03
Understanding JSXPremium
5:31
Understanding ComponentsPremium
2:50
Working with Multiple ComponentsPremium
7:04
Working with PropsPremium
6:52
Rendering Lists of DataPremium
4:30
Handling EventsPremium
7:24
Child Parent CommunicationPremium
4:38
Managing StatePremium
5:54
More on StatePremium
4:20
Fetching User Input (Two-way Binding)Premium
5:52
Wrap UpPremium
2:11
Useful Resources & LinksPremium
1:00

Course instructor

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.