Get Unread Indie Notifications Count

This guide covers how to use the 'getUnreadIndieNotificationInboxCount' function to get the total number of unread notifications a user has in their Indie 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 Indie Notifications Sent: Use the native-notify getUnreadIndieNotificationInboxCount function to get the total number of Indie 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 Indie Notification Inbox icon to indicate the user has unread push notifications in their Indie 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 getUnreadIndieNotificationInboxCount

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 {getUnreadIndieNotificationInboxCount} 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

Get unread count

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

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

useEffect(() => {
  fetchUnreadCount();
}, []);

Notes:

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

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

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

    useEffect(() => {
      fetchUnreadCount();
    }, []);

    return (
      ...
    )
}