React Native - The Practical Guide [2024]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

4.67 (38146 reviews)
Udemy
platform
English
language
Mobile Apps
category
214,051
students
28.5 hours
content
Jan 2024
last update
$159.99
regular price

What you will learn

Learn how to use ReactJS to build real native mobile apps for iOS and Android

Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

Explore React Native basics and advanced features!

Learn how to use key mobile app features like Google maps or the device camera

Description

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!

But wouldn't it be amazing 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 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 "Favorite 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 (though there are refresher sections in this course!)

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

Max

Content

Getting Started

Welcome!
What is React Native?
Join our Online Learning Community
How React Native Works
Expo vs React Native CLI
Creating Our First React Native App
Working on Our First App
React Native Apps Are Hard Work!
React Native Alternatives
Course Requirements
Running the App on an Android Emulator
Running the App on an iOS Simulator
Course Outline
How to get the Most out of This Course
Useful Resources & Links

Diving into the Basics [COURSE GOALS APP]

Module Introduction
How to work with React Native Components
Setting Up A New Project
Planning the App
Working with Core Components
Getting Started with Styles
Flexbox & Layouts (Intro)
React Native Flexbox Deep Dive
Inline Styles & StyleSheet Objects
Components, Styles, Layouts
Working with State & Events
Outputting a List of Items
Styling List Items
Making it Scrollable with ScrollView!
A Better List: FlatList
More Components & Lists
Splitting the App Into Components
Passing Data Between Components
Working with Touchable Components
Deleting Items
Adding a Modal Overlay
More Flexbox Styling
Closing the Modal & Clearing Input
Finishing the Modal Styling
Wrap Up
Useful Resources & Links

Debugging React Native Apps

Module Introduction
What To Debug & How To Debug?
Running the App on a Real Device & Debugging
Handling Error Messages
Understanding Code Flow with console.log()
Using the Remote Debugger & Breakpoints
Working with the Device DevTools Overlay
Debugging the UI & Using React Native Debugger
Wrap Up
Useful Resources & Links

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

Module Introduction
Setup & App Planning
Adding a Custom Header Component
Adding a Screen Component
Working on the Layout
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
React Native Styling vs CSS Styling
Extracting a Card Component (Presentational Component)
Components & Styling
Color Theming with Constants
Configuring & Styling a TextInput
Cleaning User Input & Controlling the Soft Keyboard
Resetting & Confirming User Input
Configuring Components
Showing an Alert
Time to Finish the "Confirmation Box"
Adding Random Number Generation
Switching Between Multiple "Screens"
Adding Game Features: Hints & Validation
Checking the "Win" Condition with useEffect()
Finishing the Game Logic
Adding Custom Fonts
Installing expo-font
A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
Adding Local Images
Styling Images
Working with Network (Web) Images
A Closer Look at the "Text" Component (and what you can do with it)
<View> vs <Text> - A Summary
Building a Custom Button Component
Adding Icons
Exploring UI Libraries
Managing Past Guesses as a List
Styling List Items & Lists
ScrollView & Flexbox (Yes, that works!)
Using FlatList Instead of ScrollView
Wrap Up
Useful Resources & Links

Responsive & Adaptive User Interfaces and Apps

Module Introduction
Finding Improvement Opportunities
Working with More Flexible Styling Rules
Introducing the Dimensions API
Using Dimensions in "if" Checks
Calculating Sizes Dynamically
Problems with Different Device Orientations
Controlling Orientation & Using the KeyboardAvoidingView
Listening to Orientation Changes
Rendering Different Layouts
Fixing the GameOver Screen
Updating All Code to Update Dynamically
The Dimensions API & Responsive UIs
Expo's ScreenOrientation API
Introducing the Platform API
Working with Platform.select() and Platform in "if" Checks
Using Platform-specific Code Files
The Platform API
Using the SafeAreaView
Wrap Up
Useful Resources & Links

Navigation with React Navigation [THE MEALS APP]

