What you’ll be building. See live and Git Repo . demo Here Introduction Do you want to advance in your app development career? Then it's time to complete this LinkedIn Clone Project. We will create a LinkedIn Clone using ReactNative, which will vastly improve your understanding of this cross-platform framework. This tutorial was put together with the help of , , and . We will be creating project with your JavaScript skills, as shown in the images above. If you want to add this project to your portfolio, then jump on the keyboard with me and we'll figure it out. ReactNative Firebase CometChat Prerequisite To digest this tutorial, you should already have ground knowledge of ReactNative, the rest of the stacks can easily be understood with no hassle. Listed below are the packages used for developing this application. - - - - - - ReactNative Firebase - CometChat - Formik Yup ReactNative Media Query Expo NodeJs Installing The Project Dependencies First, Download and Install NodeJs on your machine, visit their and complete the installation if you haven’t already. Next, you need to have the Expo-CLI installed on your computer using the command below. You can visit their doc page using this . website link # Install Expo-CLI npm install --global expo-cli Afterward, open the terminal and create a new expo project with the name linkedin-clone and choose the blank template when prompted. Use the example below to do this. #Create a new expo project and navigate to the directory expo init linkedin-clone cd linkedin-clone #Start the newly created expo project expo start Running the above commands on the terminal will create a new react-native project and start it up on the browser. Now you will have the option of launching the IOS, Android, or the Web interface by simply selecting the one that you want. To spin up the development server on IOS or Android you will need a simulator for that, use the instruction found here to use an IOS or Android simulator, otherwise, use the web interface and follow up the tutorial. Awesome, now let's install these essential dependencies for our project using the instruction below. The default package manager for the expo is yarn, see the codes below. # Install the native react navigation libraries yarn add @react-navigation/native yarn add @react-navigation/native-stack #Installing dependencies into an Expo managed project expo install react-native-screens react-native-safe-area-context # Install Yup and Formik for validating our forms yarn add formik yup Amazing, now let’s set up Firebase for this project. Setting Up Firebase First, run the command below on your expo project terminal. Use the code below to properly install it. #Install firebase with the command expo install firebase Good, let's set up the firebase console for this project including the services we will be using. We will proceed by signing up for a firebase account if you don’t have one already. Afterward, head to Firebase and create a new project named linkedin-clone, activate the email and password authentication service, details are spelled out below. Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since we’ll be using the email and password authentication method in this tutorial, we need to enable this method for the project we created in Firebase, as it is by default disabled. Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase. Epic, let's activate the Firestore service which we will be used for storing all the posts coming from our linkedin-clone application. To activate the Firestore service, navigate to the Firestore tab on the sidebar as seen in the images below and click on “create database”. Next, go to the Firestore rules and make the changes as seen in the images below. Next, we want to use the timestamp as an index for ordering our posts, to do so, we have to create an index for it. Follow the process as seen in the images below. Click on the single field tab and add an exception as seen in the image below. Enter posts as the collection ID and timestamp as the field. Click next, and enable the scopes as seen in the images below. If you have done the above steps correctly, you should have the same result as seen in the image below. Once everything is completed, the loading indicators on the exception blocks should disappear and should now look like this. Nice, you have set up all that we will need for the Firestore services, now lets generate the Firebase SDK configuration keys. You need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform. Once you finish up the SDK config registration, navigate back to the project overview page as seen in the image below. Now you click on the project settings to copy your SDK configuration setups. The config keys seen in the image above must be copied to a separate file which we will later use in the course of this project. Create a file in the root of this project called firebase.js and paste the following codes and save. If you followed all that correctly, you are awesome. Now we will do a similar thing for CometChat next. Setting CometChat Head to and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below. CometChat Click on the Add New App button to create a new app, you will be presented with a modal where you can enter the app details to be created. An example is seen in the image below. After the app creation, you will be navigated to your app dashboard which should look like this. You will also need to copy those keys to a separate file in the manner below. Simply create a file called CONSTANTS.js in the root of the project and paste the code below. Now list this file in the gitIgnore file which is also at the root of this project, this will make sure it won’t be published online. export const CONSTANTS = { APP_ID: 'xxx-xxx-xxx', REGION: 'us', Auth_Key: 'xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx', } Fantastic, that will be enough for the setups, let’s start integrating them all into our application. The Components Directory We have several directories in this project, let's start with the components folder. Create a folder called components within the root of this project. Let's start with the Header component. The Header Component Using the power of react-native-media-query, you will be able to craft out the header component as seen in the image above. Cool, lets add the next component to the components directory. The BottomTabs Component This sticky component is seen at the bottom of the HomeScreen. When you click on the post button, you will be navigated to the . Create a component called and paste the codes below into it. See the code snippet below. AddPostScreen BottomTabs.js Lastly, lets include the card component for this project. The Card Component This is a well-crafted card with many parts to it, it's better to see the code yourself. Create a component called in the components directory and paste the codes below into it. Card.js Awesome, we are just done with the components directory, its time we create the screens. The Screens Directory The screens can be likened to pages on a website, each screen represents a page and you can navigate from screen to screen using the ReactNative navigator package. Let's proceed with the SignupScreen. The Signup Screen This screen is responsible for creating new users. It interfaces between Firebase authentication and CometChat’s. With this screen, you will be able to signup new users to Firebase, and also to CometChat all at once. See the codes below. The Login Screen This screen authenticates already existing users in our platform. When you log in with your correct details, you will be authenticated both with Firebase and CometChat. If you have supplied the correct data you will be let into the system, otherwise, you will be kicked out. Check out the codes below. The Home Screen The Home Screen comprises three components. The Header, Card, and BottomTabs components. This screen dynamically renders the Card component in synchronization with the posts in Firestore. See the code snippet below. The AddPostScreen This screen is responsible for creating new posts. Using Formik and Yup, we collect data from a form and save it to the Firestore database. Here are the codes exhibiting this behavior. The ChatsListScreen The ChatList Screen is responsible for listing all users registered on our platform. Using the CometChat SDK we will retrieve the list of users registered with us. This is how the code looks like. The ChatScreen Lastly, we have the chat screen where users engage in a one-on-one chat. Below is the code for it. Setting Up The Router Now that we have the project all coded, let's set up the navigation routers and guards, create and paste the following codes as directed below. The Navigation fileThis categorizes the screens into two groups, the ones requiring authentication and the others not requiring authentication. Create a new file in the root of the project name and paste the codes below inside of it. “navigation.js” The AuthNavigation file This file logically presents screens to you based on the authState of the firebase authentication service. To proceed, create another file in the root of the project name and paste the codes below inside of it. “AuthNavigation.js” The App file Lastly, replace the codes in the App.js file with the following codes. Congratulations, you just crushed this app, you just need to bring in some of the static images. Download the following images and put them in your assets directory. https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/logo.png https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/avatar.jpg https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/default-avatar.jpg Awesome, you can spin up your server using the code below on your terminal if you have not done that already. # Start your ReactNative local server on the web view yarn web Conclusion Nothing is impossible here; you can crush a chat app with , , and . You've seen how to implement it step by step; now it's time to crush other chat apps on your own. I also have other tutorials that will show you how to create a private or public group chat. ReactNative Firebase CometChat I'm looking forward to seeing your stunning creations. First published here
