This project is designed to provides users with a chat interface including the ability to share images, location and view previous messages when offline. It is designed specifically for mobile devices using:
- React Native with GiftedChat
- React Native
- React Native Gifted Chat
- React Native Maps
- Expo.io
- Google Firestore Database for storage
- Google Firebase authentication
- React Native AsyncStorage for app local storage
To run the app you will need to install expo using the following comand:
You will need to install the following dependancies.
react-native-community/async-storage react-native-community/masked-view react-native-community/netinfo react-navigation/native react-navigation/stack expo expo-image-picker expo-location expo-permissions expo-status-bar firebase navigation prop-types 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
You can do so by opening the project root folder and running the command:
To start the app you can do so by running:
In order to interact with the app on a mobile device you can either download an emulator such as Android Studio and follow the instructions to install or use the app EXPO GO directly on your own mobile.
You will also need to create a firebase account to store any message data. To do so you can follow the below steps:
- Navigate to the Firebase website
- Sign in using a google account
- Select 'Go to console' and 'add project'
- Once your project is created, select 'Create database' in the Cloud Firestore Section.
- Select 'start in test mode'
- Select 'start collection'
- Name your collection 'messages' and select 'auto id'
- Enable 'Anonymous Authentication' in the 'Authentication -> set up sign-in method' settings
- You will need to navigate to 'Project Settings -> General -> Your Apps' to generate the firebase config
- Copy the code generated in to the Chat.js file firebase configuration to connect the app to the database.
Take a look at the project Kanban board and tasks by following the link below:
Kanban board
