How to Make Whatsapp Clone in React Native: A Beginner’s Guide [Part 1]

What’s up, Guys? So, You have read the title, right? First, let me acquaint you with the clone and its features. Then we can have a look at building it

What Are We Going to Build

The main purpose of this project was to implement the following concepts without the help of firebase mobile SDK and only using firebase real-time database over HTTP requests (in order to use minimum packages):

1. Login
2. Auto-Login
3. Logout
4. Auto-Logout
5. SignUp
6. Private Chat with Other Users
7. Profile Screen
8. Implementing All Imp topics like React-Navigation, Redux, Redux-Thunk, Firebase, etc

Few Notes

In this article, I will just be talking about the firebase structure and all the modules that we are going to use in this project. There will be a 2 part project in which the second part will be all the code and its explanations. I prefer using Visual Studio Code, but you can use any IDE of your choice. Below is our firebase structure for our app

Firebase Structure

{
  "Users": {
    "-Mmk7JylgX2SMdkXt8hq": {
      "UserId": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
      "description": "Just testing while making",
      "name": "Developer",
      "profileImageUrl": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2F1635042532659?alt=media&token=46f2a93a-8700-4cac-b869-26e2e6c5cff6"
    },
    "-Mmkfa6uUFtzkfIyF0l-": {
      "UserId": "HUCgN6jpjwYDY9CwBNesd8w0ztu2",
      "description": "Fake user hehe hitting people ",
      "name": "Sapna Jain",
      "profileImageUrl": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2165051780881?alt=media&token=7dec06a0-9191-4178-95f4-cbb0e5db27dc"
    }
  },
  "ChatRooms": {
    "HUCgN6jpjwYDY9CwBNesd8w0ztu2|U3n9RMAbFpZUEE0v2UM1niDKRw22": {
      "Chats": {
        "LeCadTFGGAWpFRKgDrSx": {
          "_id": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
          "createdAt": "October 24, 2021 at 1:42:44",
          "sentBy": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
          "sentTo": "HUCgN6jpjwYDY9CwBNesd8w0ztu2",
          "text": "Helo Sapna Jain",
          "user": {
            "_id": "U3n9RMAbFpZUEE0v2UM1niDKRw22",
            "avatar": "https://firebasestorage.googleapis.com/v0/b/{MyProject}.appspot.com/o/UserProfile%2F1635042532659?alt=media&token=46f2a93a-8700-4cac-b869-26e2e6c5cff6",
            "name": "Developer"
          }
        }
      }
    }
  }
}

This is our basic Firebase format that will help you a lot in understanding the project. I could find a way to implement to store images in Firebase Storage using an HTTP request. So for only that, I used the firebase mobile SDK (I tried converting the image to base-64, but that made the database too slow)

Initializing Our Project

First, let’s start quickly start with that app with Expo. I will be using ‘Expo CLI’ but it’s completely your choice to use whatever you want.

npm install --global expo-cli

Now, let’s initialize our project and run the development server by:

expo WhatsApp-Clone-React-Native #Choosing blank template
cd WhatsApp-Clone-React-Native
code . # Open VsCode (Optional)
expo start # or npm start

With that, we are ready to install the packages we need

Main Packages Installation

React-Navigation

As the name suggests, react-navigation is used for routing and navigation in native apps. Keeping this article short, let’s just install React-Navigation and its core utilities.

npm install react-navigation

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don’t worry too much about this for now, it’ll become clear soon enough! ~ From the docs

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

All these things are from the docs, and I am not explaining these things much because I assume you know all these things. So, Now let’s Install the StackNavigatorand our TabNavigator.

Stack Navigation

Stack Navigation is the most basic and common form of navigation in any app — web or mobile. How this works is that its screens are managed on a stack. When you open a screen, that screen will be pushed to the top of the stack. It pops or pushes the screen as you open or leave the screen and only the screen on the top is visible. So, it’s simple and let’s install it now.

npm install --save react-navigation-stack

Material Top Tab Navigator

MaterialTopTabNanvigator is used to Tab on the top of the screen and allows us to route to the different screens using a tab bar which is placed on the top of the screen. We will be placing our TabNavigator inside of the main Stack Navigator which is further placed inside of a SwitchNavigator for the Auth Work which we will discuss later. Now, let’s install it.

npm install react-navigation-tabs

Redux and Redux-Thunk

Redux If you are watching this clone, please have some prior knowledge about redux as it’s a little complicated but basically redux is used to manage various states of our Application where all states are stored in one central location where different actions are dispatched and caught by various actions and reducers.

npm i --save redux

React-Redux Basically, this library acts as a binder between React and Redux. It offers various react hooks which allow our components to dispatch (useDispatch) and read data (UseSelector) from our redux store.

npm i --save react-redux

Redux-Thunk

We generally return an action in our action creators but using Redux-Thunk. It acts as middleware, we can return function to it, which takes the store’s dispatch method as the argument and which is used to dispatch actions after any async code like making an API call or any other things that takes some time. Now, let’s install it:

npm install --save redux-thunk

React-Native-Vector-Icons

No need to tell why we need this package. Yup, of course, we need it for having icons in our app. This library is installed by default, but if it isn’t you can install it by:

expo install @expo/vector-icons

Installing Other Packages

Ok, Above we have installed all the main packages that we needed but now let’s also install other packages we need. I won't be explaining each package below, but instead, I am pasting my package.json below along with their docs where you can install them.

You need to install the packages that are highlighted above. See the below docs link to install and learn about them:

1. AsyncStorage (Used to store data with app restarts offline) https://docs.expo.dev/versions/latest/sdk/async-storage/

2. AppLoading (used to show a splash screen until the app loads fonts) https://docs.expo.dev/versions/v43.0.0/sdk/app-loading/

3. Camera (Used to get Camera Permissions) https://docs.expo.dev/versions/v43.0.0/sdk/camera/

4. expo-font (Used to load fonts) https://docs.expo.dev/versions/latest/sdk/font/

5. Expo-Image-Picker (Used to access or click photos) https://docs.expo.dev/versions/v43.0.0/sdk/imagepicker/

6. Firebase (Gives excess to various firebase functionalities) https://docs.expo.dev/guides/using-firebase/

7. React-Native-Gifted-Chat (A built-in chat UI design for implementing Chat features in apps)

   https://github.com/FaridSafi/react-native-gifted-chat

8. React-native-Modal (Used to show modals but can also use the built-in one in React-native)

   https://www.npmjs.com/package/react-native-modal

9. React-navigation-header-buttons (Used for rendering buttons in our navigation bar without any styling and alignment issues) https://www.npmjs.com/package/react-navigation-header-buttons

   Note: I am using vs6 of this package

With that, we have our project completely initialized and all the packages installed. In the next part, we will start with the code, implement all the features and build our app. And no worries, there will be separate videos in the next part implementing all things.

If you are excited about this tutorial and ready to make your own WhatsApp clone, don't forget to react and give your feedback.

Till then, stay safe, stay healthy.

Thank You.