Create a React Native WhatsApp Clone Mobile App – Guide

Introduction
1 Intro video (from course landing page)
2 How to ask questions
3 What is Expo
4 Creating our project!
5 A quick rundown of the project structure
6 Where do I find the source code
7 Some useful VS Code extensions
8 Running the app on a real device
9 Running the app on an Android emulator
10 Running the app on an iOS emulator

React Native basics – quick overview
11 Styling elements
12 Buttons
13 SafeArea
14 Hooks – useState
15 Hooks useEffect
16 Hooks – useCallback

Fonts and splashscreens
17 Picking a custom font
18 Showing a splash screen while loading
19 Adding a custom splash screen
20 Setting custom fonts

Adding the navigation system
21 Installing React Navigation
22 Creating the stack navigator
23 Fixing the screen display
24 Navigating to a screen on button press
25 Configuring the navigation options
26 Adding bottom tabs
27 Configuring the titles of our navigators
28 Displaying icons on our bottom tabs
29 Separating our navigator into its own file
30 Separating the ‘logged in’ navigator

Chat screen UI
31 Creating the chat screen
32 Setting the background image
33 Handling the chat safe area
34 Buttons with icons
35 Styling the textbox and buttons
36 Showing a send button as the user types
37 Styling the send button
38 Handing a message being submitted
39 Fixing the textbox being hidden behind the keyboard

Sign up screen
40 Creating the sign up screen
41 Adding a page container component
42 Creating a custom input component
43 Adding an icon to the input
44 Styling the label
45 Styling the textbox
46 Displaying error text
47 Creating a custom submit button
48 Submit button title, onPress and remaining style
49 Switching between sign up and sign in forms
50 Setting the form image
51 Prevent keyboard from hiding the form

Form validation
52 Handling text changed
53 Validation demo
54 First name and last name validation
55 Refactoring the validation functionality
56 Improving the return value
57 Validating emails and passwords
58 Improving our textboxes
59 Validating the sign in form values
60 Managing form state with useReducer
61 Evaluating the whole form’s validity
62 Evaluating the whole sign in form validity
63 Displaying the error messages

Creating the user’s account (signing up)
64 Getting the form values
65 Creating our Firebase project
66 Firebase helper file
67 Authenticating a user with Firebase
68 Handing ’email already in use’ errors
69 Displaying errors
70 Adding a loading spinner
71 Sending user data to the database
72 Using Redux toolkit to manage app state
73 Configuring out auth slice
74 Saving auth info to the state
75 Accessing data from the state
76 Going to the main page when they sign up
77 Saving sign in data to storage
78 Creating the start up screen
79 Handling when storage is empty
80 Handling an expired token
81 Auto logging in if a token exists
82 Clearing the storage – forcing the log out
83 Signing in
84 Handling sign in errors
85 Fixing error Can’t perform a React state update on an unmounted component
86 Logout timer
87 Loading spinner for the sign in form
88 ‘test mode’ for quick sign in

Settings page
89 Adding a custom page title element
90 Fixing the margin of the settings page
91 Adding the input fields
92 Setting the initial values of the input fields
93 Adding the save button
94 Updating the user in the database
95 Logout button
96 Updating the state with the new data
97 Hiding the submit button when there are no changes
98 Outputting the default user profile image
99 Styling the user image
100 Adding an ‘edit’ icon
101 Requesting permission to access the user’s images
102 Opening the image picker
103 Updating the page to show the new image
104 Getting the image blob data
105 Uploading images using Firebase Storage
106 Saving the uploaded image to the user’s database data
107 Updating the state data with the new profile picture
108 Image upload loading spinner

Searching for users to chat with
109 Adding the ‘create chat’ header button
110 Opening the new chat page
111 Creating our user search box
112 Showing a message when no results were found
113 Searching after the user stops typing
114 Searching for users
115 Outputting search results
116 Adding fake users
117 Creating our search result component
118 Styling the search results
119 Hiding the profile image edit button

