To build 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.
The users of the mobile chat app. These could be friends, family or other students on this course. Your codebase will be used by other developers working on the product.
A native chat app built with React Native, as well as all the relevant documentation.
Whenever users of your chat app want to communicate with each other.
The app will be optimized for both Android and iOS devices. You will use Expo to develop the app and Google Firestore to store the chat messages.
Mobile chat apps are among the most commonly downloaded and used apps in the world, so knowing how to build a chat app is an indispensable skill. The app will demonstrate your React Native development skills.
- 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.
- 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
To run this Chat App, you need react-native, Expo Go and a mobile emulator.
- React
- React-Native
- GiftedChat
- Firebase / Firestore
- Linear-Gradient
- Expo / Expo Go
- NetInfo
- Clone or download the repository to your local machine.
- Install all dependencies
- Run npm start or expo start
- Find it on expo go.
- After opening up the app, you will be greeted with the Start screen.
- Choose a name that fits you best.
- Choose the chatroom that interests you the most.
- Click submit name and start chatting.
- Send messages, make friends and share pictures!
- "@expo/metro-runtime": "~3.1.3"
- "@react-native-async-storage/async-storage": "1.21.0"
- "@react-native-community/netinfo": "11.1.0"
- "@react-navigation/native": "^6.1.9"
- "@react-navigation/native-stack": "^6.9.17"
- "expo": "~50.0.6"
- "expo-status-bar": "~1.11.1"
- "firebase": "^10.3.1"
- "react": "18.2.0"
- "react-dom": "18.2.0"
- "react-native": "0.73.4"
- "react-native-gifted-chat": "^2.4.0"
- "react-native-safe-area-context": "4.8.2"
- "react-native-screens": "~3.29.0"
- "react-native-web": "~0.19.6"
- "expo-location": "~16.5.3"
- "expo-image-picker": "~14.7.1"
- "react-native-maps": "1.10.0"