How I implemented User Presence with Firebase in React Native

Building apps is a lot more fun and easy with Firebase. It offers almost all the things a developer will need to get their app in the hands of their users. There are downsides to it too though. For instance, the lack of full text search in their Firestore database. Likewise, there is no easy way to implement a user presence system with Firebase.

Photo by Daniel Korpai on Unsplash

What is user presence?

We have all seen the online, active and last seen statuses of our contacts in apps like WhatsApp, Messenger, Instagram, etc. Think of the little green dot that you often see displayed next to someone on your contacts list. That’s user presence at work: letting you know that your contact is also online on the app.

How did I go about implementing it?

There are three components to this: Realtime Database, Cloud Firestore and Cloud Functions from Firebase.

For Online Status

1. User logs in to the app and a document is written/updated in Realtime Database which in turns establishes a connection between the device and the Realtime Database.
2. Realtime Database adds our user’s ID to its list of the connected clients at the .info/connected node. This node is not visible in the console but know that it’s there and we can query it.

For Offline Status

1. When the app is closed, the connection that was established between the device and Realtime Database gets terminated.
2. A cloud function listening for changes on .info/connected node of Realtime Database gets triggered. This function sets the property isConnected to false of document “x” in Cloud Firestore.

This being implemented in a mobile app I had to take in account the various states of a mobile app:

1. Active State — The user is actively doing something on the app.
2. Inactive State — This is iOS only. Apps are put into this state when transitioning between foreground and background. Also during periods of inactivity such as entering the app switcher, opening the notification centre or in the event of an incoming call.
3. Background State — The user has switched to another app or is on the Home Screen.

Here’s the React Native Implementation:

Do note that we are only marking the user as connected when the app is in “Active” state. The reason to do so is because when the app goes into Inactive mode it is in more of a suspended state where the even listeners won’t get fired.

In our case, the onAppStateChange event listener doesn’t get fired and the user is kept marked as connected even after they move the app to the background state.

App State Flow on iOS

And here’s the Cloud Function Implementation:

That’s all there is to creating a user presence system in Firebase and React Native.

What did I learn?

Because at the end of the day, this is what matters.

• I improved my knowledge on Realtime Database, Cloud Firestore and the integration of Cloud Functions with these services.
• I also learnt about the states of a mobile app and how events and listeners behave in each one of them.