React Native - The Practical Guide 

Welcome!

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

Creating Our First React Native App

Working on Our First App

React Native Apps Are Hard Work!

More on Git

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

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

Working with State & Events

Outputting a List of Items

Styling List Items

Making it Scrollable with ScrollView!

A Better List: FlatList

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

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

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)

Color Theming with Constants

Configuring & Styling a TextInput

Cleaning User Input & Controlling the Soft Keyboard

Resetting & Confirming User Input

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)

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

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

Expo's ScreenOrientation API

Introducing the Platform API

Working with Platform.select() and Platform in "if" Checks

Using Platform-specific Code Files

Using the SafeAreaView

Wrap Up

Useful Resources & Links

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

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

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

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

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

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

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

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

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

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

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

Roundup & Next Steps

About the Latest Course Update

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

Switching Away from create-react-native-app

The Starting Project

MUST READ: Creating a React Native App

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

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

Module Introduction

Using the Remote JavaScript Debugging console.log

Debugging with Breakpoints

Debugging+++ with React Native Debugger

Debugging Redux

Wrap Up

Useful Resources & Links

Module Introduction

Installing Libraries

Automatic Linking

Linking Libraries on iOS

Linking Libraries on Android

Using Library Features: Adding Icons

Wrap Up

Module Introduction

Navigation in Web Apps vs Native Apps

Exploring Native Navigation Solutions

React Native Navigation v1 vs v2

Exploring Native Navigation Solutions

MUST READ: Install React Native Navigation

Adding React Native Navigation to iOS

Fixing Installation Issues with React Native Navigation

Adding React Native Navigation to iOS

Adding React Native Navigation to Android

Adding React Native Navigation to Android

Finishing the Library Setup

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

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

[OPTIONAL] Assignment Solution

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

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

[OPTIONAL] Assignment Solution

Wrap Up

KeyboardAvoidingView and ScrollView

Useful Resources & Links

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

[OPTIONAL] Assignment Solution

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

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

[OPTIONAL] Assignment Solution

Wrap Up

Useful Resources & Links

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

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

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

Course Roundup

Bonus: More Content!

Implementing "Auto Login