Prebuilt mass inbox component

Quick start

Add <NotificationInboxBell> to your header. mode="mass" is the default:

import { NotificationInboxBell } from 'native-notify';

// Expo Router / React Navigation header:
<Stack.Screen
  name="index"
  options={{
    headerRight: () => (
      <NotificationInboxBell
        appId={yourAppId}
        appToken="yourAppToken"
        mode="mass" // default — can be omitted
      />
    ),
  }}
/>

Tapping the bell opens the built-in inbox screen with your mass notifications, the data getNotificationInbox returns, and shows an unread dot for new ones. appId and appToken are optional when you set them once with NativeNotify.init() or <NativeNotifyProvider>.

Mass mode behavior

• Opening the inbox marks every notification as read for this device, not only the fetched page, so the dot clears. perNotificationRead turns this off.
• The app icon badge follows the unread count through Notifications.setBadgeCountAsync(). Pass syncBadge={false} to opt out.

Per-notification read state

Requires native-notify v5.2+. Pass perNotificationRead to keep a read state per row instead of marking the whole inbox read on open:

<NotificationInboxBell
  appId={yourAppId}
  appToken="yourAppToken"
  perNotificationRead
/>

Rows carry their real read flag for this device. Unread rows show a dot, and tapping a row marks it read and refreshes the unread count, which comes from the server instead of being zeroed on open. With no Expo push token (see the note above), every row reports unread and can't be marked. It's off by default, so existing apps make the same requests as before.

Props

NotificationInboxBell accepts:

Colors

Colors follow the device's light or dark mode. Pass any subset of these keys in colors: icon, dot, badgeText, background, headerBackground, card, border, title, text, mutedText, emptyTitle, emptyText, accent, delete.

<NotificationInboxBell
  appId={yourAppId}
  appToken="yourAppToken"
  colors={{ dot: '#EF4444', accent: '#2563EB' }}
/>

Custom screen and headless hook

For your own trigger, render <NotificationInboxScreen> and control the modal with visible and onClose. It takes the props above except the bell-only ones (onOpen, showCount, maxCount, renderIcon, iconSize, iconStyle, containerStyle), plus:

For a fully custom UI, use the headless hook:

import { useNotificationInbox } from 'native-notify';

const {
  notifications,   // fetched inbox rows
  unreadCount,     // unread count for your own badge
  loading,         // initial load in progress
  refreshing,      // pull-to-refresh in progress
  loadingMore,     // next page in progress
  hasMore,         // more pages available
  error,           // error message, if any
  openInbox,       // loads page 1 — and marks the whole inbox read, unless perNotificationRead
  refresh,
  refreshUnread,
  loadMore,
  deleteNotification,
  perNotificationRead, // true when you built the hook with the option
  markNotificationRead, // mark ONE row read when it is opened (per-notification mode)
} = useNotificationInbox({
  appId: yourAppId,
  appToken: 'yourAppToken',
  mode: 'mass',
  take: 20,
  syncBadge: true, // sync the unread count to the app icon badge
});

The hook fetches only the unread count on mount. Call openInbox() or refresh() to load the rows. markNotificationRead takes the row object, not an id. For exact pagination, use getNotificationInboxPage().

Inbox row data

{
  notification_id, // unique notification ID
  date,            // notification date
  title,           // notification title
  message,         // notification message
  pushData,        // the pushData you sent, as a JSON string — JSON.parse(row.pushData)
  read,            // this device's read state — authoritative with perNotificationRead
}