React Native - The Practical Guide
4.6 (5,810 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
35,886 students enrolled

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
Bestseller
4.6 (5,810 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
35,886 students enrolled
Last updated 4/2019
English
English, Indonesian [Auto-generated], 4 more
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Portuguese [Auto-generated]
  • Romanian [Auto-generated]
Current price: $11.99 Original price: $169.99 Discount: 93% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 16.5 hours on-demand video
  • 27 articles
  • 114 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
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

Course content
Expand all 207 lectures 16:25:54
+ Getting Started
11 lectures 32:45

Let's dive into the most important question first: What is React Native? This lecture takes a closer look!

Preview 04:14

We had a first look at what React Native is, let's now dive a bit deeper and see what exactly it does for us. 

Preview 03:00

We know that components are compiled to native code, but what happens to the JavaScript portion of our app? This lecture explains how React Native handles that.

Preview 01:27

React Native has its edges. Learn about some of the limitations you'll face in this lecture. And learn why it won't really be an issue.

Preview 05:34

We know what React Native offers - how does a good course align to that? Learn what's crucial to learn about React Native and how this course supports you with that.

Preview 01:44

With all the theory out of the way (and our first app built!), let's ensure that you can really get the most out of this course. Here are the course requirements you need to bring.

Preview 03:03

Let's take a closer look at what this course has to offer in detail. Here's the course outline!

Preview 02:43

I want to ensure that you succeed in this course, so here's how you can get the most out of this course.

Preview 01:20

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:06
+ Diving into the Basics
28 lectures 02:24:21

Let me introduce you to this module and to what it's about!

Module Introduction
01:24

It all starts with a new project! In this module, I'll show you how to quickly get up and running with React Native.

Creating a New Project
04:00

React is all about JSX, you probably know that. React Native is all about using "special elements", i.e. not using the web elements. Learn more about that in this lecture.

JSX Elements you Can and Can't Use
05:46
Switching Away from create-react-native-app
05:17

Of course I provide the code for this course. This lecture explains how you use the code I attached to the course modules.

How to Use the Attached Code
00:31

We definitely want to preview our app. Learn how to run it on an Android simulator in this lecture.

Running the App on an Android Simulator (+ Setup)
09:49

We definitely want to preview our app. Learn how to run it on an Android device in this lecture.

Running our App on a Real Android Device
01:03

We certainly want to see our app run on an iOS simulator. Learn how to prepare XCode for that in this lecture.


Preparing XCode (for iOS)
00:41

We definitely want to preview our app. Learn how to run it on an iOS simulator in this lecture.

Running our App on an iOS Simulator
02:16

We definitely want to preview our app. Learn how to run it on an iOS device in this lecture.

Running our App on an iOS Device
03:53

Let's conclude the whole setup part and let me show you which development setup I'm going to use.

A Good Development Setup
03:52

Time to dive into the App! Let's start by capturing some user input with a <TextInput> component.

Working on the App: Adding a Textinput
08:25

Styling is super important. Let's dive into the very basics of React Native styling in this lecture.

Styling - Understanding the Basics
10:15

React Native uses Flexbox to position elements and create layouts. If you want to learn more, this lecture is for you.

More on Flexbox
00:26

React Native uses Flexbox. Let's explore what this means.

Positioning Elements with Flexbox
08:28

Having an input is great but you probably also want to allow the user to submit the input. Time to add a button!

Adding a Button and Managing State
06:26

React (for the web) is all about creating custom components. So is React Native! Time to add a custom component.

Creating a Custom Component
08:36
Now that we moved through the first basics of React Native, it's about time to practice them!
Time to Practice - The Basics
1 question

Since we're building for mobile devices, we need to be able to listen to touch events. Learn how that works in this lecture.

Listening to Touch Events
08:30

A special (and very common) touch event is the "press" event. Learn more about handling it in this lecture.

Reacting to Press Events
05:02

Sometimes, you can't fit all the page content on one single page. Learn how to add scrolling in this lecture.

Using a ScrollView
03:01

A Scrollview can be used to render lists - but performance can become an issue. Learn a better way to render lists in this lecture.

Rendering Lists Correctly
08:15

No app without images! In this lecture, we'll explore how static images may be added to an app.

Adding Static Images
09:49

Not all images are static - a lot of images are typically fetched from the web. Learn how to use these, in this lecture.

Using Network Images
03:22

Time to dive into a cool special component: A modal!

Adding a Modal
17:43

Time for the ultimate battle: React vs React Native. What's the difference? 

React vs React Native
02:06

Keep in mind: Your app will NOT run in a browser. So which JavaScript features may you then use? Time for a closer look!

JavaScript - Supported Features
03:49

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:33

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:03
+ Using Redux with React Native
10 lectures 41:28

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:51

We're going to use Redux in this course. Here's a (very) brief refresher on it.

A Brief Redux Refresher
03:43
Install react-redux v6
00:11

With the refresher out of the way, let's install Redux and let's start adding it to our app.

Installing Redux and Creating a Basic Setup
05:28

Of course you know, that actions are a core part of the Redux library. Let's create some in this lecture!

Setting Up Actions
07:22

Actions are important but without a reducer, nothing would work. In this lecture, we'll therefore add one.

Setting Up the Reducer
06:31

We got actions and we got a reducer - time to finally also create the store (and add it to our app).

Creating the Store
07:10

With everything set up, let's now connect our app to Redux. Wasn't that easy?

Connecting React Native to Redux
09:25

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:45

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:01
+ Debugging React Native Apps
7 lectures 17:25

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:52

Wouldn't it be nice if we could look into our app (at runtime)? Turns out: We can! Let's dive into that.

Using the Remote JavaScript Debugging console.log
04:12

console.log() is nice but it would be greater if we could analyze our JS code at runtime. Well .. .we can! Let's explore how that works in this lecture.

Debugging with Breakpoints
01:57

Thus far, we already learned about some nice debugging features. Let's now introduce the "king of debugging": React Native Debugger.

Debugging+++ with React Native Debugger
04:04

What about Redux? Would be great if we could debug that, too. Turns out that we can - learn how to do that in this lecture.

Debugging Redux
05:21

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:57

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:02
+ Linking and Using Third Party Libraries
7 lectures 19:13

Let me introduce you to this module and to what we're going to cover in it.

Module Introduction
01:25

The first step is to simply install a library. Let's do that in this lecture.

Installing Libraries
02:50

We'll cover manual linking in this module - it's always important to know how that works. There is an alternative though.

Automatic Linking
00:36

With the library installed, we now need to link it to iOS (or Android). 

Linking Libraries on iOS
04:12

If our library exposes some native Android code (or runs some native code), we also need to link it to Android.

Linking Libraries on Android
04:02

With everything installed and linked up, let's now add some library features to our app.

Using Library Features: Adding Icons
05:24

Let me summarize this module and what we learned thus far.

Wrap Up
00:44
+ Navigation in React Native Apps
20 lectures 01:38:01

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:07

We know how to navigate in web apps - but what's special in native apps? This lecture answers this question.

Navigation in Web Apps vs Native Apps
01:12
Exploring Native Navigation Solutions
03:30
Fixing Installation Issues with React Native Navigation
01:44

We chose "react-native-navigation", let's now install it such that it works in iOS apps.

Adding React Native Navigation to iOS
04:19

Just as we installed it for iOS, it's now also time to set up "react-native-navigation" for Android apps.

Adding React Native Navigation to Android
07:48
Finishing the Library Setup
02:23

With the navigation library set up, let's now start registering and rendering screens. What's that? Well, this lecture explains it.

Registering and Rendering a Screen
09:57

A common navigation pattern is to use tabs. Let me show you how that works in this lecture.

Adding a Tabs Screen (Tabs Navigation)
09:31

Having Tabs would be nice but wouldn't it be much nicer to also have some icons on them? Well, let's work on that in this lecture.

Adding Icons to Tabs
05:58

We're using Redux but our old way of connecting the App with Redux doesn't work anymore. Time for a new way of doing that.

Connecting Screens to Redux
03:13

Our app is changing - and with it, our Redux setup needs to change.

Updating Redux
09:44

We learned about different navigation approaches - we haven't covered this very popular one: Pushing pages. Learn what this means and how it works in this lecture.

Pushing Pages (Navigating "Forwards")
09:14

If we're able to move forwards, we should also be able to leave the page and go back. Learn how to implement that functionality in this lecture.

Popping Pages (Navigating "Backwards")
07:45

There's way more than just push() or pop(). Let's find out where you can find more.

More Navigator Methods
00:59

Time for another common pattern/ use case. Time for a Side Drawer!

Adding a Side Drawer
07:46

React Native Navigation exposes a couple of helpful events you may use. Let's actually use one to connect our menu button with the side drawer.

Using Navigation Events & Toggling the Drawer
07:43

That was a lot of work! Let's now apply some finishing touches to our drawer!

Finishing the Drawer
03:05

Let me summarize this module and what you learned in it.

Wrap Up
00:59

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:04
+ Styling & Animating React Native Apps (Correctly)
37 lectures 02:48:30

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
02:09

Maybe you wondered why you would use StyleSheet if you could just use a normal JS object. There's a good reason to that! Learn which reason that is in this lecture.

Using StyleSheet vs Normal JS Objects
01:56

Styling in React Native apps works a bit like CSS. But it isn't CSS - let's explore the differences in this lecture.

Vanilla CS vs React Native Styles
04:43

You already learned that React Native Layouting is all about using Flexbox. Let's play around with that.

Flexbox in Action
09:25

We can always style by assigning absolute units - that can quickly yield buggy UIs though. Learn how to use relative units in this lecture.

Styling with Relative Units
04:17

The pattern might sound strange at first but it's actually pretty smart: You can set up "global styles" by creating custom, re-usable components. Let's dive deeper!

"Global Styles" with Custom Components
05:24

Just as we can "emulate" global styles, we can also kind of rebuild the cascading nature of CSS. Let's explore how that works in this lecture.

Synthetic Cascading of Styles
03:53

Styling Text elements actually differs from styling <View> elements. Learn how you may style texts in this lecture.

Styling Text
05:17

Okay, we already learned quite a bit about "synthetic cascading styles". Let's dig a little deeper.

Cascading Text Styles
04:16

No matter how much styling effort you put into it - nothing replaces a beautiful image. Let's use one as a background of the auth screen!

Adding a Background Image
06:23

React Native ships with a button but you can also create and style your own ones. Learn how that works in this lecture.

Creating a Re-Usable Custom Button
07:10

In order to continue, we need to add some content to our app. Let's do that in the "Share Place" screen now.

Editing the "Share Place" Screen
14:44

After editing the content, it's now time to style the "Share Place" screen and split it into smaller pieces.

Styling & Splitting the "Share Place" Screen
10:50

Time to go back to styling and all these things! Let's finish our "Share Place" screen.

Finishing the "Share Place" Screen
04:37

You already learned a lot throughout this module - here's a nice challenge for you!

Your Challenge!
01:10

We styled a lot but we still got this relatively unstyled Side Drawer component. Time to change something about that!

Styling the Side Drawer
05:10

Oops, we got a tiny bug in the PlaceInput component! Let's fix it!

Quick Bug Fix: PlaceInput Component
00:41

With the basics out of the way, let's now focus on two "big" problems: Styling for different platforms and creating responsive designs.

Intro: Cross Platform Styles & Responsiveness
02:03

Cross-Platform styling sounds hard - and it requires a little bit of effort. But we got great tools! Learn more about them in this lecture.

Cross-Platform Styling Made Easy!
02:16

The most important tool when it comes to styling for different Platforms (dynamically!) is the Platform API. Let's dive into it in this lecture.

Using the Platform API
04:51

Now that we know how to use the Platform API, let's use it to load different icons for different Platforms.

Loading Different Icons for Different Platforms
05:55

The Platform API is a great tool, but we got another nice solution to cross-platform styling: Using different entry points.

Using Different Entry Points (into the App)
01:17

What if you don't want to do the heavy lifting? Well, there are some cross-platform libraries. Learn more about your options in this lecture.

Cross-Platform UI Libraries
02:46

With the "Cross-Platform" problem solved, let's now focus on the "Responsive Styling" problem!

The "Responsive Styling" Problem
02:06

Just as with cross-platform styling, we got solutions for creating responsive designs with React Native.

Responsive Design Solutions
02:19

The Dimensions API is your friend! Learn how to use it in this lecture.

Using the Dimensions API
07:16

We learned how to use the Dimensions API - in this lecture, we'll now dive into how to dynamically re-style/ re-layout your app at runtime.

Adjusting Styles Dynamically (to changing Width / Height)
08:12

We got a responsive layout but we can improve it. Learn how in this lecture.

A Better Responsive Solution
05:17

The text inputs on the auth screen aren't really centered. Let's quickly fix that.

Bug Fix: Centering with Margins
00:57

Make sure to not introduce a memory leak into your application and learn how to clean up your Dimensions Listeners.

Cleaning Up Dimensions Listeners
02:40
You learn quite a bit about how to dynamically adjust your layout and create responsive designs. Time to practice!
Time to Practice - Responsive Designs
1 question

Our navigation still has all the default styles. Learn how to overwrite these in this lecture.

Styling Navigation Items (react-native-navigation)
04:06

Let me show you how to add animations to a React Native app. For that, some preparations are required.

Preparing the App for Animations
08:49

In order to handle animations, React Native ships with the Animated API. Learn how to use it to create animations in this lecture.

Using the Animated API
09:45
Animations are fun! And you learned how to create them - time to practice it on your own!
Time to Practice - Animations
1 question
[OPTIONAL] Assignment Solution
03:01

Let me summarize what you learn and also explain where you may dive deeper.

Animations Summary
01:21

Let me wrap this module up and summarize what you learned in it.

Wrap Up
01:12

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:16
+ Handling User Input
11 lectures 01:05:10

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:55

Handling user input is all about managing the state of inputs/ form controls. Learn more about that in this lecture.

Managing Input/ Control State
11:21

Getting the user input is only one part - you also want to (and should!) validate it. This lecture shows you how to create your own validators and apply them to user input.

Adding Custom Validation Logic
20:44

It's of course good if you know whether some input holds valid data or not but it's even more useful if you share that information with the user. Learn more about that in this lecture.

Using the Validation State
08:47

We worked a lot on the auth screen - time to now make it submittable and dispatch some auth action when the user is done entering data.

Dispatching an Auth Action
05:23

You're not limited to static forms - this lecture will explore how you can change the number of controls to render (and your validation logic) dynamically.

Switching Form (Auth) Modes
06:54

The <TextInput> component offers a lot of useful props to bind - learn more about them in this lecture.

Configuring Text Input Components
04:40

Every smartphone user knows that it's extremely annoying if your soft keyboard gets into the way. This lecture will explore how you may handle it.

Handling the Soft Keyboard
04:45
We had a closer look at how to handle user input - now it's your turn. Take the knowledge you gained and apply it to a different part of our app!
Time to Practice - User Input
1 question

Let me summarize this module and what you learned thus far.

Wrap Up
01:08

Did you notice a strange behavior on the SharePlace screen? Learn more about KeyboardAvoidingView and ScrollView.

KeyboardAvoidingView and ScrollView
00:30

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:02
+ Using Native Device Features - Maps, Camera & Image Gallery
16 lectures 01:11:33

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:13

Read this lecture to ensure that the installations succeeds.

A Note on Installing React-Native Maps
00:21

Let's start with implementing Maps. For this, we first of all need to install a fitting package. Learn how that works (for iOS and Android) in this lecture.

Installing react-native-maps
08:53

Installing the Maps package is a nice first step, even more important is of course that we render a map. Let's do so now.

Rendering a Map
11:12

Having a map is another very nice step but to truly be useful, users need to be able to pick a location on the map. Learn how to listen to user events on the map (and use them) in this lecture.

Picking a Location on the Map
04:56

We know where the user clicked - let's share that information! Time to add a map marker!

Adding a Map Marker
03:21

We know how to make the map jump to the selected location, but wouldn't it be greater to animate it? Let's do just that in this lecture.

Animating Map Movement
03:49

Sometimes, you don't want to pick a location manually - you want to share exactly the position you're currently at. Let's do that now!

Locating the User
08:31

The user picked a location - let's now enhance its usefulness by storing it via Redux.

Storing the Picked Location with Redux
07:22
Now that the basics about the Maps package are set, it's time to practice it on your own!
Time to Practice - Maps
1 question

Enough about maps - we need images! Learn how to install and configure a very useful library that makes selecting and taking images a breeze.

Installing react-native-image-picker
06:37

Facing issues with the image picker? Here you go!

Fixing Issues with React Native Image Picker
00:23

With the image picker library installed, it's now time to use it. Learn how to allow the user to choose an image and then use that image in this lecture.

Using the Image Picker
05:36

Being able to pick images is one thing, previewing them is also nice - but we definitely need a functionality to store the images. Time to connect everything to Redux!

Storing the Picked Images
06:06

The image picker actually returns more than just a path to the image. Learn more about your options in this lecture.

Image Picker and the Data it Returns
01:56

Let me summarize this module and what you learned thus far.

Wrap Up
01:13

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:03
+ Networking - Sending Http Requests
18 lectures 01:21:44

Let me introduce you to this module and to what you're going to learn in it!

Module Introduction
01:14

We're going to send some Http requests in this module. So let's start with some theory - how does this all work?

Sending Http Requests - Theory
01:29
Firebase & The Right Database
00:06

We obviously need a backend (server) to send requests. Let's quickly set one up in this lecture.

Creating the Server
02:51

Now that we set up everything, let's start sending requests. For that, we'll use the fetch API. Learn how to use it to send data, in this lecture.

Using the Fetch-API
02:59

With the server created and configured, let's send our first request. Fetching data would be nice but since we need some stored data for that, let's actually start with storing data in this lecture.

Storing Data in Firebase
10:23
Adjusting Firebase Functions (Fixing an Error)
00:18

We're not just interested in storing data in a database, it would also be great if we could upload images. Time to prepare everything for that!

Storing Images
19:26

We're finishing the Firebase cloud function - here are instructions on how to fix a potential error.

Fixing Firebase Function Linting Errors
01:01

Time to finish our "image upload" cloud function so that we can finally use it to upload images!

Finishing the Image Upload Function
10:16

We're able to upload images and store data in the database - time to wire everything up!

Storing the Remaining Data
03:38

Right now, our user got no idea about whether something is happening or not. Let's provide some visual feedback and add a spinner!

Adding the Activity Indicator
10:23

Our requests don't have to succeed, hence error handling is something we shouldn't forget. Let's focus on it in this lecture.

Handling Errors
01:33

Error handling is an important part of sending Http requests. Learn more about how it works when using the fetch API in this lecture.

Http, fetch() and Error Handling
00:30

We're storing data on the server, that's awesome! Let's now work on getting it back!

Getting Data from the Server
12:55

Oops, there's an error in our code! Let's fix it!

Fixing an Error
01:39
Now that we moved through the first basics of React Native, it's about time to practice them!
Time to Practice - Http
1 question

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:58

Attached, you'll find the module source code and useful resources.

Useful Resources & Links
00:03
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
Description

Mobile applications 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!

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

I'd be very happy to welcome you in the course!

Max

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