How to build an Instagram Clone with React Native

Read the full tutorial here: >> How to build an Instagram Clone with React Native

Technology

This demo uses:

@cometchat-pro/react-native-calls
@cometchat-pro/react-native-chat
@react-native-async-storage/async-storage,
@react-native-community/cli,
@react-native-picker/picker,
@react-navigation/bottom-tabs,
@react-navigation/native,
@react-navigation/native-stack,
@react-navigation/stack,
emoji-mart-nativebeta,
firebase,
react,
react-native,
react-native-autolink,
react-native-document-picker,
react-native-elements,
react-native-fast-image,
react-native-gesture-handler,
react-native-get-random-values,
react-native-image-picker,
react-native-keep-awake,
react-native-reanimated,
react-native-safe-area-context,
react-native-screens,
react-native-sound,
react-native-swipe-list-view,
react-native-vector-icons,
react-native-video,
react-native-video-controls,
react-native-webview,
reanimated-bottom-sheet,
rn-fetch-blob,
uuid,
validator

Running the demo

To run the demo follow these steps:

Head to CometChat Pro and create an account
From the dashboard, add a new app called "instagram-clone-react-native"
Select this newly added app from the list.
From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
Also copy the REST_API_KEY from the API & Auth Key tab.
Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
Download the repository here or by running git clone https://github.com/hieptl/instagram-clone-react-native.git and open it in a code editor.
Head to Firebase and create a new project
Create a file called env.js in the root folder of your project.
Import and inject your secret keys in the env.js file containing your CometChat and Firebase in this manner.

export const fbConfig = {
  apiKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  authDomain: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  databaseURL: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  projectId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  storageBucket: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  messagingSenderId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  appId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  measurementId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
};

export const cometChatConfig = {
  cometChatAppId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  cometChatRegion: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  cometChatAuthKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
  cometChatRestApiKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
};

cd to your root folder and hit npm i --force to install the packages.
Run cd to the ios folder then run pod install to install the pods. Once pods are installed run cd .. to go back to the root folder.
Run the app on iOS using npx react-native run-ios & on Android using npx react-native run-android
Make sure to include env.js in your gitIgnore file from being exposed online.
If you would like to test your application on IOS and you are using a Macbook - Apple Chip, you need to follow this link to configure your xcode and your ios project. CometChat - Set up for IOS
If you would like to test your application on Android and you have to face with an issue related to ANDROIRD_ROOT_SDK. Please refer to this link to get the solution.

Questions about running the demo? Open an issue. We're here to help ✌️

Useful links

cometchat-pro-tutorials/instagram-clone-react-native

About

Resources

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages