GitHub - fireship-io/firechat-react-native: Firebase chat app built with React Native
React Native is one of the most productive ways to build a cross-platform mobile app, especially for developers with a background in JavaScript. It has provides excellent support for Firebase with the React Native Firebase package
In the following lesson, we will build a basic chat app with React Native and Firebase. It allows a user to sign in with Google and then access a group chat room. The user can read a realtime feed of recent chat messages via Firestore and post new messages into the chat. The goal is to demonstrate essential patterns when working connecting Firebase users to their data in a React Native app.
Create an app with the React Native CLI
Follow the official Firebase setup instructions. This tutorial targets Android as the primary platform.
Make sure to enable Google Authentication on the Firebase console and follow the instructions to obtain an SHA1 key.
Add the following packages as dependencies:
package.json
{
"dependencies": {
"@react-native-firebase/app": "^12.8.0",
"@react-native-firebase/auth": "^12.8.0",
"@react-native-firebase/firestore": "^12.8.0",
"@react-native-google-signin/google-signin": "^7.0.0-alpha.3",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-vector-icons": "^8.1.0"
}
}
Firestore consists of a single collection chats where each document contains the following data: