Chat App with React Native and Firebase

This is a mobile chat application developed using React Native and Expo, featuring real-time chat functionality, image sharing, location sharing, and offline data storage. Users can personalize their chat experience by choosing background colors.

Technologies used

• Javascript
• React Native
• Expo
• Android Studio(Emulator)
• Gifted Chat
• Real-Time App
• Data Storage
• Firebase
• Firestore Authentication
• Client-Side storage

Key Features

• User Customization: Users can set their display name and choose a background color for the chat screen before joining the chat.

• Real-time Chat: Display and participate in real-time chat conversations.

• Media Sharing: Send images from the device's image library or take pictures with the device's camera and send them within the chat.

• Location Sharing: Share location data via the chat, which is displayed on a map view.

• Online and Offline Data Storage: Chat conversations are stored both online using Google Firestore Database and locally on the device.

Technical Requirements

• Framework: Developed using React Native and Expo.

• Data Storage:

  • Chat conversations stored in Google Firestore Database.
  • Local data storage for offline access.

• Authentication: Users are authenticated anonymously using Google Firebase authentication.

• Media Handling:

  • Users can select and send images from the device's image library.
  • Users can take pictures with the device's camera and send them, with images stored in Firebase Cloud Storage.

• Location Data: The app can access and send the user's location data within the chat.

• Chat Interface: Built using the Gifted Chat library for a rich and user-friendly chat experience.

• Code Comments: The codebase is well-documented with comments for easy understanding and maintenance.

To Set Up This Chat App Please Follow The Steps

1. Either download the code then open the folder in your IDE of choice or just clone this git repository "https://github.com/baninations/chat-app.git".
2. run "npm install" to install the necessary dependencies needed to run the app.
3. Once you've loaded the source code, it's time to install expo on your IDE "npm install -g expo-cli".
4. Download and Install Android Studio so you can use the Android emulator to test your app.
5. Download Expo go on your emulator, remember both the computer and the Emulator need to be connected to the
internet(You can also use a physical device, the physical device must also be connected to the same network).
6. Go to the terminal in your IDE and use this command "expo start" to start the app

Screenshots