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:

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 account to get your Native Notify App ID and App Token.

Setup and Use

1
2

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-native'; import {getUnreadNotificationInboxCount} from 'native-notify';

3

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:

export default function Footer() {
    ...
}

This link explains Hooks in detail: https://react.dev/reference/react/hooks

4

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:

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

Create a useEffect

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

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

6
7

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

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.