The Complete React Native + Hooks Course

• How to Get Help

• Course Resources

• Join Our Community!

• Course Overview

• Installing Node.js and Prerequisite Info

• Boilerplate Download and Startup

• App Setup

• Making Changes

• Expo for Web Browser - Do Not Skip

• Using iOS and Android Simulators

• Overview of React Components

• Showing a Custom Component

• Common Questions and Answers

• Rules of JSX

• One Common Error

• JSX Exercise Overview

• JSX Solution

• Building Lists

• The FlatList Element

• Rendering a FlatList

• Why a Key Property?

• Solving the Key Issue

• A Few Props Around FlatList

• Exercise Overview

• Exercise Solution

• Button Types

• Buttons in Action

• Touchable Opacity in Action

• Navigating with React Navigation

• Destructuring Props

• Component Reuse with Props

• Exercise Solution

• Parent-Child Relationships

• Communicating from Parent to Child

• Images Download

• Showing Images

• Passing Images as Props

• Exercise Outline

• State in Components

• Screen Boilerplate

• State in Action

• Notes on State

• App Overview

• Generating Random Colors

• Adding Random Colors

• Showing Colors with a FlatList

• Reusable Color Adjusters

• Coordinating State

• Passing Callbacks to Children

• Tying State Values Together

• Validating State Changes

• Reusable State Updates

• Introduction to Reducers

• Creating a Reducer

• Applying State with a Reducer

• Restoring Validation

• Community Convention in Reducers

• Exercise Outline

• Exercise Solution

• Handling Text Input

• Showing a Text Input

• Two Important Props

• Weird Things with Text and State

• Updating State

• Layout with React Native

• Basics of Box Object Model

• AlignItems with Flex

• Flex Direction

• Justify Content

• Flex Values

• Align Self on Children

• The Position Property

• Top, Bottom, Left, Right

• Absolute Fill Objects

• Applying Layout Systems

• Exercise Overview

• Exercise Solution

• App Overview

• Important Note About Project Generation

• Project Generation

• Yelp API Info and Workarounds

• Yelp Signup

• Yelp Walkthrough

• React Navigation

• Required React Navigation Installation Update

• Assembling a Navigator

• Architecture Approach

• Starting the SearchBar

• Displaying Icons

• Search Bar Styling

• A Touch More Styling

• Managing State

• Detecting Editing Completion

• Configuring Axios

• Making the Request

• Error Handling

• Running an Initial Search

• The useEffect Hook

• Extracting Hook Logic

• Showing Search Results

• Grouping Results

• FlatList Rendering

• Showing a Single Result

• Showing Additional Info

• A Few More Styling Issues

• Hiding Scroll Bars

• Constraining View Elements

• Empty Elements

• Spacing on the Search Bar

• Reminder on Navigation

• Navigating from a Child Component

• The WithNavigation Helper

• Communicating Between Screens

• Fetching a Single Restaurant

• Showing a List of Images

• One Last Fix

• Upgrading the Restaurant app to use React Navigation v6

• Important Note About Project Generation

• App Overview

• Issues with Data

• Required React Navigation Installation Update

• Initial Setup

• Wrapping the Navigator

• Introduction to Context

• Adding Context

• Moving Data with Context

• Rendering a List of Posts

• Adding State in Context

• It Works!

• Opportunity for Improvement

• Updating with UseReducer

• Automating Context Creation

• More Automatic Context Creation

• A Bit of Styling

• Deleting Posts

• Updating the Reducer

• Navigation on Tap

• Retrieving Single Posts

• Adding a Creation Screen

• headerRight Deprecation in 'navigationOptions'

• Header Navigation

• Displaying a Form

• Saving a New Post

• Navigation on Save

• The Edit Icon Link

• Communicating Info to Edit

• Initializing State from Context

• Extracting Form Logic

• Customizing OnSubmit

• Initial Form Values

