React Native App: Chat App

Description

This app provides a chat room and was developed for mobiles devices with React Native and the GiftedChat library. Apart from texts, one can also send images from the device's library or taken by the camera and one's location.

Tech used

• React Native
• Expo (Expo Go)
• Android Studio
• GiftedChat
• Google Firestore DB

User Stories

• As a new user, I want to be able to easily enter a chat room, so I can quickly start talking to my friends and family.
• As a user, I want to be able to send messages to my friends and family members to exchange the latest news.
• As a user, I want to send images to my friends to show them what I’m currently doing.
• As a user, I want to share my location with my friends to show them where I am.
• As a user, I want to be able to read my messages offline, so I can reread conversations at any time.
• As a user with a visual impairment, I want to use a chat app that is compatible with a screen reader so that I can engage with a chat interface.

Key Features

• A page where users can enter their name and choose a background color for the chat screen before joining the chat.
• A page displaying the conversation, as well as an input field and submit button.
• The chat must provide users with two additional communication features: sending images and location data.
• Data gets stored online and offline

How to run the project

Pre-requisites to clone the project

Install Expo:

npm install expo-cli -g

For Windows and Linux: Install Android Studio. For more information how to set up an emulator, look here

For Mac: Install XCode

Install the Expo app on your mobile device (available in Google Play Store and Apple Store)

Getting started

• install all the dependencies: npm i

• start the app: expo start or npm start

• Launch app on smartphone: scan QR code in Expo GUI

• Launch app on emulator: Press "Run on Android device/emulator" or "Run on iOS emulator" or "run in web browser" in Expo GUI

• install and connect to own Firestore database