Create a WhatsApp Clone in React Native – Mobile App Guide

سرفصل های دوره

Use React Native to build an instant messenger like WhatsApp for iOS and Android devices

1. Introduction

1. Intro video (from course landing page)

2. How to ask questions.html

3. What is Expo

4. Creating our project!

5.1 whatsApp-projectOverview.zip

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.1 whatsApp-styleBasics.zip

1. Styling elements

2.1 whatsApp-buttonBasics.zip

2. Buttons

3.1 whatsApp-safeArea.zip

3. SafeArea

4.1 whatsApp-useState.zip

4. Hooks - useState

5.1 whatsApp-useEffect.zip

5. Hooks useEffect

6.1 whatsApp-useCallback.zip

6. Hooks - useCallback

3. Fonts and splashscreens

1.1 whatsApp-addingFonts.zip

1. Picking a custom font

2.1 whatsApp-expoSplashScreen.zip

2. Showing a splash screen while loading

3.1 splashscreen.zip

3.2 splashscreen.zip

3.3 whatsApp-customSplashScreen.zip

3. Adding a custom splash screen

4.1 whatsApp-fonts.zip

4. Setting custom fonts

4. Adding the navigation system

1.1 whatsApp-reactNavigation.zip

1. Installing React Navigation

2.1 whatsApp-stackNavigator.zip

2. Creating the stack navigator

3.1 whatsApp-screenFix.zip

3. Fixing the screen display

4.1 whatsApp-navigatingToScreen.zip

4. Navigating to a screen on button press

5.1 whatsApp-navigationOptions.zip

5. Configuring the navigation options

6.1 whatsApp-bottomTabs.zip

6. Adding bottom tabs

7.1 whatsApp-navigatorTitles.zip

7. Configuring the titles of our navigators

8.1 whatsApp-icons.zip

8. Displaying icons on our bottom tabs

9.1 whatsApp-appNavigator.zip

9. Separating our navigator into its own file

10.1 whatsApp-mainNavigator.zip

10. Separating the logged in navigator

5. Chat screen UI

1.1 whatsApp-chatScreen.zip

1. Creating the chat screen

2.1 droplet.zip

2.2 whatsApp-backgroundImage.zip

2. Setting the background image

3.1 whatsApp-chatPageSafeArea.zip

3. Handling the chat safe area

4.1 whatsApp-buttonIcons.zip

4. Buttons with icons

5.1 whatsApp-inputStyles.zip

5. Styling the textbox and buttons

6.1 whatsApp-showingSendButton.zip

6. Showing a send button as the user types

7.1 whatsApp-sendButtonStyle.zip

7. Styling the send button

8.1 whatsApp-sendMessage.zip

8. Handing a message being submitted

9.1 whatsApp-keyboardAvoidingView.zip

9. Fixing the textbox being hidden behind the keyboard

6. Sign up screen

1.1 whatsApp-authScreen.zip

1. Creating the sign up screen

2.1 whatsApp-pageContainer.zip

2. Adding a page container component

3.1 whatsApp-customInput.zip

3. Creating a custom input component

4.1 whatsApp-inputIcon.zip

4. Adding an icon to the input

5.1 whatsApp-labelStyle.zip

5. Styling the label

6.1 whatsApp-inputStyle.zip

6. Styling the textbox

7.1 whatsApp-errorText.zip

7. Displaying error text

8.1 whatsApp-submitButton.zip

8. Creating a custom submit button

9.1 whatsApp-buttonTitle.zip

9. Submit button title, onPress and remaining style

10.1 whatsApp-switchingForms.zip

10. Switching between sign up and sign in forms

11.1 whatsApp-formImage.zip

11. Setting the form image

12.1 whatsApp-signUpKeyboardAvoidingView.zip

12. Prevent keyboard from hiding the form

7. Form validation

1.1 whatsApp-handlingTextChanged.zip

1. Handling text changed

2.1 whatsApp-validationDemo.zip

2. Validation demo

3.1 whatsApp-stringValidation.zip

3. First name and last name validation

4.1 whatsApp-refactoringValidation.zip

4. Refactoring the validation functionality

5.1 whatsApp-improvingReturnValue.zip

5. Improving the return value

6.1 whatsApp-remainingValidation.zip

6. Validating emails and passwords

7.1 whatsApp-textboxImprovements.zip

7. Improving our textboxes

8.1 whatsApp-signInValidation.zip

8. Validating the sign in form values

9.1 whatsApp-useReducer.zip

9. Managing form state with useReducer

10.1 whatsApp-evaluatingFormValidity.zip

10. Evaluating the whole forms validity

11.1 whatsApp-evaluatingSignInForm.zip

11. Evaluating the whole sign in form validity

12.1 whatsApp-showingErrorMessages.zip

12. Displaying the error messages

8. Creating the users account (signing up)

1.1 whatsApp-inputValues.zip

1. Getting the form values

2.1 whatsApp-firebase.zip

2. Creating our Firebase project

3.1 whatsApp-firebaseHelper.zip

3. Firebase helper file

4.1 whatsApp-creatingUserInFirebase.zip

4. Authenticating a user with Firebase

5.1 whatsApp-emailInUse.zip

5. Handing email already in use errors

6.1 whatsApp-handlingErrors.zip

6. Displaying errors

7.1 whatsApp-loadingSpinner.zip

7. Adding a loading spinner

8.1 whatsApp-creatingUsers.zip

8. Sending user data to the database

9.1 whatsApp-installingReduxToolkit.zip

9. Using Redux toolkit to manage app state

10.1 whatsApp-authSlice.zip

10. Configuring out auth slice

11.1 whatsApp-dispatchingActions.zip

11. Saving auth info to the state

12.1 whatsApp-accessingState.zip

12. Accessing data from the state

13.1 whatsApp-showingMainNavigator.zip

13. Going to the main page when they sign up

14.1 whatsApp-savingSignInData.zip

14. Saving sign in data to storage

15.1 whatsApp-startUpScreen.zip

15. Creating the start up screen

16.1 whatsApp-handlingNoStorage.zip

16. Handling when storage is empty

17.1 whatsApp-handlingExpiredTokens.zip

17. Handling an expired token

18.1 whatsApp-autoLogIn.zip

18. Auto logging in if a token exists

19.1 whatsApp-manuallyClearingStorage.zip

19. Clearing the storage - forcing the log out

20.1 whatsApp-signingIn.zip

20. Signing in

21.1 whatsApp-signInErrors.zip

21. Handling sign in errors

22.1 whatsApp-errorFix.zip

22. Fixing error Cant perform a React state update on an unmounted component

23.1 whatsApp-logoutTimer.zip

23. Logout timer

24.1 whatsApp-signInLoadingSpinner.zip

24. Loading spinner for the sign in form

25.1 whatsApp-signInTestMode.zip

25. test mode for quick sign in

9. Settings page

1.1 whatsApp-pageTitle.zip

1. Adding a custom page title element

2.1 whatsApp-settingsPageSpacing.zip

2. Fixing the margin of the settings page

3.1 whatsApp-settingsInput.zip

3. Adding the input fields

4.1 whatsApp-inputInitialValues.zip

4. Setting the initial values of the input fields

5.1 whatsApp-settingsSubmitButton.zip

5. Adding the save button

6.1 whatsApp-settingsSaveNewData.zip

6. Updating the user in the database

7.1 whatsApp-logout.zip

7. Logout button

8.1 whatsApp-updateSettingsState.zip

8. Updating the state with the new data

9.1 whatsApp-hidingSubmitWhenNoChanges.zip

9. Hiding the submit button when there are no changes

10.1 userimage.zip

10.2 whatsApp-outputtingUserImage.zip

10. Outputting the default user profile image

11.1 whatsApp-userImageStyle.zip

11. Styling the user image

12.1 whatsApp-editIcon.zip

12. Adding an edit icon

13.1 whatsApp-requestingPermissions.zip

13. Requesting permission to access the users images

14.1 whatsApp-openingImagePicker.zip

14. Opening the image picker

15.1 whatsApp-showingNewImage.zip

15. Updating the page to show the new image

16.1 whatsApp-imageBlob.zip

16. Getting the image blob data

17.1 whatsApp-uploadingImages.zip

17. Uploading images using Firebase Storage

18.1 whatsApp-savingUploadedImages.zip

18. Saving the uploaded image to the users database data

19.1 whatsApp-updatingUserStateData.zip

19. Updating the state data with the new profile picture

20.1 whatsApp-imageLoadingIndicator.zip

20. Image upload loading spinner

10. Searching for users to chat with

1.1 whatsApp-headerButton.zip

1. Adding the create chat header button

2.1 whatsApp-openingNewChatPage.zip

2. Opening the new chat page

3.1 whatsApp-creatingSearchBox.zip

3. Creating our user search box

4.1 whatsApp-noResultsFound.zip

4. Showing a message when no results were found

5.1 whatsApp-searchTimer.zip

5. Searching after the user stops typing

6.1 whatsApp-searchingUsers.zip

6. Searching for users

7.1 whatsApp-outputtingData.zip

7. Outputting search results

8. Adding fake users

9.1 whatsApp-dataItem.zip

9. Creating our search result component

10.1 whatsApp-stylingDataItem.zip

10. Styling the search results

11.1 whatsApp-hidingEditButton.zip

11. Hiding the profile image edit button

11. Creating a new chat

1.1 whatsApp-navigatingToChatScreen.zip