• Support for defaultProps Will be Removed

• Default Props

• Editing Action Function

• Editing in a Reducer

• Navigating Backwards

• Outside Data API

• Issues with Servers + React Native

• Important - Required Ngrok Setup Steps

• JSON Server and Ngrok Setup

• JSON Server REST Conventions

• Making a Request

• Remote Fetch of Posts

• Creating Posts with Post Requests

• Refetching on Navigate

• Deleting a Post

• Editing Posts

• App Wrapup

• Upgrading the Blog app to use React Navigation v6

• App Overview

• Dependencies Setup

• The Basics of Express

• MongoDB Setup

• Connecting to MongoDB

• Nodemon for Automatic Restarts

• Understanding the Signup Process

• Using Postman

• Handling JSON Data

• Defining a User Schema

• Creating and Saving a User

• Error Handling

• JSON Web Tokens

• Creating a JWT

• Wiring Up JSON Web Tokens

• Understanding Password Hashing

• Salting and Hashing

• The Signin Route

• Testing Signup and Signin

• Defining Tracks

• Listing Tracks

• Creating Tracks

• Server Code

• Server Setup

• Important Note About Project Generation

• Navigation Design

• Required React Navigation Installation Update

• A LOT of Boilerplate

• Navigator Hookup

• Testing the Navigation Flow

• React Native Elements

• Helper Styling Components

• navigationOptions Deprecation Warning

• Styling Odds and Ends

• Input Props

• The Auth Context

• What's the Context Doing?

• Axios Setup

• Making an API Request

• Handling Errored Requests

• Async Storage

• Async Storage Update

• Storing the Token

• Navigation From Outside of React

• Oops, Typo

• Navigation to Signin

• Extracting Form Logic

• Last Bit of Extracting

• Creating a NavLink

• navigationOptions Deprecation

• Real Component Reuse!

• Wiring Up Signin

• onWillFocus vs onWillBlur Update

• Clearing Error Messages

• Automatic Signin

• Empty Screens While Resolving Auth

• Signing Out a User

• Safe Area Views

• Working on Track Create

• Installing React Native Maps

• Showing a Map

• Drawing a Series of Points

• Notes on Location

• Fix for Missing Location Request Error

• "requestPermissionsAsync" is now deprecated in Expo SDK 41+

• Requesting Location Permissions

• Resetting Permissions

• How to Test Location?

• Faking the Users Location

• Reading a Location

• Bugginess with Location

• Location Architecture

• Location Context

• Live Location Updates

• Fix for Indicator not Tracking Map

• Drawing a Position Indicator

• Extracting Logic to a Hook

• Disabling Location Tracking

• Automatic Disables

• Building a Track Form

• Updates to Location Context

• Track Form Wire Up

• Buggy UseEffects

• Understanding Stale References

• Some Errors You May See

• Kind of Fixed

• The UseCallback Hook

• Cleaning Up After Ourselves

• Avoiding Stale References

• Tracking While Recording

• Bring Back the Polyline

• What Manages Tracks

• Coordination Between Contexts

• Automatic Authentication

• Form Reset and Navigation

• Fetching Created Tracks

• ListItem Update

• Listing All Tracks

• Navigating to a Saved Track

• Showing Track Details

• Fixing Odds and Ends

• Note on the Following Section

• Important - Do Not Skip

• Finished Code Repository

• OSX Installation

• More on OSX Installation

• Running in the Simulator

• Windows Setup of React Native

• Android Studio and React Native CLI Installation

• Emulator Creation and System Variables

• ESLint Setup with VSCode

• Troubleshooting React Native Installs

• Project Directory Walkthrough

• Getting Content on the Screen

• React vs React Native

• Creating a Component with JSX

• Registering a Component

• Destructuring Imports

• Application Outline

• The Header Component

• Consuming File Exports

• Styling with React Native

• More on Styling Components

• Introduction to Flexbox