Module Introduction
Planning the App
Adding Screens
Adding Fonts
Installing React Navigation & Adding Navigation to the App
MUST READ: Installing Different Navigators
Creating a StackNavigator
Navigating Between Screens
Alternative Navigation Syntax
Navigation Basics
Navigation to the "Meal Details" Screen
Pushing, Popping & Replacing
Outputting a Grid of Categories
Configuring the Header with Navigation Options
Passing & Reading Params Upon Navigation
Setting Dynamic Navigation Options
Default Navigation Options & Config
Navigation Params & Configuration
Grid Styling & Some Refactoring
Adding Meal Models & Data
Loading Meals for Categories
Rendering a Meals List
Passing Data to the Meal Detail Screen
Adding Header Buttons
Fixing the Shadows
Adding Tabs-based Navigation
Setting Icons and Configuring Tabs
navigationOptions inside of a Navigator
Adding MaterialBottomTabs
Adding a Favorites Stack
Adding a Menu Button & Drawer Navigation
Configuring the Drawer
More Navigation Config & Styling
Adding a DefaultText Component
Adding the MealDetail Screen Content
Time for the "Filters" Screen Content!
Passing Data Between Component & Navigation Options (Header)
[React Refresher] useEffect() & useCallback()
Wrap Up
Useful Resources & Links

State Management & Redux

Module Introduction
What is State & What is Redux?
Redux & Store Setup
Selecting State Slices
Redux Data & Navigation Options
Dispatching Actions & Reducer Logic
Switching the Favorites Icon
Rendering a Fallback Text
Adding Filtering Logic
Dispatching Filter Actions
Debugging Redux in React Native Apps
Wrap Up
Useful Resources & Links

Time to Practice - THE SHOP APP

Module Introduction
Planning the App
Creating the Basic Project Setup
The Products Overview Screen
Setting Up a Navigator
Styling the Product Items
Adding Touchable Components
Working on the Product Details Screen
Using Custom Fonts
Adding Items to the Cart
Implementing Header Buttons
Outputting Cart Items
Adding Logic to Delete Items
Adding Redux Logic for Orders
SideDrawer & The Orders Screen
Clearing the Cart
Styling Order Items
Making the "Show Details" Button Work
Building the "User Products" Screen
Reorganizing the ProductItem Component
Deleting Items
Adding Basic Editing & Navigation Logic
Handling User Input
Using Params to Submit User Input
Dispatching Actions for Creating & Updating
Time to Improve the App!
Wrap Up
Useful Resources & Links

Handling User Input

Module Introduction
Configuring TextInputs
Adding Basic Validation
Getting Started with useReducer()
Finishing the Merged Form & Input Management
Moving Input Logic Into A Separate Component
Connecting Input Component & Form
Tweaking Styles & Handling the Soft Keyboard
Alternatives & Wrap Up
Useful Resources & Links

Http Requests & Adding a Web Server + Database

Module Introduction
Setup & How To Send Requests
Installing Redux Thunk
Storing Products on a Server
Fetching Products from the Server
Displaying a Loading Spinner & Handling Errors
Setting Up a Navigation Listener
Updating & Deleting Products
Handling Additional Errors
Storing Orders
Displaying an ActivityIndicator
Fetching Stored Orders
Adding "Pull to Refresh"
Wrap Up
Useful Resources & Links

User Authentication

Module Introduction
How Authentication Works
Implementing a Basic Login Screen
Adding User Signup
Logging Users In
Managing the Loading State & Errors
Using the Token
Mapping Orders to Users
Improved Mapping (Scoping)
Implementing "Auto Login"
Adding Logout
Implementing "Auto Logout"
Auto-Logout & Android (Warning)
Wrap Up
Useful Resources & Links

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

Module Introduction
Planning the App
Screen & Navigation Setup
Getting Started with the Form
Redux & Adding Places
Outputting a List of Places
Accessing the Device Camera
Configuring the Camera Access
Using the Picked Image
Storing the Image on the Filesystem
Diving into SQLite for Permanent Data Storage
Storing Data in the Local Database
Fetching Data from the Local Database
Getting the User Location
Showing a Map Preview of the Location
More on Environment Variables
Displaying an Interactive Map
Adding a Marker
Making the Picked Location "Saveable"
Storing Picked Places
Updating the Location Screen When the Location Changes
Storing the Address
Displaying the "Details" Screen
Finishing the "Map" Screen
Running the App on iOS
Running the App on Android
Wrap Up
Useful Resources & Links

Building Apps Without Expo

