A chat app for mobile devices using React Native. The app will provide users with a chat interface and options to share images and their location.
Mobile view of home page
- Javascript, JSX
- React Native
- React navigation
- Expo
- Expo CLI and Expo Go App
- Gifted Chat
- Google Firebase / Firestore
- Android Studio (for testing)
expo-CLIto work with Expo
expoto set up, develop and test the native appexpo-image-pickerto gain access to native image library/cameraexpo-locationto gain access to native geo locationfirebaseto enable real-time chat/saving of messages/images and anonymous sign-inreactreact-nativereact-native-gifted-chatas library for developing chat appsreact-native-safe-area-contextreact-native-screensreact-native-mapsto use MapView component for geo location display@react-native-async-storage/async-storageto store messages offline@react-native-community/netinfoto check on- or offline statusreact-navigationto navigate between screens@react-navigation/native@react-navigation/native-stack
- 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.
- Create an - or use your - Expo account and download Expo Go on your mobile device
- It's recommended to also set up a device emulator via Android Studio
- Before you clone the project, check your current Node version and if necessary downgrade to 16.19.0
- Then:
- clone the repo
cdinto project folder andnpm install
- Log into expo accouunt via the terminal (
expo login) - You can check the currently logged-in account via
expo whoami - Start the project via
npm startornpx expo start(starts Metro Bundler) - Open your mobile device and open the Expo Go App
- Open the project, which will start the build
- To stop expo, use
control c