• Header Styling

• Making the Header Reusable

• Sourcing Album Data

• List Component Boilerplate

• Class Based Components

• Lifecycle Methods

• Quick Note On Axios

• Network Requests

• Component Level State

• More on Component Level State

• Rendering a List of Components

• Displaying Individual Albums

• Fantastic Reusable Components - The Card

• Styling a Card

• Passing Components as Props

• Dividing Cards into Sections

• Mastering Layout with Flexbox

• Positioning of Elements on Mobile

• More on Styling

• Images with React Native

• Displaying Album Artwork

• Making Content Scrollable

• Handling User Input with Buttons

• Styling of Buttons with UX Considerations

• Responding to User Input

• Linking Between Mobile Apps

• Setting Button Text by Props

• App Wrapup

• Auth App Introduction

• A Common Root Component

• Copying Reusable Components

• What is Firebase?

• Firebase Client Setup

• Login Form Scaffolding

• Handling User Inputs

• More on Handling User Inputs

• How to Create Controlled Components

• Making Text Inputs From Scratch

• A Focus on Passing Props

• Making the Input Pretty

• Wrapping up Inputs

• Password Inputs

• Logging a User In

• Error Handling

• More on Authentication Flow

• Creating an Activity Spinner

• Conditional Rendering of JSX

• Clearing the Form Spinner

• Handling Authentication Events

• More on Conditional Rendering

• Logging a User Out and Wrapup

• App Mockup and Approach

• The Basics of Redux

• More on Redux

• Redux is Hard!

• Application Boilerplate

• More on Redux Boilerplate

• Rendering the Header

• Reducer and State Design

• Library List of Data

• JSON CopyPaste

• The Connect Function

• MapStateToProps with Connect

• A Quick Review and Breather

• The Theory of ListView

• ListView in Practice

• Rendering a Single Row

• Styling the List

• Creating the Selection Reducer

• Introducing Action Creators

• Calling Action Creators

• Adding a Touchable

• Rules of Reducers

• Expanding a Row

• Moving Logic Out of Components

• Animations

• Wrapup

• Overview of Our Next App

• App Challenges

• Quick Note

• Just a Touch More Setup

• More on Boilerplate Setup

• Login Form in a Redux World

• Rebuilding the Login Form

• Handling Form Updates with Action Creators

• Wiring up Action Creators

• Typed Actions

• Immutable State

• Creating Immutable State

• More on Creating Immutable State

• Synchronous vs Asynchronous Action Creators

• Introduction to Redux Thunk

• Redux Thunk in Practice

• Redux Thunk in Practice Continued

• Making LoginUser More Robust

• Creating User Accounts

• Showing Error Messages

• A Firebase Gotcha

• Showing a Spinner on Loading

• Dealing with Navigation

• Navigation in the Router

• Addressing Styling Issues

• Displaying Multiple Scenes

• Navigating Between Routes

• Grouping Scenes with Buckets

• Navigation Bar Buttons

• Navigating to the Employee Creation Form

• Building the Employee Creation Form

• Employee Form Actions

• Handling Form Updates at the Reducer Level

• Dynamic Property Updates

• The Picker Component

• Pickers and Style Overrides

• Firebase JSON Schema

• Data Security in Firebase

• Creating Records with Firebase

• Default Form Values

• Successful Data Save to Firebase

• Resetting Form Properties

• Fetching Data from Firebase

• Storing Data by ID

• Dynamic DataSource Building

• Transforming Objects to Arrays

• List Building in Employee List

• Reusing the Employee Form

• Create vs Edit Forms

• Reusable Forms

• A Standalone Employee Edit Form

• Initializing Forms from State

• Updating Firebase Records

• Clearing Form Attributes

• Texting Employees

• Modals as a Reusable Component

• The Modal Component Continued

• Styling the Modal

• Employee Delete Action Creator

• Wiring up Employee Delete

• Bonus!