/chat-app

customizable native mobile app for real-time message, photo, and location sharing using Firebase

Primary LanguageJavaScript

Chat App

Description

This is a native mobile app built using React Native that allows users to enter a chat room, then send messages, images, and their location.

Purpose of this App

Chat App was developed to practice native app development using React Native. It includes features like switching between views, storing data locally for use offline, asking permission for access to camera and location, and accessing camera, camera roll, and location services.

Setup Manual

  1. Clone the Github repo to your local machine.
    • If you are unsure what method to use, I suggest selecting "Download ZIP" from the "Code" dropdown menu.
    • Put this folder somewhere easy to find, like in your Documents folder, and unzip it.
  2. Navigate to the directory in the terminal.
    • If you saved it in your directory, this would look something like cd Documents/chat-app.
  3. Use command npm install to install all local dependencies.
    • Ensure npm is installed globally on your machine in order to run this command.
    • The app is now ready to test on your machine!
  4. Use command expo start to start the test environment.
  5. Test the app using whatever machine/method you like!
    • To test in Android Emulator, first install Android Studio, then then press a while expo is running.
    • (Macs only) To test in iOS Simulator, first ensure XCode is installed, and then press i while expo is running.
    • To test on any Android or iOS device, first install the Expo Go app, and then scan the QR code generated in your terminal when Expo is running (using the Expo Go app on Android or Camera on iOS). Both the local machine and the mobile device must be connected to the same network or plugged into each other in order to emulate the app on the mobile device.

Note: The app is connected to its own Firebase database run by the developer, but feel free to make your own database and connect it to your local version of the app to create a private chat!

Complete List of Dependencies

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Expo
  • Expo Font
  • Expo Image Picker
  • Expo Location
  • Expo Permissions
  • Expo Status Bar
  • Firebase
  • React
  • React DOM
  • React Native
  • React Native Gesture-Handler
  • React Native Gifted Chat
  • React Native Maps
  • React Native Reanimated
  • React Native Safe Area Context
  • React-Native Screens
  • React Native Web
  • React Navigation