How To Build a WhatsApp Clone in React Native: Beginner’s Guide [Part 2]

A Non-Comparable WhatsApp Clone made using react-native (Expo) and Firebase In the , we installed all the packages that we needed and also checked the firebase structure in case you don't have any doubt. Now, let’s start with the real work and start 👨💻👨💻 previous part (Part 1) First, let’s just see the application's file structure, and then we can start with the navigation and rest all with the help of videos. File Structure This will be the final file structure of our application and you might have some doubts with some files and but these will become clearer once we start building. The file in the navigation and the in the Screens folder, especially will be used later to implement the Auto-Login/Logout features. The rest of the files are clear, I suppose, but these will become soon if any doubt. If any doubt related to code, Check the NavContainer.js StartUpScreen.js Github Link Note: Check The Github Link for this project. The code in Github is till this of this project only. I will upload the entire project code after Part-3. Adding Fonts First, before getting any further let’s add fonts to our application. Then we can move ahead by adding navigation to our application. If you have any doubt, please have a look at of this project where I explained all these things in detail Part1(Module Installation) Download Fonts https://drive.google.com/drive/folders/1wADl1_QIpVzQ72JNKkrdVm0yJUpLjCtW Video https://youtu.be/vSzVDJeu8Mo Adding Navigation With that, we are ready to add navigation to our application. So, create a header and Toptabnaviagator just as in WhatsApp. Video https://youtu.be/G-wBmeIstzM If you have any doubts about AppLoading or HeaderButtons you can check my where I explained all these things in detail. Youtube-Clone-React-Native-Part1 Working on Authentication Now, let’s move on to the Authentication Work and for that, we will also need to Add redux. So, now let’s add both + we also need to add firebase. So, this is going to be long. Let’s get Started Moving To the Auth Screen (Switch Navigator) Before, getting started let’s just add a to our application. What is a ? Switch navigator SwitchNavigator SwitchNavigator is mostly used when adding the Authentication functionality to our application. Basically, it resets routes to their default state depriving us of the back functionality. And that’s what we want. If the user is not sighed In we want the user to navigate to the Auth screen without giving the user the facility to go back to the main screen. So, let’s modify our screen a little bit and below is the code for the whole file: WhatsAppNavigator.js import React from "react"; import { Platform } from "react-native"; import { createStackNavigator } from "react-navigation-stack"; import { createMaterialTopTabNavigator } from "react-navigation-tabs"; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { HeaderButtons, Item } from "react-navigation-header-buttons"; import { Ionicons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons"; import HeaderButton from "../components/HeaderButton"; // Our HeaderButton Component import Chat from "../screens/WhatsApp/Chat"; //-------------------- | import Message from "../screens/WhatsApp/Message"; // | import Status from "../screens/WhatsApp/Status"; // | import Calls from "../screens/WhatsApp/Calls"; // | import Camera from "../screens/WhatsApp/Camera"; // Our all Screens import Auth from "../screens/User/Auth"; // | import AddDetails from "../screens/User/AddDetails"; // | import StartUpScreen from "../screens/StartUpScreen"; // | import Colors from "../constants/Colors"; // | import Profile from "../screens/User/ProfileScreen"; // -------------| const WhatsAppTopTabNav = createMaterialTopTabNavigator( // Our TopNavigator { Camera: { screen: Camera, navigationOptions: { tabBarVisible: false, // TabBar Shouldn't be visible here tabBarLabel: (TabBarInfo) => { // Adding Image as a Camera Label....You can also use 'TabBarIcon' return ( ); }, }, }, Chats: Chat, Status: Status, Calls: Calls, }, { initialRouteName: "Chats", // Initial tab should be the Chats Tab tabBarOptions: { labelStyle: { fontSize: 12, fontFamily: "open-sans-bold", }, indicatorStyle: { backgroundColor: "white", }, activeTintColor: "white", inactiveTintColor: "#D3D3D3", pressColor: "white", style: { backgroundColor: Colors.accent, }, }, } ); const WhatsAppNavigator = createStackNavigator({ MainNav: { screen: WhatsAppTopTabNav, navigationOptions: { headerTitle: "WhatsApp", headerRight: () => ( ), headerTitleStyle: { color: "white", }, headerStyle: { backgroundColor: Colors.accent, elevation: 0, shadowOpacity: 0, }, }, }, Messages: Message, Profile: Profile, }); const AuthNav = createStackNavigator({ // | Auth: Auth, // | AddDetails: AddDetails, // | }); // | // | const MainNavigator = createSwitchNavigator({ // | StartUpScreen: StartUpScreen,// *What We Changed* Auth: AuthNav, // | WhatsAppMain: WhatsAppNavigator, // | }); // | // | export default createAppContainer(MainNavigator)//| Creating And Initialising Firebase project First, quickly go to and click on Add Project / Create A project. Give a Project name → Accept the Conditions → Disable/Enable Google Analytics → Create Project Firebase Console Adding RealTime DataBase I will be using the RealTime database for this app but it's your choice to use fireStore database or RealTime database. Open the above page on and click on Create Database. Specify the database location and . https://console.firebase.google.com/u/0/project/{ProjectName}/database start it in Test mode for now With that our firebase should look like this with default Test rules which we will change later: Now simply click on the storage tab and the sidebar and click on Get started. Adding Firebase Storage Now, press ‘Next’ → ‘Done’. We also need to change our security rules because the default rules allow requests only when the user is authenticated but in our case user will use storage when he/she is signing up. ⁂ He/she is !Authenticated. So, change the rules as follows: Now, similarly, click on the Authentication tab in the sidebar and click on , and in the “Sign-in methods” select Email/Password Adding Authentication Get started Click enable and I won't be enabling the “Email link” toggle but it’s completely your choice. Of course code for that would be different then. Adding Redux Again, If you have any doubt about Redux, Redux Thunk, etc have a look at of this project. Part1(Module Installation) Video https://youtu.be/EwKx0MqOPoA Implementing The Entire Authentication Logic Let’s move on to the main Authentication logic where we will take a look at Redux action creators, Redux Thunk, Firebase, and of course also test our designing skills. To keep the videos short I will be pasting the content of my , as well as the which are quite long. Rest we will create on our own in the video. Below are the 3 files which I will paste n the video. authentication Input component screen AddDetails screen Link for the (Sorry for not uploading the file in the drive to not make the article long by code) Auth.js file https://drive.google.com/file/d/1gIy8m0uu81COi-FUzNZnVK4iDtPqPFuv/view?usp=sharing We used the useReducer hook in above file(Which is not at all related to redux and is provided by react). The useReducer function just as a redux-reducer accepts a reducer function, and an initial state and returns the current state. UseReducer is used in a form where we have multiple inputs or when the next state depends on the previous one. You could have also used useState and have each separate state but this method is more optimized because unlike is useState you don't have to use useCallback for every state. Link for the AddDetails.js file(Sorry for uploading the file in the drive to not make the article long by code.) https://drive.google.com/file/d/15yJaQMfyUXyrxjExN0qWDiAAl-h9PyN2/view?usp=sharing Also link, for the Input component : https://drive.google.com/file/d/1p_C60YgtDTKY1gLRAoGwBF0XqbXcqUmb/view?usp=sharing Now, let’s complete our Authentication work with this video: Video https://youtu.be/QS5WauiIaQc Finally, Authentication is nearly finished. Oof! Now we can Login/Signup but we also want “Auto-”. So, let’s work on that first then we can start working on our Home/Chat screen where we can start showing a list of users that are stored in the firebase database. Implementing Auto-Login Soo, Let’s also add an Auto-Login facility in our app so that the user doesn’t have to log in again and again. Basically, we need to store our token somewhere on the device and if it’s there when the App re-launches then we can navigate users to the Chat screen. But we can’t store it in redux as redux is in memory and the data will be lost when the app re-launches. So, we will be using AsyncStorage instead which allows us to persist data offline. Also, the token that we get from firebase has a expiresIn field that tells us when the token will expire, and generally, it will expire after 1 hour. So, we have to add some logic to detect if the token has expired or not and navigate accordingly. Video https://youtu.be/HwKKNXvAPZQ Implementing Auto-Logout We might be chatting in our app and after 1 hour our token will get expired in the middle of our chatting. Then as soon as we do some work related to firebase, we will get errors because our token will be expired right? For that, we need to add some logic that automatically clears our Auth redux store as soon as our token gets expired(with the help of timers). But we also need to navigate back to Auth screen and for that, we need a place that is always rendered. Yes, that is the App.js file . But there we can’t access our redux store as only our navigator is inside our provider. So, we need to wrap our Navigator inside a component where we can check if our Auth redux store is empty or not. And if it’s empty we can navigate to the Authenticate Screen. . Let’s see 👀 it in 👨💻👨💻 That was a mouthful Video https://youtu.be/cGel9eX9Tjc Creating Our Chat/Home Screen + Adding Logout So, This gonna be something interesting cuz now we will be able to see some output in our app i.e See all the users Signed Up. First, in the video, let’s start up by making our component which we will pass in the UserItem FlatList Video https://youtu.be/xIpD7MpR-qw If you are going by the video, I made some errors which I corrected later in the video. So, make sure you watch the entire video till the very end. But nevertheless, we have completed the following in just 1 article Navigation Authentication Login/Logout Auto-Login/Auto-Logout Showing all the Users stored in our firebase database Wow !! we are just a step away from our complete app! So, now only the messaging part is left which I will take up in the next Part because the article is getting too long now. 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