Module Introduction
Alternatives to Expo
Building Apps with Just the React Native CLI
Live Reload and RN CLI Apps
Adding Native Modules to Non-Expo Apps
Understanding Expo's "Bare Workflow"
Ejecting from Expo's "Managed Workflow"
When To Use Which?
Useful Resources & Links

Publishing React Native Apps

Module Introduction
Deployment Steps
Configuring the App & Publishing
Configuring Icons & The Splash Screen
Working with Offline Asset Bundles
Using "Over the Air Updates" (OTA Updates)
Building the Apps for Deployment (iOS & Android)
Publishing iOS Apps without Expo
Publishing Android Apps without Expo
Configuring Android Apps
Useful Resources & Links

Updating to React Navigation 5+

Module Introduction
What Changed?
Preparing the Project
More Information & Updating the Project Dependencies
Moving from the "Registry-like" to the "Component-based" Navigation Config
First Migration Steps
Converting More Stack Navigators to the New Config
Migrating the Drawer Navigation
Replacing the "Switch" Navigator & Auth Flow
Logout & Further Fixes/ Adjustments
Extracting Screen Params
Setting Screen Options Dynamically
Remaining Migration Steps & Roundup
A Summary Of All Important Changes
Useful Resources & Links

Course Roundup & Next Steps

Roundup & Next Steps

About the Course Update & LEGACY Lectures

About the Latest Course Update

[LEGACY] Diving into the Basics

What does LEGACY mean?
Module Introduction
Creating a New Project with Expo
Creating a New Project
JSX Elements you Can and Can't Use
Switching Away from create-react-native-app
The Starting Project
How to Use the Attached Code
Running the App on an Android Simulator (+ Setup)
Running our App on a Real Android Device
Preparing XCode (for iOS)
Running our App on an iOS Simulator
Running our App on an iOS Device
A Good Development Setup
Working on the App: Adding a Textinput
Styling - Understanding the Basics
More on Flexbox
Positioning Elements with Flexbox
Adding a Button and Managing State
Creating a Custom Component
[OPTIONAL] Assignment Solution
Listening to Touch Events
Reacting to Press Events
Using a ScrollView
Rendering Lists Correctly
Adding Static Images
Using Network Images
Adding a Modal
React vs React Native
JavaScript - Supported Features
Wrap Up
Useful Resources & Links

[LEGACY] Using Redux with React Native

Module Introduction
A Brief Redux Refresher
Install react-redux v6
Installing Redux and Creating a Basic Setup
Setting Up Actions
Setting Up the Reducer
Creating the Store
Connecting React Native to Redux
Wrap Up
Useful Resources & Links

[LEGACY] Debugging React Native Apps

Module Introduction
Using the Remote JavaScript Debugging console.log
Debugging with Breakpoints
Debugging+++ with React Native Debugger
Debugging Redux
Wrap Up
Useful Resources & Links

[LEGACY] Linking and Using Third Party Libraries

Module Introduction
Installing Libraries
Automatic Linking
Linking Libraries on iOS
Linking Libraries on Android
Using Library Features: Adding Icons
Wrap Up

[LEGACY] Navigation in React Native Apps

Module Introduction
Navigation in Web Apps vs Native Apps
Exploring Native Navigation Solutions
Fixing Installation Issues with React Native Navigation
Adding React Native Navigation to iOS
Adding React Native Navigation to Android
Finishing the Library Setup
Registering and Rendering a Screen
Adding a Tabs Screen (Tabs Navigation)
Adding Icons to Tabs
Connecting Screens to Redux
Updating Redux
Pushing Pages (Navigating "Forwards")
Popping Pages (Navigating "Backwards")
More Navigator Methods
Adding a Side Drawer
Using Navigation Events & Toggling the Drawer
Finishing the Drawer
Wrap Up
Useful Resources & Links

[LEGACY] Styling & Animating React Native Apps (Correctly)

Module Introduction
Using StyleSheet vs Normal JS Objects
Vanilla CSS vs React Native Styles
Flexbox in Action
Styling with Relative Units
"Global Styles" with Custom Components
Synthetic Cascading of Styles
Styling Text
Cascading Text Styles
Adding a Background Image
Creating a Re-Usable Custom Button
Editing the "Share Place" Screen
Styling & Splitting the "Share Place" Screen
Finishing the "Share Place" Screen
Your Challenge!
Styling the Side Drawer
Quick Bug Fix: PlaceInput Component
Intro: Cross Platform Styles & Responsiveness
Cross-Platform Styling Made Easy!
Using the Platform API
Loading Different Icons for Different Platforms
Using Different Entry Points (into the App)
Cross-Platform UI Libraries
The "Responsive Styling" Problem
Responsive Design Solutions
Using the Dimensions API
Adjusting Styles Dynamically (to changing Width / Height)
A Better Responsive Solution
Bug Fix: Centering with Margins
Cleaning Up Dimensions Listeners
Styling Navigation Items (react-native-navigation)
Preparing the App for Animations
Using the Animated API
[OPTIONAL] Assignment Solution
Animations Summary
Wrap Up
Useful Resources & Links

[LEGACY] Handling User Input

Module Introduction
Managing Input/ Control State
Adding Custom Validation Logic
Using the Validation State
Dispatching an Auth Action
Switching Form (Auth) Modes
Configuring Text Input Components
Handling the Soft Keyboard
Wrap Up
KeyboardAvoidingView and ScrollView
Useful Resources & Links

[LEGACY] Using Native Device Features - Maps, Camera & Image Gallery

Module Introduction
A Note on Installing React-Native Maps
Installing react-native-maps
Rendering a Map
Picking a Location on the Map
Adding a Map Marker
Animating Map Movement
Locating the User
Storing the Picked Location with Redux
Installing react-native-image-picker
Fixing Issues with React Native Image Picker
Using the Image Picker
Storing the Picked Images
Image Picker and the Data it Returns
Wrap Up
Useful Resources & Links

[LEGACY] Networking - Sending Http Requests

Module Introduction
Sending Http Requests - Theory
Firebase & The Right Database
Creating the Server
Using the Fetch-API
Storing Data in Firebase
Adjusting Firebase Functions (Fixing an Error)
Storing Images
Fixing Firebase Function Linting Errors
Finishing the Image Upload Function
Storing the Remaining Data
Adding the Activity Indicator
Handling Errors
Http, fetch() and Error Handling
Getting Data from the Server
Fixing an Error
Wrap Up
Useful Resources & Links

[LEGACY] Authentication in React Native Apps

Module Introduction
How Authentication Works in React Native Apps
Enabling Firebase Authentication
Signing Users Up
Using the Authentication Result (Response)
Supporting Signup and Login
Adding User Login
Protecting Routes on Firebase
Storing the Auth Token in Redux
Using the Auth Token
Fetching the Token in a Re-Usable Way
Protecting the Firebase Cloudfunction
Adding Places (Authenticated)
Storing the Token in AsyncStorage
Adding an Auto-Signin Functionality
Managing the Token Expiration
Clearing the Auth Storage (AsyncStorage)
Refreshing the Token
Adding User Logout
Refreshing the Token Without App Reloads
Wrap Up
Useful Resources & Links

[LEGACY] Polishing the App

Module Introduction
Identifying "Improvement Potential"
Shrinking Image Sizes
Resetting the "Share Place" Screen
Redirecting to Another Tab
Loading Places All The Time!
Improving Http Error Handling
Adjust the Image-Delete Code
Cleaning Stored Images (on Firebase)
Wrap Up

[LEGACY] Publishing the App

Module Introduction
Adding Launcher Icons
Adding a Splash Screen
Configuring & Building the App
Publishing to Google Play Store (Android)
Publishing to the App Store (iOS)
Publishing the App - Detailed Instructions
Useful Resources & Links

[LEGACY] Round Up

Course Roundup
Bonus: More Content!

Screenshots

React Native - The Practical Guide [2024] - Screenshot_01React Native - The Practical Guide [2024] - Screenshot_02React Native - The Practical Guide [2024] - Screenshot_03React Native - The Practical Guide [2024] - Screenshot_04

Reviews