1. Selecting the user we want to chat with

2.1 whatsApp-savingStoredUsers.zip

2. Storing found users in the state

3.1 whatsApp-retrievingStoredUsers.zip

3. Getting the user data from the stored users

4.1 whatsApp-newChatBubble.zip

4. Showing a message when its a new chat

5.1 whatsApp-stylingBubble.zip

5. Styling the new chat message bubble

6.1 whatsApp-creatingChats.zip

6. Creating the chat when a message is sent

12. Retrieving chats

1.1 whatsApp-getChatsOnLogin.zip

1. Getting the user chats when the app starts

2.1 whatsApp-unsubscribingListeners.zip

2. Unsubscribing the firebase listeners

3.1 whatsApp-retrievingChatData.zip

3. Getting the data for each of the users chats

4.1 whatsApp-savingChatDataToState.zip

4. Saving the chat data to state

5.1 whatsApp-loadingSpinnerGetChats.zip

5. Showing a loading spinner while we load the chats

6.1 whatsApp-chatListFlatList.zip

6. Iterating the chat list

7.1 whatsApp-setStoredUsers.zip

7. Setting the stored users on login

8.1 whatsApp-outputtingChatData.zip

8. Outputting the user data

9.1 whatsApp-navigatingToChats.zip

9. Navigating to the chats on press

13. Sending messages

1.1 whatsApp-sendMessages.zip

1. Sending text based messages

2.1 whatsApp-updatingChat.zip

2. Updating chat data when message is sent

3.1 whatsApp-messagesSlice.zip

3. Adding messages to app state when the app loads

4.1 whatsApp-latestMessageText.zip

4. Displaying the latest message text underneath the chat

14. Outputting chat messages

1.1 whatsApp-errorBubble.zip

1. Showing an error message when messages fail to send

2.1 whatsApp-getMessagesForChat.zip

2. Only retrieving messages for the chat were looking at

3.1 whatsApp-stylingOurMessages.zip

3. Styling message that we sent

4.1 whatsApp-stylingTheirMessages.zip

4. Styling the messages sent by others

15. Message context menu (additional message actions)

1.1 whatsApp-longPress.zip

1. Reacting to long presses on the messages

2.1 whatsApp-openingMenu.zip

2. Opening the context menu on long press

3.1 whatsApp-copyToClipboard.zip

3. Copy to clipboard menu option

4.1 whatsApp-customMenuItems.zip

4. Customising the menu item components

16. Starring messages

1.1 whatsApp-starMessages.zip

1. Calling the star message function

2.1 whatsApp-starMessagesDatabase.zip

2. Adding starred messages to the database

3.1 whatsApp-starredMessagesState.zip

3. Adding and removing starred messages in the app state

4.1 whatsApp-settingInitialStarredMessages.zip

4. Setting the initial starred messages state

5.1 whatsApp-updatingStarredMessageUI.zip

5. Updating the menu option for star and unstar

6. Showing a star icon next to the message

7.1 whatsApp-outputMessageDate.zip

7. Outputting the date next to the message

17. Replying to messages

1.1 whatsApp-setReplyTo.zip

1. Selecting a message to reply to

2.1 whatsApp-replyToComponent.zip

2. Creating our reply component

3.1 whatsApp-replyToStyle.zip

3. Styling the reply section

4.1 whatsApp-cancelReply.zip

4. Cancelling the reply

5.1 whatsApp-sendingReplyToDatabase.zip

5. Sending the reply to the database

6.1 whatsApp-displayingReply.zip

6. Showing the message were replying to

7.1 whatsApp-replyFinishingTouches.zip

7. Finishing touches to the replies

18. Sending image messages

1.1 whatsApp-openingTheImagePicker.zip

1. Opening the image picker

2.1 whatsApp-awesomeAlert.zip

2. Showing the popup image confirmation

3.1 whatsApp-uploadChatImages.zip

3. Uploading chat images

4.1 whatsApp-sendingImageMessage.zip

4. Sending the image message

5.1 whatsApp-outputtingImage.zip

5. Outputting uploaded images

6.1 whatsApp-fixNewChatImage.zip

6. Bug fix Creating a new chat by sending a message

7.1 whatsApp-uploadingFromCamera.zip

7. Sending pictures from your camera

8.1 whatsApp-scrollingToBottom.zip

8. Scrolling the chat to the bottom on new message

19. Creating group chats

1.1 whatsApp-newGroupButton.zip

1. Creating a new group button

2.1 whatsApp-chatNameTextbox.zip

2. Creating the chat name textbox

3.1 whatsApp-createChatButton.zip

3. Adding the create button

4.1 whatsApp-dataItemCheckbox.zip

4. Creating the user checkboxes

5.1 whatsApp-selectedUsers.zip