Creating a new chat
120 Selecting the user we want to chat with
121 Storing found users in the state
122 Getting the user data from the stored users
123 Showing a message when it’s a new chat
124 Styling the new chat message bubble
125 Creating the chat when a message is sent

Retrieving chats
126 Getting the user chats when the app starts
127 Unsubscribing the firebase listeners
128 Getting the data for each of the user’s chats
129 Saving the chat data to state
130 Showing a loading spinner while we load the chats
131 Iterating the chat list
132 Setting the stored users on login
133 Outputting the user data
134 Navigating to the chats on press

Sending messages
135 Sending text based messages
136 Updating chat data when message is sent
137 Adding messages to app state when the app loads
138 Displaying the latest message text underneath the chat

Outputting chat messages
139 Showing an error message when messages fail to send
140 Only retrieving messages for the chat we’re looking at
141 Styling message that we sent
142 Styling the messages sent by others

Message context menu (additional message actions)
143 Reacting to long presses on the messages
144 Opening the context menu on long press
145 Copy to clipboard menu option
146 Customising the menu item components

Starring messages
147 Calling the star message function
148 Adding starred messages to the database
149 Adding and removing starred messages in the app state
150 Setting the initial starred messages state
151 Updating the menu option for star and unstar
152 Showing a star icon next to the message
153 Outputting the date next to the message

Replying to messages
154 Selecting a message to reply to
155 Creating our reply component
156 Styling the reply section
157 Cancelling the reply
158 Sending the reply to the database
159 Showing the message we’re replying to
160 Finishing touches to the replies

Sending image messages
161 Opening the image picker
162 Showing the popup image confirmation
163 Uploading chat images
164 Sending the image message
165 Outputting uploaded images
166 Bug fix Creating a new chat by sending a message
167 Sending pictures from your camera
168 Scrolling the chat to the bottom on new message

Creating group chats
169 Creating a ‘new group’ button
170 Creating the chat name textbox
171 Adding the ‘create’ button
172 Creating the user checkboxes
173 Selecting users for our group chat
174 Outputting the selected users
175 Removing a selected user when pressed
176 Styling the selected users list items
177 Scrolling the selected users list to the end
178 Handing the ‘create’ button press
179 Opening an existing chat if one with that user exists
180 [Bug fix] Fixing space at bottom of screen when on a new chat
181 Some small UI updates when it’s a group chat
182 Outputting the sender name when it’s a group chat

Chat user settings page
183 Creating the chat settings button
184 Creating the contact screen
185 Showing the contact’s name and profile image
186 Getting the common chats
187 Outputting the common chats
188 Navigating to the common chats when clicked

Chat settings page
189 Navigating to the chat settings page
190 Changing the group chat image
191 Using the chat image elsewhere
192 Creating the form handler for updating the chat name
193 Updating the chat name
194 Showing a success message when the name is updated
195 Creating a section for displaying the chat users
196 Outputting chat users

Removing users from chats
197 Showing the remove from chat button
198 Showing a loading spinner while a user is bring removed
199 Removing the user from the chat in the database
200 Removing the chat from the user’s chat list
201 Sending info message ‘User A removed User B from the chat’
202 Styling the info messages
203 Leaving chats
204 Bug fix Prevent remove from chat button showing when not in group chat

Viewing all chat users on a separate page
205 Adding the view all users button
206 Navigating to the data list screen
207 Setting the title of the data list screen
208 Outputting all the users of the chat
209 Data list item on press

Adding new users to a chat
210 Excluding existing participants from search results
211 Updating the UI if we’re adding users to an existing chat
212 Passing the selected users to the previous screen
213 Adding the chat to the user’s chat list
214 Saving new users in the chat data
215 Sending a confirmation message when a user has been added

Viewing starred messages
216 Showing the button to view start messages
217 Outputting the starred messages
218 Showing starred messages on the settings page

Sending push notifications
219 Configuring the app for push notifications
220 Sending test push notifications
221 Storing the device push tokens on sign in
222 Removing push tokens on logout
223 Bug fix Can’t logout when auth token has expired
224 Sending push notifications when a message is sent
225 Sending push notifications when an image is sent
226 Handing the notification click event