Create a WhatsApp Clone in React Native – Mobile App Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Intro video (from course landing page)

Lecture 2: How to ask questions

Lecture 3: What is Expo?

Lecture 4: Creating our project!

Lecture 5: A quick rundown of the project structure

Lecture 6: Where do I find the source code?

Lecture 7: Some useful VS Code extensions

Lecture 8: Running the app on a real device

Lecture 9: Running the app on an Android emulator

Lecture 10: Running the app on an iOS emulator

Chapter 2: React Native basics – quick overview

Lecture 1: Styling elements

Lecture 2: Buttons

Lecture 3: SafeArea

Lecture 4: Hooks – useState

Lecture 5: Hooks useEffect

Lecture 6: Hooks – useCallback

Chapter 3: Fonts and splashscreens

Lecture 1: Picking a custom font

Lecture 2: Showing a splash screen while loading

Lecture 3: Adding a custom splash screen

Lecture 4: Setting custom fonts

Chapter 4: Adding the navigation system

Lecture 1: Installing React Navigation

Lecture 2: Creating the stack navigator

Lecture 3: Fixing the screen display

Lecture 4: Navigating to a screen on button press

Lecture 5: Configuring the navigation options

Lecture 6: Adding bottom tabs

Lecture 7: Configuring the titles of our navigators

Lecture 8: Displaying icons on our bottom tabs

Lecture 9: Separating our navigator into its own file

Lecture 10: Separating the 'logged in' navigator

Chapter 5: Chat screen UI

Lecture 1: Creating the chat screen

Lecture 2: Setting the background image

Lecture 3: Handling the chat safe area

Lecture 4: Buttons with icons

Lecture 5: Styling the textbox and buttons

Lecture 6: Showing a send button as the user types

Lecture 7: Styling the send button

Lecture 8: Handing a message being submitted

Lecture 9: Fixing the textbox being hidden behind the keyboard

Chapter 6: Sign up screen

Lecture 1: Creating the sign up screen

Lecture 2: Adding a page container component

Lecture 3: Creating a custom input component

Lecture 4: Adding an icon to the input

Lecture 5: Styling the label

Lecture 6: Styling the textbox

Lecture 7: Displaying error text

Lecture 8: Creating a custom submit button

Lecture 9: Submit button title, onPress and remaining style

Lecture 10: Switching between sign up and sign in forms

Lecture 11: Setting the form image

Lecture 12: Prevent keyboard from hiding the form

Chapter 7: Form validation

Lecture 1: Handling text changed

Lecture 2: Validation demo

Lecture 3: First name and last name validation

Lecture 4: Refactoring the validation functionality

Lecture 5: Improving the return value

Lecture 6: Validating emails and passwords

Lecture 7: Improving our textboxes

Lecture 8: Validating the sign in form values

Lecture 9: Managing form state with useReducer

Lecture 10: Evaluating the whole form's validity

Lecture 11: Evaluating the whole sign in form validity

Lecture 12: Displaying the error messages

Chapter 8: Creating the user's account (signing up)

Lecture 1: Getting the form values

Lecture 2: Creating our Firebase project

Lecture 3: Firebase helper file

Lecture 4: Authenticating a user with Firebase

Lecture 5: Handing 'email already in use' errors

Lecture 6: Displaying errors

Lecture 7: Adding a loading spinner

Lecture 8: Sending user data to the database

Lecture 9: Using Redux toolkit to manage app state

Lecture 10: Configuring out auth slice

Lecture 11: Saving auth info to the state

Lecture 12: Accessing data from the state

Lecture 13: Going to the main page when they sign up

Lecture 14: Saving sign in data to storage

Lecture 15: Creating the start up screen

Lecture 16: Handling when storage is empty

Lecture 17: Handling an expired token

Lecture 18: Auto logging in if a token exists

Lecture 19: Clearing the storage – forcing the log out

Lecture 20: Signing in

Lecture 21: Handling sign in errors

Lecture 22: Fixing error: "Can't perform a React state update on an unmounted component"

Lecture 23: Logout timer

Lecture 24: Loading spinner for the sign in form

Lecture 25: 'test mode' for quick sign in

Chapter 9: Settings page

Lecture 1: Adding a custom page title element

Lecture 2: Fixing the margin of the settings page

Lecture 3: Adding the input fields