How to Build a Photo-Share App with React Native (Instagram Clone)
Tags: reactnative, firebase, javascript, expocli
Published: 2021-11-19 16:06:19

What you’ll be building. [Demo](https://instagram-clone-c3afa.web.app/), Git Repo [Here](https://github.com/Daltonic/instagram-clone).

![Instagram Clone Web UI](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637326012833_instagram-clone-2.gif)

## Introduction

It's time you take your web development to the next level. You need to start developing mobile apps and if you ain’t there yet, start building. React Native has made life a lot easier for all the JavaScript developers out there, especially from the ReactJs community. And to cap it all, Google decided to contribute to the community by providing free starter backend services called Firebase. Firebase will get you producing mind-blowing applications, web or mobile in no time. You don’t need a top-notch machine to start developing a React Native app (initially speaking). All you must do is to get started.


## Prerequisites

To follow up this tutorial, you will need to understand how to use the following stacks.

- [ReactJs](https://reactjs.org/)
- [CSS](https://css-tricks.com/)
- [Firebase](https://firebase.google.com/)
- [Expo](https://expo.dev/)


## Installing the Application Platforms

Firstly, you need to have [NodeJs](https://nodejs.org/) installed on your machine; you can go to their website to do that. Secondly, you need to have the [Expo-CLI](https://docs.expo.dev/get-started/installation/) installed on your computer using the command below.


    # Install Expo-CLI
    npm install --global expo-cli


## Initializing the Project

Next, on the terminal create a new expo project with the name **“*****instagram-clone”*** and the blank template when prompted. You should know that expo-CLI uses [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) by default.


    # Create a project named my-app
    # Select the "blank" template when prompted.
    expo init instagram-clone
    
    # Navigate to the directory.
    cd instagram-clone
    
    # Start the newly created expo project.
    yarn start // or yarn web to spin up the web interface.

Executing the above commands will create a new react-native project and spin it up on the browser. Now you will have the option of launching the IOS, Android, or the Web interface by simply clicking on the one that you want. For the sake of the newbies coding along with me, we will use the web interface. To spin up a development server on a mobile device you will need a simulator. Check out the instructions found here to use an [IOS](https://docs.expo.dev/workflow/ios-simulator/) or [Android](https://docs.expo.dev/workflow/android-studio-emulator/) simulator, otherwise, use the web interface and follow up the tutorial. Lastly, open the project in [VScode](https://code.visualstudio.com/download), and let's get coding.

Superb, you have successfully created the project, let’s install the project dependencies next.


## Installing Project Dependencies

Just the core packages of React Native won’t get us an *instagram clone*, we will add up some more packages to finish up this project.


    # Required Packages
    expo install firebase
    yarn add @react-navigation/native
    yarn add @react-navigation/stack
    yarn add email-validator
    yarn add formik
    yarn add valid-url
    yarn add yup

Epic, you have just completed the installations of our app dependencies, now let’s proceed with setting up Firebase configurations for this project.

## Setting Up Firebase

This app uses Firebase for all its backend activities. To configure Firebase into This app uses Firebase for all its backend activities. To configure Firebase into your project, follow the steps below.

In the first step, we will head on to the [Firebase console](https://console.firebase.google.com) and create an account, you will need a [Gmail](https://mail.google.com) account for this. You can sign in if you already have an account, you should see this project interface once you are in.


![Firebase Console Create Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7ro7k2ocsa9rpuzx9ca.png)


Once you are on this page, click on the ***”add project”*** button and you will be directed to a project creation process. You will start by entering the name of your project.


![Project Creation Process](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637255748542_screenshoteasy+10.png)


Once you have entered a project name, click on continue until the project creation is completed and you will be presented with the project overview page as seen in the image below.


![Project Overview Page](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637311215752_screenshoteasy+11.png)


Next, we want to activate two services on Firebase that will help us build this application. One is the authentication service and the other, the Firestore service.


![Firebase Authentication Options](https://res.cloudinary.com/practicaldev/image/fetch/s--ojXB1W7x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mdvy9q2ozti1c18jiig.png)


Next, click the edit icon on the **email/password** provider and enable it as seen in the image below.


![Firebase Enabling Authentication](https://res.cloudinary.com/practicaldev/image/fetch/s--RYAJQCC4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqut7quz3uszpf1x9vis.png)


Next, head to the Firestore database and activate it by clicking on the get started button, the page should look like this after enabling the Firestore service.


![Cloud Firestore Database](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637312120347_screenshoteasy+12.png)


Now it's time we create a config set up for our application. Head to the project overview page and click on the ***“add app”*** button, and choose the web option.
You can get all this information from the Project Settings page as seen in the image below.


![The Project Settings Page](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637312989327_screenshoteasy+13.png)


Scroll down and you will see the configuration settings. Create a new file called ***firebase.js*** at the root of your project and copy these configurations to it. This file will later be used for developing our application and it should look like this.


{% gist https://gist.github.com/Daltonic/f467d5934d1d5d9e215a62c6cbb8e796 %}


Fantastic, we are done with the basic Firebase settings, let’s proceed to the structuring of this application.


## Project Structure

Your project structure should be looking like this.

![Instagram Clone Project Structure](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637314361525_Screenshot+220.png)


You should keep this as a reference guide as you code along. Jump in with me and let's start creating our project directories and files one after the other.


## 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 and create the files discussed below.

**FormikPostUploader.js Component**
This component is responsible for defining what each post will contain. This component uses ***Formik*** and ***Yup*** for structuring the interface that helps create new posts. It also ensures that each post you upload to the database is well captured and validated with correct data. See the code snippet below.


{% gist https://gist.github.com/Daltonic/7ba11c04467944c16d1905f23992073a %}


Super, now let’s use it in the ***AddNewPost*** component.

**AddNewPost Component**
This component combines the ***FormikPostUploader*** component to improve the user interface. It also adds a Header component that will navigate the "***NewPostScreen***" back to the "***HomeScreen***". The code snippet below describes it better.


{% gist https://gist.github.com/Daltonic/a48368acc0a38d2ae82580deb3ae4b75 %}


Great, we will later hook up this components with the ***NewPostScreen***.

**Header Component**

![The Header Component](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637326244520_screenshoteasy+21.png)


This component carries three icons and the brand name which also serves as the logout button. Among the three icons are a plus, heart, and chats icons. The plus icon navigates you to the ***NewPostScreen***. The snippet below shows this in detail.


{% gist https://gist.github.com/Daltonic/93118c7d163afd50309d52a98696e17c %}


Epic, we will use this component later on the ***HomeScreen***. Let’s proceed to code up the ***Stories*** component.

**Stories Component**

![The Stories Component](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637326324537_screenshoteasy+22.png)


The stories component renders a list of stories and their respective username and is displayed in a vertical scroll view. The code snippet tells it all.


{% gist https://gist.github.com/Daltonic/9bff87ce5e5c8ba2377a832239d3ec8d %}


This component along with the Header component will be used on the ***HomeScreen*** later. It’s time to proceed with the ***BottomTabs*** component.

**BottomTabs Component**

![The Bottom Tab Component](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637326148356_screenshoteasy+20.png)


This component is responsible for displaying the sticky bottom icons at the bottom part of our app. It can also be used for navigation. See the codes below to understand how it works.


{% gist https://gist.github.com/Daltonic/44ce5b6e14261019ad6ac81e30bd2c47 %}


You have done well, let’s build the post component next.

**Post Component**
This component is comprised of many smaller components stacked in one file, it's best we describe it visually and codewise.

![Post Component](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637321569715_screenshoteasy+17.png)


This is a huge component, it is better to spit out the codes for you to look at.


{% gist https://gist.github.com/Daltonic/a47a182692f52de528c53bf692ae4dee %}


Nice, you have done well, keep following and you will complete this app successfully. Now let’s add the authentication components.

**LoginForm and SignupForm Components**
These are the authentication components built to provide a clean authentication user interface. This component also uses Formik and Yup to perform form validation. Since they are similar code-wise, we might just as well discuss them at once. Create and copy the codes below into the following components in your components folder.


{% gist https://gist.github.com/Daltonic/4802b20d729c44559c818673fa850b9b %}



{% gist https://gist.github.com/Daltonic/4039141e3b110dd28114326c29ddb48a %}


Hurray, you have just completed the creation of all the components we will be using for this tutorial. Now let’s jump in and start creating some screens.


## The Screen Directory

This entire project contains four screens which include the ***Login, Signup, Home,*** *and* ***NewPos***t screens. Let’s proceed by coding the ***LoginScreen***.

**Login Screen**

![The Login Screen](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637323829201_screenshoteasy+18.png)


This screen will authenticate a user if he has previously signed up on our application. With correct details the user will be let in, else, the firebase will alert the user of invalid credentials. Here is the code responsible for this behavior.


{% gist https://gist.github.com/Daltonic/40eb6711c0b805ccfa19eff4ef7797b9 %}


Now let’s moving on to the SignUpScreen.

**Signup Screen**

![The Signup Screen](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637324088928_screenshoteasy+19.png)


While the Login Screen authenticates already existing users, the SignUpScreen registers new users into our application.


{% gist https://gist.github.com/Daltonic/b37efae1ad24062893e6559e2d0f2562 %}


Great, let’s add the last two screens starting with the NewPost screen.

**New Post Screen**

![The NewPostScreen](https://paper-attachments.dropbox.com/s_431A30655F0B44358347198A40573D815BB2D44E36A873969FFF079C4860071F_1637326432297_screenshoteasy+24.png)


This component allows us to send a new post to firebase after validating it with the ***FormikPostUploader*** component. The codes are attached below.


{% gist https://gist.github.com/Daltonic/9ad315f6f1f4e2f60a2bb0a84d4f723b %}


Smart, let’s finish up with the ***HomeScreen***.

**Home Screen**
This is the heart of this project. The Home screen uses the ***Post***, ***Header***, and ***BottomTabs*** components to populate the view. This is achieved by retrieving the posts from ***Firestore*** and recursively rendering all the posts with the Post component. The code snippets show this in detail.


{% gist https://gist.github.com/Daltonic/62b0a9f99655a85a5a0794574990c8e1 %}


There you have it, you are almost done with this process, let’s support this app with some static data.

## The Data Directory

This folder contains all the static files needed to support this project, it is essential for supporting the components data. Create a folder named “data” at the root of this project and create the following files inside of it.


{% gist https://gist.github.com/Daltonic/6f8d8e84238b456fbad77247b398b218 %}


Amazing, let’s secure our application routes so unauthorized users won’t access it.


## Route-Guards and Protection

Using the Firebase authentication service and ***authState*** function, we will regulate access to our application. Create two files named “***AuthNavigation.js***” and “***navigation.js***” at the root of this project. Next, paste the following codes into them.


{% gist https://gist.github.com/Daltonic/b5aa737f6a5511851ff073738c2ada6b %}


Good, let’s seal the deal by replacing the ***App.js*** with the code block below.


    import React from 'react'
    import AuthNavigation from './AuthNavigation'
    export default function App() {
      return <AuthNavigation />
    }

Cool, you have been so patient coding along, you deserve a cup of coffee.
Before you go, download the images from the links below and add them to the assets folder of this project.

[https://github.com/Daltonic/instagram-clone/blob/main/assets/header-logo.png?raw=true](https://github.com/Daltonic/instagram-clone/blob/main/assets/header-logo.png?raw=true)

[https://raw.githubusercontent.com/Daltonic/instagram-clone/main/assets/instagram_logo.png](https://raw.githubusercontent.com/Daltonic/instagram-clone/main/assets/instagram_logo.png)

Congratulations, you just crushed this project.


## Conclusion

You don't need rocket science to learn how to develop applications with react and react-native. You can start small but never remain small. With the support of Google's Firebase, learning how to create stunning applications with react and react native will continuously advance your skills in software development and you can land that dream job or upscale your dev skills. You have to learn how to build a react native Instagram clone, it's time you start building.


## About Author

Gospel Darlington is a remote **Fullstack** developer, prolific with technologies such as **VueJs**, **Angular**, **ReactJs**, **React Native**, and **API development**.
He takes a huge interest in the development of high-grade and responsive web applications.

Gospel Darlington currently works as a **freelancer developing apps and writing tutorials** that teach other developers how to integrate software products into their projects.

He spends his free time **coaching young people** on how to be successful in life. His hobbies include inventing new recipes, book writing, songwriting, and singing. You can reach me on [Website](https://daltonic.github.io/), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125/), [Twitter](https://twitter.com/idaltonic), [Facebook](https://www.facebook.com/darlington.gospel01), or [GitHub](https://github.com/Daltonic) for any discussion.