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