Chat app with React Native (Part 5) - Create and Fetch Real-Time Messages with Firestore

In part 4, we built the foundation of creating a chat app by adding UI screens that are focused on sending, receiving and displaying chat messages. We used react-native-gifted-chat an amazing open source library and dived deep to use its "out of the box" props to add features to the chat app.

In part 5, we are going to connect every chat functionality that we built so far with a real-time database service from Firebase, called Firestore. You are going to learn

• store chat messages of each thread/chat room in Firestore collection
• how to create sub collections inside a Firestore collection
• add a feature to display most recent message for each chat room on home screen
• fetch data from a Firestore collection

And few other things along the way. Let's get started.

Remember, in part 2, when configuring Email authentication between the chat app and the Firebase service, you set the following AuthProvider that gives access to the current user as well other methods that are already being used in components LoginScreen and SignupScreen. Here is the ode for src/navigation/AuthProvider.js for your reference.

Copy
1import React, { createContext, useState } from 'react';
2import auth from '@react-native-firebase/auth';
3
4/**
5 * This provider is created
6 * to access user in whole app
7 */
8
9export const AuthContext = createContext({});
10
11export const AuthProvider = ({ children }) => {
12  const [user, setUser] = useState(null);
13
14  return (
15    <AuthContext.Provider
16      value={{
17        user,
18        setUser,
19        login: async (email, password) => {
20          try {
21            await auth().signInWithEmailAndPassword(email, password);
22          } catch (e) {
23            console.log(e);
24          }
25        },
26        register: async (email, password) => {
27          try {
28            await auth().createUserWithEmailAndPassword(email, password);
29          } catch (e) {
30            console.log(e);
31          }
32        },
33        logout: async () => {
34          try {
35            await auth().signOut();
36          } catch (e) {
37            console.error(e);
38          }
39        }
40      }}
41    >
42      {children}
43    </AuthContext.Provider>
44  );
45};

To fetch the logged in user information (aka the current user), start by importing AuthContext in the file RoomScreen.js.

Copy
1// ... rest of the import statements
2import React, { useContext, useEffect } from 'react';
3import { AuthContext } from '../navigation/AuthProvider';

Next, to verify that the you are getting the current user information, inside the RoomScreen component, add the following two lines.

Copy
1export default function RoomScreen({ route }) {
2  const { user } = useContext(AuthContext);
3  const currentUser = user.toJSON();
4
5  // ...
6}

You have to convert the user data being fetched in JSON object. To check that the user data is incoming, let us temporarily add a useEffect hook after the previous code snippet, as shown below.

Copy
1useEffect(() => {
2  console.log({ user });
3}, []);

There are two ways to check the output of console statements in a React Native app. First, a console statement triggers, in the terminal window, the will be a LOG entry like below with desired result.

However, for better complete control over debugging, you can use Chrome dev tools. This can be done by opening the in-app developer menu, either by shaking the device or if you are using an iOS simulator press command + d. On Android, you have to press command + m on mac (for windows, press control + m).

A developer menu like below will popup.

Select the option Debug. In your default Chrome browser, it is going to open like below.

Go to Console tab. Enter a chat room from the app. If you do not have to created a chat room yet, create one. On the Console tab, you are going to get the following result.

That's it. Now, from the above image, you can definitely verify that a user is logged in and their email credentials can be verified.

In this section, you are going to add the business logic as well as the ability to store the chat conversation between multiple users in a chat room. These messages are going to be stored in a sub collection.

The main reason to create a sub collection is that when a new chat room is created, storing every data associated to that chat room in its own collection is a good idea. That said, when a new chat room is created, inside the collection THREADS a new document with a unique identifier is generated.

Inside that, you are going to add another collection called MESSAGES that is only going to store chat conversation that happens in that chat room. This will get clear as you proceed in this section.

Start by importing the some necessary React Hooks as shown below. Also, import firestore to make queries to create new sub-collection, and fetch data.

Copy
1import React, { useState, useContext, useEffect } from 'react';
2import firestore from '@react-native-firebase/firestore';

To get the id of the current chat room (this is important) you have to pass the route as a parameter to the RoomScreen functional component. Since, from the previous screen, a thread object is passed which gives the chat room id (or thread id) store in the Firebase collection THREADS. Using route.params you can get the whole thread object. This is possible because of react-navigation.

Copy
1export default function RoomScreen({ route }) {
2  // ... rest of the code
3  const { thread } = route.params;
4}

