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): Login Auto-Login Logout Auto-Logout SignUp Private Chat with Other Users Profile Screen 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. . I prefer using , but you can use any IDE of your choice. Below is our firebase structure for our app There will be a 2 part project in which the second part will be all the code and its explanations Visual Studio Code 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 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. Redux npm i --save 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. React-Redux 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. I couldn’t find a way to implement to store images in Firebase Storage using an HTTP request. So, if you find a way to do this using fetch(), please do inform me. You need to install the packages that are highlighted above. See the below docs link to install and learn about them: AsyncStorage (Used to store data with app restarts offline) https://docs.expo.dev/versions/latest/sdk/async-storage/ AppLoading (used to show a splash screen until the app loads fonts) https://docs.expo.dev/versions/v43.0.0/sdk/app-loading/ Camera (Used to get Camera Permissions) https://docs.expo.dev/versions/v43.0.0/sdk/camera/ expo-font (Used to load fonts) https://docs.expo.dev/versions/latest/sdk/font/ Expo-Image-Picker (Used to access or click photos) https://docs.expo.dev/versions/v43.0.0/sdk/imagepicker/ Firebase (Gives excess to various firebase functionalities) https://docs.expo.dev/guides/using-firebase/ React-Native-Gifted-Chat (A built-in chat UI design for implementing Chat features in apps) https://github.com/FaridSafi/react-native-gifted-chat 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 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. This article was first published . here Watch the Youtube introduction here: . https://www.youtube.com/watch?v=eAFEvKIJsNI

Fetch

Initialized

YouTube

How to Design a Splash Screen With Expo and React Native

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Benchmarking ChatGPT, Qwen, and DeepSeek on Real-World AI Tasks

5 Things to know about Images React Native

Build an Instagram feed app with just javascript (using Expo & React Native)

Building a Private Messaging Chat App with React-Native: An Essential Guide

Trade Show Experiences

Benchmarking ChatGPT, Qwen, and DeepSeek on Real-World AI Tasks

5 Things to know about Images React Native

Build an Instagram feed app with just javascript (using Expo & React Native)

Building a Private Messaging Chat App with React-Native: An Essential Guide

Trade Show Experiences

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps