# Get Unread Notifications Count

This guide covers how to use the 'getUnreadNotificationInboxCount' function to get the total number of unread notifications a user has in their Mass Notification Inbox.

This video walks through the setup guide below:

[YouTube video player](https://www.youtube.com/embed/Ed6EBYEK4OY?rel=0)

## Unread Count Preview

Here's how getting and using the unread count works:

- **Get Number of Unread Mass Notifications Sent:** Use the native-notify **getUnreadNotificationInboxCount** function to get the total number of Mass Push Notifications sent that have not yet been read by the individual user.
- **Use**: Use the unread notification count information to know when to add a red dot over your Mass Notification Inbox icon to indicate the user has unread push notifications in their Mass Notification Inbox.

## Prerequisites

1. **Create a free Native Notify account**

   Create a free [NativeNotify.com](https://dashboard.nativenotify.com/sign-up-one)
   account to get your Native Notify App ID and App Token.

> **A Pro plan feature:**
>
> The notification inbox is included in the **Free**, **Pro** and **Team** plans. On **Premium**, every inbox endpoint answers `201` with an explanation instead of notifications (*"Your current Native Notify membership cannot access notification inbox features…"*), so the SDK shows an empty inbox and an unread count of 0. Notifications you send keep being recorded, so they appear once the account upgrades. See [what each plan includes](/docs/billing#what-each-plan-includes).

## Setup and Use

1. **Import getUnreadNotificationInboxCount**

   In your Footer or Header component (wherever your Unread Notifications Icon is
   located), include these imports:

   ```bash
   import React, { useState, useEffect } from 'react';
   import {getUnreadNotificationInboxCount} from 'native-notify';
   ```

2. **Check for Hook function**

   Make sure you are using a Hook function as your Footer or Header component (wherever your Unread Notifications Icon is located). Here is an example:

   ```bash
   export default function Footer() {
       ...
   }
   ```

   This link explains Hooks in detail: [https://react.dev/reference/react/hooks](https://react.dev/reference/react/hooks)

3. **Create a data Hook**

   Inside of your Footer or Header component (wherever your Unread Notifications Icon is located), create a useState to store your Unread Notifications Count like this:

   ```bash
   const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
   ```

4. **Create a useEffect**

   Paste this 'useEffect' function into your Footer or Header component (wherever your Unread Notifications Icon is located):

   ```bash
   useEffect(() => {
       const fetchUnreadCount = async () => {
           try {
               const unreadCount = await getUnreadNotificationInboxCount(
                   app-id-number,
                   "app-token-string"
               );
               console.log("unreadCount: ", unreadCount);
               setUnreadNotificationCount(unreadCount);
           } catch (error) {
               console.error("Error fetching unread notification count: ", error);
           }
       };

       fetchUnreadCount();
   }, []);
   ```

   This link explains how 'useEffect' works in detail: [https://react.dev/reference/react/useEffect](https://react.dev/reference/react/useEffect)

5. **Create Unread Notifications Bubble**

   Use this unreadNotificationCount to create an unread notification bubble over
   your Unread Notifications Icon whenever the number of unreadNotificationCount
   is above zero (0).

## Complete example

```bash
import React, { useState, useEffect } from 'react';
import { getUnreadNotificationInboxCount } from 'native-notify';

export default function Header() {
    const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);

    useEffect(() => {
        const fetchUnreadCount = async () => {
            try {
                const unreadCount = await getUnreadNotificationInboxCount(
                    app-id-number, // Replace with your actual app ID variable
                    "app-token-string"
                );
                console.log("unreadCount: ", unreadCount);
                setUnreadNotificationCount(unreadCount);
            } catch (error) {
                console.error("Error fetching unread notification count: ", error);
            }
        };

        fetchUnreadCount();
    }, []);

    return (
      ...
    )
}
```

## Important note

> **Warning:**
>
> **Important notes about Unread Notification Count:**
>
> - The Unread Notification Count is only accurate as long as the user does not update or reinstall your app.
> - Every time the user updates to a newer version of your app or reinstalls your app, the Unread Notification Count resets to the total number of notifications in the Mass Notification Inbox.
> - The reason for this is that we track unread notifications based on the tokens created on the backend each time a user installs your app. Each time a user updates or reinstalls your app, a new unique token is created that we use to base the number of unread notifications on.
>
> **An Unread Notification Count Hack to (sort of) fix the inaccuracy issue:**
>
> - Don't show the number of unread notifications. Just put an empty unread notification bubble over the notification icon whenever the unreadNotificationCount is above 0 and DON'T show it whenever the count is 0. This may be the best option from a UX standpoint.
> - Another idea is to only show the number of unread notifications in a notification count bubble over your icon if the number of unread notifications is under a certain amount, like 5 or 10. If the number of unread notifications is over your set amount, you could just show an empty unread notification bubble over your notification icon.
>
> **How to fix the Unread Notification Count inaccuracy issue:**
>
> - The only way to always have a completely accurate unread notifications count is to set up an Indie Notification Inbox. Click on the 'Indie Notification Inbox Setup' menu item to learn how to setup an Indie Notification Inbox.
> - Indie Notification Inboxes base the number of unread notifications off each individual user's Indie Push ID. If your user is logged in, you can use the Indie Push ID to always have an accurate unread notifications count accross all devices no matter how often your user updates or installs their app.