rajeski / mchatapp

Smartphone Application: Users can select their desired background color and chat; disclose their geo-location; select and share images; and, shoot and share photos with their friends and family

AppChat

Description / Overview

A React-Native (Mobile) project

To run it, first install expo via the Command Line via:

npm install expo-cli -g

Required Libraries

Dependencies, run:

npm install --save @react-native-community/netinfo @types/react-native-keyboard-spacer expo-image-picker expo-location expo-permissions firebase prop-types react react-dom react-native react-native-gesture-handler react-native-gifted-chat react-native-keyboard-spacer react-native-maps react-native-web react-navigation react-navigation-stack

In the project-folder, start the app:

npm start

This will launch your default browser via Expo. If you have already installed the mobile Expo Client App, you can run it on a Smartphone and/or an emulator by either scanning the QR code. Alternatively, if you have already created and signed into your Expo account, you can replicate an iOS Smartphone environment in a browser.

For Android-OS development, visit this page. Note, you can also "Run on Android device/emulator" via the Expo page which previously opened in your browser. However, for a more realistic Android-OS development environment, downloading and installing the Android Studio is required.

Firebase

For storage, set up Firebase account by following these steps:

1. Go here

2. Sign into your Google account
   

3. Click, "Go to console"
   

4. Click, "Add project"
   

5. Follow the onscreen instructions by "Creating your project"
   

6. Click, "Database" on the Develop tab
   

7. Click, "Create Database" and then, Select, "Start in test mode"
   

8. Click, "Start collection" and then, Name "Messages" (a possible default suggestion) and then, Select "Auto ID" and, confirm via the following screen
   

9. Click, Authentication" and, "Set up Sign-in Method" and, enable anonymous authentication
   

10. Click, "Storage" to set up Cloud Storage
    

11. Last, Click, Gear (above the Develop tab) and, Select "Project Settings". Click, (towards the) button of the page, Add Firebase to a web app, name and copy all of the text in the firebaseConfig and paste into the Chat.js file.
    

12. As a back-up, keep the firebaseConfig code in a safe place for reference.
    

13. The firebaseConfig code for this project cannot be duplicated or re-used for the database storage!

Note: Keep in mind, Firebase sets a one-month limitation on their trial-version before requiring the user's account-status to be changed!