Next, modify the asynchronous helper method handleSend. This method is used to send a message as you might have already seen in part 4.

Inside this helper method, get the text of each message send by the user. Then, create the sub collection MESSAGES by referencing the correct id of the current thread the user is conversing in. Using add() you can add anew document with an auto-generated unique id for each message inside the sub collection.

Pass on an object with fields like text that represents the text of each message, the timestamp it is being send or created at, and the user information (such as user's uid, and email).

Copy
1async function handleSend(messages) {
2  const text = messages[0].text;
3
4  firestore()
5    .collection('THREADS')
6    .doc(thread._id)
7    .collection('MESSAGES')
8    .add({
9      text,
10      createdAt: new Date().getTime(),
11      user: {
12        _id: currentUser.uid,
13        email: currentUser.email
14      }
15    });
16}

Go back to the simulator, create a new room, and send a message.

In Firebase console, you are going to notice that the inside the THREADS collection, a sub-collection called MESSAGES is created as shown below.

Ignore the latestMessage field, we will cover that in the next section. The image below displays that the messages are being stored with correct information.

In this section, you are going to update the THREADS collection with a new field called latestMessage that you have already seen in the previous section, in Firebase console.

The advantage this field is going to give us (which we will complete later) is to show the last or the latest message send in a particular chat room, to be displayed on the home screen where a room's description field already exists. This will save the user time to glance at the last message without opening the room to see if there are any new messages or not.

To begin, all you have to do is refer the current thread using its id, then set an object that has field latestMessage with text and createdAt timestamp properties. Then pass on the second object that has a property of merge.

Copy
1async function handleSend(messages) {
2  // ...
3
4  await firestore()
5    .collection('THREADS')
6    .doc(thread._id)
7    .set(
8      {
9        latestMessage: {
10          text,
11          createdAt: new Date().getTime()
12        }
13      },
14      { merge: true }
15    );
16}

In Firestore, when set is used with merge, it update fields in a document or create that document if it does not exists. If you use set here without merge, it will overwrite the whole document.

To display messages in a chat room once they send by a user, these messages have to be fetched from the Firestore sub-collection created previous sections, MESSAGES.

To fetch the data, let us use useEffect hook. The effect hook lets you add side-effects to functional components. In the previous versions of React and React Native, this could be done by using lifecycle methods such as componentDidMount() and other different methods in class components. The useEffect hook can perform multiple side-effects such as data fetching and more in different ways.

To fetch the messages, first you have to traverse inside the current thread using its id, then the sub-collection MESSAGES. When traversing the sub-collection, make sure to order the messages to display them in descending order according to the time they were sent.

Then using a querySnapshot you can map the messages array from the sub collection. A Query Snapshot in Firestore contains zero objects or more objects inside an array representing the results of a query.

Create a data object that is going to contain the id of the document being fetched, the text of the message and its timestamp, and any other data associated with the message or in the document. The last step is required to identify that if the message is send by the user or is system generated.

In part 4 you have seen how a system generated message looks like. This means, if the message is generated when the chat room was created or not.

If the message is not system generated, that means it is send by the user. You will have to add the user's email (or any other details can be added such as user's display name)to the data object. Add the following snippet.

Copy
1async function handleSend(messages) {
2  // ...
3
4  useEffect(() => {
5    const messagesListener = firestore()
6      .collection('THREADS')
7      .doc(thread._id)
8      .collection('MESSAGES')
9      .orderBy('createdAt', 'desc')
10      .onSnapshot(querySnapshot => {
11        const messages = querySnapshot.docs.map(doc => {
12          const firebaseData = doc.data();
13
14          const data = {
15            _id: doc.id,
16            text: '',
17            createdAt: new Date().getTime(),
18            ...firebaseData
19          };
20
21          if (!firebaseData.system) {
22            data.user = {
23              ...firebaseData.user,
24              name: firebaseData.user.email
25            };
26          }
27
28          return data;
29        });
30
31        setMessages(messages);
32      });
33
34    return () => messagesListener();
35  }, []);
36}

The messages in chat room are going to be displayed as the following.

In order to make all this work, make sure to modify the following two props in return statement.

Copy
1<GiftedChat
2      messages={messages}
3      // Modify the following
4      onSend={handleSend}
5      user={{ _id: currentUser.uid }}
6      // ...rest remains same
7    />
8  );

Right now the THREADS collection for each chat room can display the latest message sent by the user but when a thread is created, you might want to display a system, generated message to convey the same message to the user entering the chat room. To do this, open AddRoomScreen.js file and modify its its helper method handleButtonPress to add the following snippet.

