React Native :The Practical Guide 

Welcome!

What is React Native?

A Closer Look Preview

What Happens to JavaScript?

Creating Our First React Native App

Dealing with Limitations of React Native

What a Good Course Offers

Course Requirements

Course Outline

How to get the Most out of This Course

Module Introduction

Creating a New Project

Ejecting from Create React Native App Preview

Running the App on an Android Simulator (+ Setup)

Running our App on a Real Android Device

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

Positioning Elements with Flexbox

Adding a Button and Managing State

Creating a Custom Component

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 Preview

A Brief Redux Refresher

Installing Redux and Creating a Basic Setup

Setting Up Actions

Setting Up the Reducer

Creating the Store

Connecting React Native to Redux

Wrap Up

Module Introduction Preview

Using the Remote JavaScript Debugging console.log

Debugging with Breakpoints

Debugging+++ with React Native Debugger

Debugging Redux

Wrap Up

Module Introduction

Installing Libraries

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

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

Module Introduction

Using StyleSheet vs Normal JS Objects

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

Animations Summary

Wrap Up

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

Module Introduction

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

Using the Image Picker

Storing the Picked Images

Image Picker and the Data it Returns

Wrap Up

Storing Images

Module Introduction

Sending Http Requests - Theory

Creating the Server

Using the Fetch-API

Storing Data in Firebase

Finishing the Image Upload Function

Storing the Remaining Data

Adding the Activity Indicator

Handling Errors

Getting Data from the Server

Fixing an Error

Wrap Up

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

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

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)

Course Roundup