• Native mobile chat application developed with React Native, Expo and Google Firestore Database.

• Users enter name and select background color in Start Screen before joining the chat.
• Chat Screen displays the conversation, as well as an input field and submit button.
• Provides users with two additional message features: sending images (either from image library or device's camera) and location data displayed as a custom map view.
• Messages, including sent images and location data, are stored in Google Firebase Cloud Storage.
• Users must grant permission to the app prior to accessing image library, camera and location data.
• When offline, the app will display a user's existing messages, utilizing asyncStorage

React Native is a JavaScript framework used for building native applications for iOS and Android. You will need either an iOS/Android simulator/emulator to run the app on your computer. You will use Expo to develop and test this app, GiftedChatUI to create the chat interface, and Google Firebase to store sent/recieved messages.

• npm i
• npm start
• npm start --ios
• npm start --android

Sign-up for Expo: Expo sign-up page

Expo CLI

• npm install expo-cli --global
• npm start

Download Expo Client on your device

Expo SDK: ImagePicker API, Permissions API, Location API

• expo install expo-permissions
• expo install expo-image-picker
• expo install expo-location
• expo install react-native-maps

XCode - available to download from the App store

• npm run ios

Android Studio - available from The Official Android IDE: Android Studio

• npm run android

1. Install Firestore via npm:

• npm install --save firebase@7.9.0

const firebase = require('firebase');
require('firebase/firestore');

2. Integrate your Firebase configuration info into Chat.js file:

const firebaseConfig = {
    apiKey: "AIzaSyAqNQcJEL-24hdJWCJmzoUTLTu22sOZGE8",
    authDomain: "testapp-8104c.firebaseapp.com",
    projectId: "testapp-8104c",
    storageBucket: "testapp-8104c.appspot.com",
    messagingSenderId: "477028533982",
    appId: "1:477028533982:web:64f410e0d74c73e44a244f",
    measurementId: "G-BFW368CEB3"
  }

if (!firebase.apps.length){
  firebase.initializeApp(firebaseConfig);
  }

• npm install react-native-gifted-chat --save

Visit "https://github.com/FaridSafi/react-native-gifted-chat" for details on Gifted Chat features/utilization