First you are going to add the latestMessage object with its text field saying that a room is created. Do not forget to add a timestamp field along with the text field.

Second step is to add a docRef or a document reference to the sub-collection MESSAGES. Note that, at this point, when the user creates a new room, this sub-collection will be created for each chat room.

A document reference in Firestore is used to write, read or listen to a particular location or a sub-collection inside a Firestore collection.

The document or in the current case, the collection MESSAGES might not exist but adding this step will create the collection. This first message in a chat room is also going to be the system generated message.

Copy
1function handleButtonPress() {
2  if (roomName.length > 0) {
3    firestore()
4      .collection('THREADS')
5      .add({
6        name: roomName,
7        latestMessage: {
8          text: `You have joined the room ${roomName}.`,
9          createdAt: new Date().getTime()
10        }
11      })
12      .then(docRef => {
13        docRef.collection('MESSAGES').add({
14          text: `You have joined the room ${roomName}.`,
15          createdAt: new Date().getTime(),
16          system: true
17        });
18        navigation.navigate('Home');
19      });
20  }
21}

Now, when you create a new room through the app, here is the complete overview of how it gets reflected in Firestore.

And here is the system message displayed in the new chat room.

Right now the system message generated is not as appealing and conveying inside a chat room. In this short section, let us learn how to customize that in react-native-gifted-chat.

Start by importing SystemMessage component from react-native-gifted-chat inside RoomScreen.js file.

Copy
1import {
2  GiftedChat,
3  Bubble,
4  Send,
5  // Add this
6  SystemMessage
7} from 'react-native-gifted-chat';

Create a new helper method called renderSystemMessage inside the screen component with the following snippet. In the current scenario, you are going to change the background of the system message display as well as the text styles. For that you need to edit the props wrapperStyle and textStyle of SystemMessage component.

Do modify the StyleSheet object to add styles as shown below.

Copy
1function renderSystemMessage(props) {
2  return (
3    <SystemMessage
4      {...props}
5      wrapperStyle={styles.systemMessageWrapper}
6      textStyle={styles.systemMessageText}
7    />
8  );
9}
10
11// appropriate styles
12
13const styles = StyleSheet.create({
14  // ... rest of the styles remain unchanged
15  systemMessageText: {
16    fontSize: 14,
17    color: '#fff',
18    fontWeight: 'bold'
19  }
20});

Lastly, add the prop renderSystemMessage to GiftedChat component.

Copy
1return (
2  <GiftedChat
3    // rest of the props remain same
4    renderSystemMessage={renderSystemMessage}
5  />
6);

Here is the output you are going to get after this step.

For every chat room on home screen there is description field that says a static message Item description. In this section let us change that to dynamically display the real-time latest message fetched from the Firestore collection.

Open HomeScreen.js and orderBy() when fetching name of chat rooms in the Effect hook. Then, when returning the documentSnapShot data, there is an object that contain fields like _id and name. Add another object as a field called latestMessage as shown below.

Copy
1useEffect(() => {
2  const unsubscribe = firestore()
3    .collection('THREADS')
4    // add this
5    .orderBy('latestMessage.createdAt', 'desc')
6    .onSnapshot(querySnapshot => {
7      const threads = querySnapshot.docs.map(documentSnapshot => {
8        return {
9          _id: documentSnapshot.id,
10          name: '',
11          // add this
12          latestMessage: {
13            text: ''
14          },
15          // ---
16          ...documentSnapshot.data()
17        };
18      });
19
20      setThreads(threads);
21
22      if (loading) {
23        setLoading(false);
24      }
25    });
26
27  return () => unsubscribe();
28}, []);

Next, go to the List.Item inside the FlatList component and modify the description field as shown below.

Copy
1description={item.latestMessage.text}

Go back to the simulator and you are going to see the latest message displayed.

Try sending a new message and that is going to be the latest message displayed on the home screen for the chat room.

There is a benefit of ordering the chat rooms according to the latest message for each room. Now the home screen is going to display that chat room on top which received it the most recent message according the timestamp (createdAt)that is associated with the message.

In the next part of the series we are going to fix a small bug related of status bar styles for every screen component in the current app. This is going to be done by creating a custom hook and using react-navigation.

😺 You can find the complete code here at this GitHub repo.

• React Native’s New Architecture — Glossary of terms by Gabe Greenberg
• The Effect hook in React
• Debugging React Native apps

Originally Published at Heartbeat.Fritz.ai