A Chat App for mobile devices (phones) using React Native.
The App will provide users with a chat interface that includes options to:
- give access/then access their media library (to access and share photos)
- give access/then access their device's camera (to take and share a photo)
- give access/then access their geo location data (to display and share it as a map)
This Chat App has been built as a task for Achievement 5 in Career Foundry's Full-Stack Web Development Program.
The Chat App
- must be written in React Native
- must be developed using Expo (Expo CLI and the Expo Go App) and Android Studio
- must use Gifted Chat to create the chat interface and functionality
- must be styled according to the given design
- must use Google Firebase as cloud storage solution
- Firestore Database to store chat conversations (plus geo location)
- Storage to store images sent in chat conversations
- Authentication of users (Anonymous) at first enter
- must use Expo AsyncStorage to store chat conversations locally
- must use Expo NetInfo to detect network connection
- must enable the user to read previous messages while being offline
- must disable the user to create new messages while being offline
- must use Expo ImagePicker to
- ask the user for permission to access device's image library
- have the user select an image off of device's image library
- ask the user for persmission to access device's camera
- have the user take a photo with device's camera
- must use Expo Location to
- ask the user for permission to share their geo location
- app must read user's geo location data
- must use MapView component to share geo location in chat conversations
- must display an action menu with four options ('Choose From Library', 'Take Picture', 'Send Location', 'Cancel'), using ActionSheet, (GiftedChat already uses this internally)
- codebase must contain comments
- two screens - start screen and chat screen
- start screen
- a user can enter their name and choose a background color for the chat screen
- chat screen
- display of chat conversation, an input field, a submit button
- picking an image off of device's image library
- taking photo with device's camera
- sending an image via chat conversation
- retaining and sending geo location data via chat conversation
- storing data on- and offline to enable users to read their messages while being offline
- disallow the creation of new messages when users are offline
- React Native
- JSX
- JavaScript
- React Navigation
- Expo
- Android Studio
- Gifted Chat
- Google Firebase
- Expo AsyncStorage
- Expo NetInfo
- Expo ImagePicker
- Expo Location
- MapView component
- ActionSheet
At time of writing to use Expo CLI you need to downgrade Node to 16.19.0
Eventhough Expo's site is a bit misleading regarding LTS if you try latest you will run into an error.
Also see here.
expo-CLI
- to create new projects and start running Expo
expo
- to set up, develop and test React Native Appsexpo-image-picker
- to request access to image library/camera, sent images via chatexpo-location
- to request access to geo locationfirebase
- to enable real-time chat/saving of messages/images, anonymous sign-inreact
react-native
- to build apps for Android and iOS quickly with one codebasereact-native-gifted-chat
- library specifically created for developing chat appsreact-native-safe-area-context
react-native-screens
react-native-maps
- to use MapView component for geo location display in chat conversation@react-native-async-storage/async-storage
- to store messages offline@react-native-community/netinfo
- to check if user is on- or offlinereact-navigation
- third party library to navigate between screens@react-navigation/native
@react-navigation/native-stack
babel
- as this has been built with Expo, you best have an Expo account and download Expo Go on your mobile device
- it's also beneficial to set up an emulated device via Android Studio
- before cloning check your current Node version and downgrade to
16.19.0
- after that
- clone the repo
cd
into projectnpm install
expo login
will log you in via terminalexpo whoami
will check the currently logged-in accountnpm start
orexpo start
will start the project (the Metro Bundler)- on MAC, you do NOT need the "full" XCode version to start the Android or iOS simulator and can hit
n
- then open your iPhone
- open the Expo Go App
- open the project, this will start the building of files
control c
to stop the project from runningexpo start --offline
to test the app offline