Steven
November 12, 2023
the care and effort of the instructor is truly sincere to ensure the students have all of the intricate details of "why" to use certain options.
Shreyas
November 11, 2023
Max is an amazing teacher and I fell in love with coding web and mobile apps because of him!!! Keep up the good work Max!
Matthew
November 6, 2023
It's so detailed and is way better than any other courses for helping beginners learn such a complex language.
Ian
November 3, 2023
Its a great course, and the its easy to follow, plus i am enjoying the parallels with web, it helps drive the point home for someone who already knows web development
Mike
November 3, 2023
This was course was a great introduction to React Native. Max is fantastic at explaining things in a way that makes sense and isn't overwhelmingly complicated. You won't learn everything there is to know about RN, but you will get a solid foundation, and Max points you in the right direction to learn more. Since taking this course, I released my first app in the Apple App Store recently, and I'm working on getting the Android version ready for the Google Play Store.
Ignacio
November 3, 2023
Teniendo en cuenta que es el curso mas vendido de Udemy sobre React Native creo que no esta a la altura de las expectativas. Le reconozco al curso que una parte importante esta bien preparada. Explica con detalle muchos componentes y la manera correcta de usarlos. Pero a Noviembre 2023, este curso esta desactualizado y muchas de las configuraciones iniciales de los proyectos, ya no funcionan, ni se pueden descargar e iniciar con facilidad. Me encontré perdiendo tiempo valioso configurando y googleando sobre como solucionar ciertas instalaciones de paquetes y actualizaciones. Soy relativamente un junior (2 años de exp) pero en algunas ocasiones no encuentro al código escrito con buenas prácticas. Esto no es un mensaje de queja, es una solicitud para que Max actualice y refresque gran parte del trabajo. Otra falla que le encuentro: la sección de preguntas y respuestas de cada clase esta llena de preguntas y generalmente, las respuestas mas útiles la dan otros usuarios. En mi opinion: Si a noviembre 2023 (o posterior) tenes que comprar un curso, buscaria alguno mas actualizado.
Davis
October 30, 2023
I dare say Maximilian is the best instructor (not just in Udemy) when it comes to web/app development. Getting this course at Udemy discounted price is a steal
rajat
October 27, 2023
Found the perfect course for react-native. Even if you have no background of react but know coding and how things work, you should be able to take this course pretty well. The best part is that almost all learnings are in the form of app development.
José
October 24, 2023
This is an excellent course to start learning react-native. We work on different apps throughout the course, and plenty of libraries/approaches are introduced. The only cons I found in this course is that it heavily relies on Expo, which isn't a problem if you plan to use it in your future projects.
Eli
October 22, 2023
Good course for a novice, as instructor goes through everything in decent amount of detail. It does end up being very repetitious (eg goes through how to implement at FlatList in detail again in difference chapters that could probably be unnecessary). I do wish he had spent more time showing more frequent UI changes, instead of spending ten minutes showing you how to implement the code, then finally showing it once at the end. I think showing the simulator side by side with the code, would help students understand how the styling is affecting the output. By waiting until the end, student has to retain ten minutes of code changes and determine how the output will look.
Eitan
October 22, 2023
Good, but you should keep in the nowadays availability. Option presentation effect is not compatible with all iphone (mine iphone 12).
Andrew
October 20, 2023
Very good course but needs a bit of updating. Some functionality that Max showed just doesn't work anymore, you need to rely on user comments for more recent code that works. Overall, a very good grounding in React Native for beginners, probably the best out there even if it could do with an update.
Seenu
October 20, 2023
Expectations are met ofcourse and in certain points it exceeds. But, if this was the course for beginners to complete master, focus could have been more on developing real time applications like messaging and streaming apps. That could be more greedy of me nevertheless this course sets more than the great platform for learning react native.
Chukwunonso
October 20, 2023
Max is a great tutor, I love all his courses I've enrolled in. I had doubts before taking this course. But I'm so far enjoying every single lesson.
Wan
August 12, 2023
I am very excited to start learning react native programming because it has so much demand fo the industry

Coupons

DateDiscountStatus
8/14/201994% OFF
expired
11/14/201992% OFF
expired
7/19/202094% OFF
expired
12/17/202091% OFF
expired
3/23/202291% OFF
expired
7/31/202285% OFF
expired
12/14/202285% OFF
expired
4/25/202384% OFF
expired
8/14/202384% OFF
expired

Charts

Price

React Native - The Practical Guide [2024] - Price chart

Rating

React Native - The Practical Guide [2024] - Ratings chart

Enrollment distribution

React Native - The Practical Guide [2024] - Distribution chart

Related Topics

1436092
udemy ID
11/16/2017
course created date
7/18/2019
course indexed date
Bot
course submited by