How to Build an Instagram Clone App With React Native

Introduction

Prerequisites

Installing the Application Platforms

# 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 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 or simulator, otherwise, use the web interface and follow up the tutorial. Lastly, open the project in , 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 Packagesexpo 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

Setting Up Firebase

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 and create an account, you will need a account for this. You can sign in if you already have an account, you should see this project interface once you are in.

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.

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

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.

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.

Project Structure

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 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.

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.

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

Header Component

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.

Stories Component

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

Post Component

Nice, you have done well, keep following and you will complete this app successfully. Now let’s add the authentication components.
LoginForm and SignupForm ComponentsThese 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.

The Screen Directory

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

Login Screen

Now let’s moving on to the SignUpScreen.

Signup Screen

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

New Post Screen

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

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.

The Data Directory

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.

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 />}

Congratulations, you just crushed this project.

Conclusion

About Author

This article was first published