# 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:

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

## 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](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 getNotificationInbox**

   In your Notification Inbox screen, include these imports:

   ```bash
   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:

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

   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 Notification Inbox screen, create a useState to store your Notification Inbox data like this:

   ```bash
   const [data, setData] = useState([]);
   ```

4. **Create a useEffect**

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

   ```bash
   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](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

```bash
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:

```js
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:

```js
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](/docs/mass-notification-inbox/components#per-notification-read-state).