Chirp is a chat application built using React Native, Expo, and Google Firestore Database. The app allows users to enter their name, choose a background color for the chat screen, engage in text conversations, send images, and share location data. The chat data is stored both online and offline using Google Firestore Database.
- Key Features
- Screenshots
- Setting up the Development Environment
- Database Configuration
- Necessary Libraries to Install
- Running the App
- User Authentication: Users can enter their name and choose a background color before joining the chat.
- Conversations Page: Display conversations with an input field and submit button for sending messages.
- Image Sending: Users can send images as part of their messages.
- Location Sharing: Users can share their current location as part of their messages.
- Online and Offline Storage: Chat data is stored in Google Firestore Database for online access and is cached for offline use.
To set up the development environment for Chirp, follow these steps:
-
Expo Setup:
- Create an Expo account.
- Install Expo CLI globally using npm:
npm install -g expo-cli
-
Android Studio Setup (Optional):
- If you plan to run the app on an Android emulator, set up Android Studio. Follow the official Expo guide for Android development environment setup: Expo Android Development Environment
Chirp uses Firebase as the backend database. To configure Firebase:
- Visit the Firebase Console and create a new project if you don't have one already.
- In the "Rules" tab, change "allow read, write: if false;" to "allow read, write: if true;"
- Set up Firebase Authentication (Anonymous Authentication is used in this app) and Firestore Database. Make sure to enable anonymous authentication in Firebase.
- Obtain the Firebase configuration object for your project. It should look something like this:
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
appId: 'YOUR_APP_ID',
measurementId: 'YOUR_MEASUREMENT_ID',
};
In the App.js file of your project, replace the firebaseConfig object with your own Firebase configuration.
Before running the app, make sure to install the required dependencies using npm or yarn: (Expo only supports Node up to version 16.19.0, please ensure you are using this version)
npm install
@react-native-async-storage/async-storage
@react-native-community/netinfo
@react-navigation/native
@react-navigation/native-stack
expo firebase
react-native
react-native-gifted-chat
react-native-safe-area-context
react-native-screens
expo-image-picker
expo-location
react-native-maps
This will install all the dependencies needed to run the app.
Now that you've set up the environment and Firebase, you can run the app:
expo start
This command will start the Expo development server, and you can run the app on an emulator or a physical device.
Use expo start -c to clear cache.
Use expo start --offline for offline testing.
Feel free to reach out if you have any questions, encounter issues, or have feedback. We're here to make your chat experience exceptional.