Custom hook to store user online presence using firebase in React Native
Tags: reactnative, firebase, react, javascript
Published: 2021-05-26 17:51:47

Here I will show how to create a custom react hook which can be used in your react native application to store the logged in user's online presence.

I am using the following packages in my project to implement our requirement:
* [react-native-firebase](https://rnfirebase.io/)
* [react-native-netinfo](https://github.com/react-native-netinfo/react-native-netinfo)

I believe that you have already set up above packages in your project, if not you can refer the above links.

##Identifying if the user is online##
Firstly, we can create a new file for our hook. I am naming it as `useOnlinePresence.js` and adding the first few lines of code. Also we can import the required packages to the file.

```
import NetInfo from "@react-native-community/netinfo";
import database from '@react-native-firebase/database';
import auth from '@react-native-firebase/auth';

export default useOnlinePresence = () => {

}

```


Now we can add react's useEffect hook and we can add an event listener inside it, which watches the network state using the package NetInfo.

```
export default useOnlinePresence = () => {
    useEffect(() => {
        const unsubscribe = NetInfo.addEventListener(state => {
            if (state.isConnected) {
                console.log("user online")
            }
        });
        
        return unsubscribe;
    }, []);
}

```


So now we can identify when the user gets online and we can save it to firebase realtime database. 

##Saving online presence to database##
We can create a new function `saveOnlineStatus`, here we can get the authenticated user's uid by calling the firebase auth method `auth().currentUser.uid`. Then create a new realtime db reference using the uid and set the value as `true`.

```
export default useOnlinePresence = () => {
    const saveOnlineStatus = () => {
        const userId = auth().currentUser.uid;
    
        const reference = database().ref(`/online/${userId}`);
    
        reference.set(true)
        .then(() => {
             console.log('Online status set as true')
        });
    }

    useEffect(() => {
        const unsubscribe = NetInfo.addEventListener(state => {
            if (state.isConnected) {
                saveOnlineStatus();
            }
        });
        
        return unsubscribe;
    }, []);
}

```

##Deleting online presence from DB##
Now we need to delete the saved data once the user goes offline, you can use the below lines of code to achieve that.
```
reference
.onDisconnect()
.remove()
.then(() => console.log('On disconnect configured'));
```

The firebase server runs the remove method once the user goes offline or the user suddenly quits the application.

##Conclusion##
So we are done with the custom hook implementation and the `useOnlinePresence.js` file is given below. You can call the hook `useOnlinePresence` from the layout component which gets rendered after successful login.

```
import { useEffect } from "react";
import NetInfo from "@react-native-community/netinfo";
import database from '@react-native-firebase/database';
import auth from '@react-native-firebase/auth'; 

export default useOnlinePresence = () => {
    const saveOnlineStatus = () => {
        const userId = auth().currentUser.uid;
    
        const reference = database().ref(`/online/${userId}`);
    
        reference.set(true)
        .then(() => {
             console.log('Online status set as true')
        });

        reference
        .onDisconnect()
        .remove()
        .then(() => console.log('On disconnect configured'));
    }

    useEffect(() => {
        const unsubscribe = NetInfo.addEventListener(state => {
            if (state.isConnected) {
                saveOnlineStatus();
            }
        });
        
        return unsubscribe;
    }, []);
}

```

You can see the data saved in realtime database of your firebase project - `https://console.firebase.google.com/project/<your-project-id>/database`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmswas532pnos540gc0p.PNG)


---
>Cover Photo by <a href="https://unsplash.com/@robin_rednine?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">ROBIN WORRALL</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>