Course Content
21. Chat settings page
0/8
1. Navigating to the chat settings page.mp4
04:54
2. Changing the group chat image.mp4
08:54
3. Using the chat image elsewhere.mp4
01:26
4. Creating the form handler for updating the chat name.mp4
07:33
5. Updating the chat name.mp4
06:48
6. Showing a success message when the name is updated.mp4
01:26
7. Creating a section for displaying the chat users.mp4
06:57
8. Outputting chat users.mp4
06:15
9. Settings page
0/20
11. Styling the user image.mp4
03:12
20. Image upload loading spinner.mp4
04:53
19. Updating the state data with the new profile picture.mp4
02:56
18. Saving the uploaded image to the user’s database data.mp4
05:40
17. Uploading images using Firebase Storage.mp4
12:47
16. Getting the image blob data.mp4
07:58
15. Updating the page to show the new image.mp4
05:21
14. Opening the image picker.mp4
04:11
13. Requesting permission to access the user’s images.mp4
10:21
12. Adding an ‘edit’ icon.mp4
04:55
1. Adding a custom page title element.mp4
04:38
10. Outputting the default user profile image.mp4
04:39
9. Hiding the submit button when there are no changes.mp4
05:35
8. Updating the state with the new data.mp4
05:48
7. Logout button.mp4
04:00
6. Updating the user in the database.mp4
08:08
5. Adding the save button.mp4
04:03
4. Setting the initial values of the input fields.mp4
04:58
3. Adding the input fields.mp4
10:16
2. Fixing the margin of the settings page.mp4
01:39
8. Creating the user’s account (signing up)
0/25
13. Going to the main page when they sign up.mp4
01:54
25. ‘test mode’ for quick sign in.mp4
03:15
24. Loading spinner for the sign in form.mp4
01:40
23. Logout timer.mp4
05:53
22. Fixing error Can’t perform a React state update on an unmounted component.mp4
00:52
21. Handling sign in errors.mp4
04:37
20. Signing in.mp4
08:11
19. Clearing the storage – forcing the log out.mp4
01:54
18. Auto logging in if a token exists.mp4
05:20
17. Handling an expired token.mp4
03:50
16. Handling when storage is empty.mp4
05:31
15. Creating the start up screen.mp4
05:36
14. Saving sign in data to storage.mp4
05:12
1. Getting the form values.mp4
05:51
12. Accessing data from the state.mp4
02:57
11. Saving auth info to the state.mp4
07:52
10. Configuring out auth slice.mp4
03:53
9. Using Redux toolkit to manage app state.mp4
04:14
8. Sending user data to the database.mp4
11:19
7. Adding a loading spinner.mp4
03:12
6. Displaying errors.mp4
04:34
5. Handing ’email already in use’ errors.mp4
04:29
4. Authenticating a user with Firebase.mp4
05:49
3. Firebase helper file.mp4
02:34
2. Creating our Firebase project.mp4
06:33
7. Form validation
0/12
1. Handling text changed.mp4
06:04
2. Validation demo.mp4
05:02
3. First name and last name validation.mp4
07:20
4. Refactoring the validation functionality.mp4
03:14
5. Improving the return value.mp4
01:14
6. Validating emails and passwords.mp4
03:16
7. Improving our textboxes.mp4
03:22
8. Validating the sign in form values.mp4
05:32
9. Managing form state with useReducer.mp4
08:40
10. Evaluating the whole form’s validity.mp4
05:06
11. Evaluating the whole sign in form validity.mp4
04:40
12. Displaying the error messages.mp4
03:20
6. Sign up screen
0/12
1. Creating the sign up screen.mp4
03:37
2. Adding a page container component.mp4
07:30
3. Creating a custom input component.mp4
05:33
4. Adding an icon to the input.mp4
07:30
5. Styling the label.mp4
02:05
6. Styling the textbox.mp4
02:16
7. Displaying error text.mp4
05:27
8. Creating a custom submit button.mp4
07:08
9. Submit button title, onPress and remaining style.mp4
03:21
10. Switching between sign up and sign in forms.mp4
09:55
11. Setting the form image.mp4
04:28
12. Prevent keyboard from hiding the form.mp4
04:31
5. Chat screen UI
0/9
1. Creating the chat screen.mp4
03:35
2. Setting the background image.mp4
03:54
3. Handling the chat safe area.mp4
03:56
4. Buttons with icons.mp4
06:03
5. Styling the textbox and buttons.mp4
04:32
6. Showing a send button as the user types.mp4
05:14
7. Styling the send button.mp4
03:14
8. Handing a message being submitted.mp4
02:37
9. Fixing the textbox being hidden behind the keyboard.mp4
05:15
4. Adding the navigation system
0/10
1. Installing React Navigation.mp4
05:14
2. Creating the stack navigator.mp4
06:59
3. Fixing the screen display.mp4
02:38
4. Navigating to a screen on button press.mp4
04:17
5. Configuring the navigation options.mp4
04:43
6. Adding bottom tabs.mp4
06:24
7. Configuring the titles of our navigators.mp4
03:48
8. Displaying icons on our bottom tabs.mp4
10:39
9. Separating our navigator into its own file.mp4
04:22
10. Separating the ‘logged in’ navigator.mp4
05:51
3. Fonts and splashscreens
0/4
1. Picking a custom font.mp4
04:10
2. Showing a splash screen while loading.mp4
09:25
3. Adding a custom splash screen.mp4
02:17
4. Setting custom fonts.mp4
06:44
26. Sending push notifications
0/8
1. Configuring the app for push notifications.mp4
10:21
2. Sending test push notifications.mp4
03:30
3. Storing the device push tokens on sign in.mp4
10:40
4. Removing push tokens on logout.mp4
07:10
5. Bug fix Can’t logout when auth token has expired.mp4
01:32
6. Sending push notifications when a message is sent.mp4
08:29
7. Sending push notifications when an image is sent.mp4
01:54
8. Handing the notification click event.mp4
04:57
25. Viewing starred messages
0/3
1. Showing the button to view start messages.mp4
02:27
2. Outputting the starred messages.mp4
05:44
3. Showing starred messages on the settings page.mp4
04:50
24. Adding new users to a chat
0/6
1. Excluding existing participants from search results.mp4
04:28
2. Updating the UI if we’re adding users to an existing chat.mp4
04:02
3. Passing the selected users to the previous screen.mp4
03:52
4. Adding the chat to the user’s chat list.mp4
05:16
5. Saving new users in the chat data.mp4
02:24
6. Sending a confirmation message when a user has been added.mp4
06:16
23. Viewing all chat users on a separate page
0/5
1. Adding the view all users button.mp4
03:37
2. Navigating to the data list screen.mp4
02:17
3. Setting the title of the data list screen.mp4
02:38
4. Outputting all the users of the chat.mp4
05:41
5. Data list item on press.mp4
03:14
22. Removing users from chats
0/8
1. Showing the remove from chat button.mp4
02:53
2. Showing a loading spinner while a user is bring removed.mp4
03:40
3. Removing the user from the chat in the database.mp4
04:07
4. Removing the chat from the user’s chat list.mp4
07:04
5. Sending info message ‘User A removed User B from the chat’.mp4
05:17
6. Styling the info messages.mp4
03:49
7. Leaving chats.mp4
10:05
8. Bug fix Prevent remove from chat button showing when not in group chat.mp4
00:48
1. Introduction
0/9
1. Intro video (from course landing page).mp4
01:16
3. What is Expo.mp4
02:05
4. Creating our project!.mp4
06:00
5. A quick rundown of the project structure.mp4
06:03
6. Where do I find the source code.mp4
02:43
7. Some useful VS Code extensions.mp4
02:34
8. Running the app on a real device.mp4
02:34
9. Running the app on an Android emulator.mp4
06:03
10. Running the app on an iOS emulator.mp4
02:32
20. Chat user settings page
0/6
1. Creating the chat settings button.mp4
03:38
2. Creating the contact screen.mp4
03:16
3. Showing the contact’s name and profile image.mp4
06:44
4. Getting the common chats.mp4
05:32
5. Outputting the common chats.mp4
04:13
6. Navigating to the common chats when clicked.mp4
03:35
2. React Native basics – quick overview
0/6
1. Styling elements.mp4
03:57
2. Buttons.mp4
03:33
3. SafeArea.mp4
05:56
4. Hooks – useState.mp4
09:10
5. Hooks useEffect.mp4
05:13
6. Hooks – useCallback.mp4
07:11
19. Creating group chats
0/14
1. Creating a ‘new group’ button.mp4
02:49
2. Creating the chat name textbox.mp4
05:42
3. Adding the ‘create’ button.mp4
04:57
4. Creating the user checkboxes.mp4
06:31
5. Selecting users for our group chat.mp4
06:17
6. Outputting the selected users.mp4
07:37
7. Removing a selected user when pressed.mp4
02:26
8. Styling the selected users list items.mp4
05:49
9. Scrolling the selected users list to the end.mp4
02:38
10. Handling the ‘create’ button press.mp4
07:41
11. Opening an existing chat if one with that user exists.mp4
04:06
12. [Bug fix] Fixing space at bottom of screen when on a new chat.mp4
03:47
13. Some small UI updates when it’s a group chat.mp4
04:49
14. Outputting the sender name when it’s a group chat.mp4
03:23
18. Sending image messages
0/8
1. Opening the image picker.mp4
03:55
2. Showing the popup image confirmation.mp4
07:53
3. Uploading chat images.mp4
09:25
4. Sending the image message.mp4
06:41
5. Outputting uploaded images.mp4
04:32
6. Bug fix Creating a new chat by sending a message.mp4
02:57
7. Sending pictures from your camera.mp4
05:08
8. Scrolling the chat to the bottom on new message.mp4
03:58
17. Replying to messages
0/7
1. Selecting a message to reply to.mp4
05:04
2. Creating our reply component.mp4
04:53
3. Styling the reply section.mp4
02:40
4. Cancelling the reply.mp4
02:21
5. Sending the reply to the database.mp4
03:03
6. Showing the message we’re replying to.mp4
05:00
7. Finishing touches to the replies.mp4
03:06
16. Starring messages
0/7
1. Calling the star message function.mp4
07:33
2. Adding starred messages to the database.mp4
04:02
3. Adding and removing starred messages in the app state.mp4
04:51
4. Setting the initial starred messages state.mp4
04:29
5. Updating the menu option for star and unstar.mp4
04:25
6. Showing a star icon next to the message.mp4
02:03
7. Outputting the date next to the message.mp4
06:00
15. Message context menu (additional message actions)
0/4
1. Reacting to long presses on the messages.mp4
07:29
2. Opening the context menu on long press.mp4
09:57
3. Copy to clipboard menu option.mp4
04:35
4. Customising the menu item components.mp4
07:17
14. Outputting chat messages
0/4
1. Showing an error message when messages fail to send.mp4
05:29
2. Only retrieving messages for the chat we’re looking at.mp4
05:18
3. Styling message that we sent.mp4
06:16
4. Styling the messages sent by others.mp4
02:45
13. Sending messages
0/4
1. Sending text based messages.mp4
06:47
2. Updating chat data when message is sent.mp4
03:06
3. Adding messages to app state when the app loads.mp4
07:24
4. Displaying the latest message text underneath the chat.mp4
03:57
12. Retrieving chats
0/9
1. Getting the user chats when the app starts.mp4
07:29
2. Unsubscribing the firebase listeners.mp4
04:46
3. Getting the data for each of the user’s chats.mp4
03:50
4. Saving the chat data to state.mp4
07:42
5. Showing a loading spinner while we load the chats.mp4
03:26
6. Iterating the chat list.mp4
06:39
7. Setting the stored users on login.mp4
08:50
8. Outputting the user data.mp4
06:39
9. Navigating to the chats on press.mp4
04:05
11. Creating a new chat
0/6
1. Selecting the user we want to chat with.mp4
06:43
2. Storing found users in the state.mp4
11:39
3. Getting the user data from the stored users.mp4
06:10
4. Showing a message when it’s a new chat.mp4
05:13
5. Styling the new chat message bubble.mp4
06:10
6. Creating the chat when a message is sent.mp4
12:18
10. Searching for users to chat with
0/11
1. Adding the ‘create chat’ header button.mp4
08:16
2. Opening the new chat page.mp4
08:56
3. Creating our user search box.mp4
04:53
4. Showing a message when no results were found.mp4
06:23
5. Searching after the user stops typing.mp4
06:42
6. Searching for users.mp4
10:23
7. Outputting search results.mp4
05:54
8. Adding fake users.mp4
03:42
9. Creating our search result component.mp4
05:24
10. Styling the search results.mp4
06:31
11. Hiding the profile image edit button.mp4
04:17
[Last updated 1/2023] Create a WhatsApp Clone in React Native – Mobile App Guide (Udemy – Engsub)
Previous
Next
0% Complete