5. Selecting users for our group chat

6.1 whatsApp-outputSelectedUsers.zip

6. Outputting the selected users

7.1 whatsApp-removeSelectedUser.zip

7. Removing a selected user when pressed

8. Styling the selected users list items

9.1 whatsApp-scrollListToEnd.zip

9. Scrolling the selected users list to the end

10.1 whatsApp-creatingGroupChat.zip

10. Handing the create button press

11.1 whatsApp-openingExistingChat.zip

11. Opening an existing chat if one with that user exists

12.1 whatsApp-fixKeyboardAvoidingView.zip

12. [Bug fix] Fixing space at bottom of screen when on a new chat

13. Some small UI updates when its a group chat

14.1 whatsApp-senderName.zip

14. Outputting the sender name when its a group chat

20. Chat user settings page

1.1 whatsApp-settingsButton.zip

1. Creating the chat settings button

2.1 whatsApp-contactScreen.zip

2. Creating the contact screen

3.1 whatsApp-displayingContactDetails.zip

3. Showing the contacts name and profile image

4.1 whatsApp-commonChats.zip

4. Getting the common chats

5.1 whatsApp-outputtingCommonChats.zip

5. Outputting the common chats

6.1 whatsApp-commonChatsOnPress.zip

6. Navigating to the common chats when clicked

21. Chat settings page

1.1 whatsApp-chatSettingsPage.zip

1. Navigating to the chat settings page

2.1 whatsApp-uploadingChatImages.zip

2. Changing the group chat image

3.1 whatsApp-usingChatImages.zip

3. Using the chat image elsewhere

4.1 whatsApp-chatNameFormHandler.zip

4. Creating the form handler for updating the chat name

5.1 whatsApp-updatingChatName.zip

5. Updating the chat name

6.1 whatsApp-chatNameSuccessMessage.zip

6. Showing a success message when the name is updated

7.1 whatsApp-chatUsersSection.zip

7. Creating a section for displaying the chat users

8. Outputting chat users

22. Removing users from chats

1.1 whatsApp-removeFromChatButton.zip

1. Showing the remove from chat button

2.1 whatsApp-removeUserBehaviour.zip

2. Showing a loading spinner while a user is bring removed

3.1 whatsApp-removeUserDatabase.zip

3. Removing the user from the chat in the database

4.1 whatsApp-removeUserChat.zip

4. Removing the chat from the users chat list

5.1 whatsApp-sendingInfoMessage.zip

5. Sending info message User A removed User B from the chat

6.1 whatsApp-styleInfoMessage.zip

6. Styling the info messages

7.1 whatsApp-leaveChat.zip

7. Leaving chats

8.1 whatsApp-removeFromChatBugFix.zip

8. Bug fix Prevent remove from chat button showing when not in group chat

23. Viewing all chat users on a separate page

1.1 whatsApp-viewUsersButton.zip

1. Adding the view all users button

2.1 whatsApp-navigatingToDataListScreen.zip

2. Navigating to the data list screen

3.1 whatsApp-settingDataListScreenTitle.zip

3. Setting the title of the data list screen

4.1 whatsApp-outputAllUsers.zip

4. Outputting all the users of the chat

5.1 whatsApp-dataListNavigation.zip

5. Data list item on press

24. Adding new users to a chat

1.1 whatsApp-hideExistingUsers.zip

1. Excluding existing participants from search results

2.1 whatsApp-isNewChat.zip

2. Updating the UI if were adding users to an existing chat

3.1 whatsApp-selectedUsersList.zip

3. Passing the selected users to the previous screen

4.1 whatsApp-addToUsersChatList.zip

4. Adding the chat to the users chat list

5.1 whatsApp-updatingChatDataWithNewUsers.zip

5. Saving new users in the chat data

6.1 whatsApp-addUsersConfirmationMessage.zip

6. Sending a confirmation message when a user has been added

25. Viewing starred messages

1. Showing the button to view start messages

2.1 whatsApp-viewStarredMessages.zip

2. Outputting the starred messages

3.1 whatsApp-settingsStarredMessages.zip

3. Showing starred messages on the settings page

26. Sending push notifications

1.1 whatsApp-configuringPushNotifications.zip

1. Configuring the app for push notifications

2. Sending test push notifications

3.1 whatsApp-storingPushTokens.zip

3. Storing the device push tokens on sign in

4.1 whatsApp-removingPushTokens.zip

4. Removing push tokens on logout

5. Bug fix Cant logout when auth token has expired

6.1 whatsApp-sendingPushNotificationsForMessages.zip

6. Sending push notifications when a message is sent

7.1 whatsApp-sendingPushNotificationsForImages.zip

7. Sending push notifications when an image is sent

8.1 whatsApp-notificationClickHandler.zip

8. Handing the notification click event

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training