The objective was to build a chat app for mobile devices with React Native.
The app will provide users with a chat interface and options to share images and their location from a phone as well as the Android Simulator.
Chat App Screenshot gif
- Select the background of the chat(four colors to choose)
- Sign-in and anonymous authentication with a username
- Sending/receiving messages in real-time
- images/location sharing
- Offline viewing of cashed messages
- React Native
- Expo
- Google Firebase and Storage
- AsyncStorage cashing for offline usage
- Gifted Chat Library
- Install Node JS on your device
- In the terminal: Install Expo globally:
npm install -g expo-cli
- Sign up for an Expo Account to be able to run the app on your device
- Clone this repository
- Navigate to the folder and run
npm install
- Use your own Firebase configuration code:
- Sign in at Google Firebase
- Create a Project (uncheck Enable Google Analytics for this project)
- Create Database in Firestore Database (choose a close region from the dropdown, and Start in production mode)
- Change
allow read, write: if false;
toallow read, write, if true;
in Rules tab - Register app(
</>
) in Project Overview - Now, follow the provided directions of adding Firebase SDK:
- Install firebase:
npm install firebase
- Initialize firebase: Copy and paste the provided Firebase configuration and change them in the App.js of the downloaded repository
- Install firebase:
- Download Android Studio(Win) or iOS Simulator/XCode(Mac)
- Run
expo start
in the terminal. Follow the instruction to access the app via the iOS Simulator/Android Emulator