Create Mass Notification Inbox

This guide covers how to use the getNotificationInbox function to get mass push notification data to be used to create your Mass Notification Inbox.

This video walks through the setup guide below:

Mass Notification Inbox Preview

Here's how the Mass Notification Inbox creation process works:

  • Get Mass Notifications Sent: Use the native-notify 'getNotificationInbox' function to get a history of all the mass push notifications you have sent in the past.
  • Use: Use the Mass Notification Inbox data from the 'getNotificationInbox' function to create an In-App 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.

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.

Setup and Use

1

Import getNotificationInbox

In your Notification Inbox screen, include these imports:

import React, { useState, useEffect } from 'react';
import { getNotificationInbox } from 'native-notify';
2

Check for Hook function

Make sure you are using a Hook function as your Notification Inbox function. Here is an example:

export default function NotificationInbox() {
    ...
}

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

3

Create a data Hook

Inside of your Notification Inbox screen, create a useState to store your Notification Inbox data like this:

const [data, setData] = useState([]);
4

Create a useEffect

Paste this 'useEffect' function into your Notification Inbox function:

useEffect(() => {
    const fetchNotifications = async () => {
        try {
            const notifications = await getNotificationInbox(
                "app-id-number",
                "app-token-string",
                take-number,
                skip-number
            );
            console.log("notifications: ", notifications);
            setData(notifications);
        } catch (error) {
            console.error("Error fetching notifications: ", error);
        }
    };

    fetchNotifications();
}, []);

Notes:

  • This link explains how 'useEffect' works in detail: https://react.dev/reference/react/useEffect
  • If you omit the take count, native-notify v5+ asks for 20 rows (v4, and a raw REST call without take, get the server's default of 10).
  • Skip count defaults to 0.
  • Each row's pushData is the JSON string you sent — JSON.parse(row.pushData) to read it.
  • Fetching marks every notification in the app's inbox as read for this device (on a device that can mint an Expo push token).
5

Create your Mass Notification Inbox

Create your Mass Notification Inbox using the data received by running your getNotificationInbox function.

Complete example

import React, { useState, useEffect } from 'react';
import { getNotificationInbox } from 'native-notify';

export default function NotificationInbox() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchNotifications = async () => {
            try {
                const notifications = await getNotificationInbox(
                    "app-id-number",
                    "app-token-string",
                    take-number,
                    skip-number
                );
                console.log("notifications: ", notifications);
                setData(notifications);
            } catch (error) {
                console.error("Error fetching notifications: ", error);
            }
        };

        fetchNotifications();
    }, []);

    return (
      ... // create a Mass Notification Inbox using getNotificationInbox data
    )
}

Exact pagination: getNotificationInboxPage

getNotificationInboxPage(appId, appToken, take, skip) returns one page of rows plus the server's total row count, read from the X-Total-Count response header — so "load more" can be exact instead of a guess:

import { getNotificationInboxPage } from 'native-notify';

const { rows, total } = await getNotificationInboxPage(
  "app-id-number",
  "app-token-string",
  20, // take
  0   // skip
);

console.log(rows.length, "of", total); // total is null when the server doesn't send the header

Note:

As with getNotificationInbox(), fetching a page marks every notification in the inbox as read for this device — pass { perNotification: true } (below, v5.2+) if you would rather keep each row's own read state. getNotificationInbox(...) returns the same rows without the total — it is the rows array alone.

Per-notification read state

Requires native-notify v5.2+. The page function takes an optional fifth argument: { perNotification: true }. With it, the request asks for each row's real read flag for this device and skips the legacy mark-all-read — then you mark each row read yourself when the user opens it:

import { getNotificationInboxPage, markMassNotificationRead } from 'native-notify';

const { rows, total } = await getNotificationInboxPage(
  "app-id-number",
  "app-token-string",
  20, // take
  0,  // skip
  { perNotification: true }
);

rows[0].read; // false until this device has read it

// Mark ONE row read when it is opened (best-effort — resolves false, never throws).
// Pass the ids unless you set them once with NativeNotify.init():
await markMassNotificationRead(rows[0].notification_id, "app-id-number", "app-token-string");

Heads-up:

Mass read state is tracked per device using the device's Expo push token — where none can be minted (web, Expo Go on Android, a simulator or emulator without push support) there is no per-device state: every row reports read: false and cannot be marked. Without the option the request is byte-identical to previous SDK versions.

markMassNotificationRead(notificationId, appId?, appToken?) resolves true when the server accepted the mark, and false — never throwing — when there is no device token or the call fails. Without a notificationId it resolves false and sends nothing (the endpoint's id-less form marks the whole inbox read).

The useNotificationInbox() hook and the prebuilt components expose the same feature as the perNotificationRead prop.