Read the full tutorial here: >> How to build an SnapChat Clone with React Native
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
To run the demo follow these steps:
- Head to CometChat Pro and create an account
- From the dashboard, add a new app called "snap-chat"
- 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/snap-chat.gitand 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 ✌️