Delete Indie Notifications

This guide covers how to delete notifications inside of an Indie Notification Inbox.

Delete Indie Notification Preview

Here's how the Delete Indie Notification process works:

  • Get Notification ID: Each notification in your Indie Notification Inbox has a notification_id. You will need this notification_id to delete the notification.
  • Use: Use the notification_id and the deleteIndieNotificationInbox function to delete the notification.

Prerequisites

1

Create a free Native Notify account

Create a free NativeNotify.com account to get your Native Notify App ID and App Token.

2

Create an Indie Notification Inbox

Create an Indie Notification Inbox by following the instructions on the Create Indie Inbox page.

Setup and Use

1

Import deleteIndieNotificationInbox

In your Indie Notification Inbox screen, include these imports:

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

Create a delete function

Inside of your Notification Inbox screen, create a function with a notification_id parameter. Here is an example:

const handleDeleteNotification = async (notificationId) => {
  const updatedNotifications = await deleteIndieNotificationInbox(
    "unique-user-id",
    notificationId,
    app-id-number,
    "app-token-string"
  );
  console.log("updatedNotifications: ", updatedNotifications);

  setData(updatedNotifications);
}

The "unique-user-id" is the unique user ID you registered with Native Notify during the Indie Push Notification registration process.

Note:

  • The deleteIndieNotificationInbox function returns an updated list of notifications without the deleted notification.
  • The deleteIndieNotificationInbox will only return up to 10 results.
  • If you have a take and skip value being used in the getIndieNotificationInbox function, instead of using the deleteIndieNotificationInbox returned data to update the notification data, you could run getIndieNotificationInbox again to update notification data instead of setData(updatedNotifications).
  • The getIndieNotificationInbox guide can be found here: getIndieNotificationInbox Guide
3

Use the delete function

Attach the handleDeleteNotification function to mapped notifications inside of your Indie Notification Inbox so you have access to the notification IDs.

Example function use:

handleDeleteNotification(notification.notification_id)

Complete example

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

export default function NotificationInbox() {
    const [takeNumber, setTakeNumber] = useState(10);
    const [skipNumber, setSkipNumber] = useState(0);
    const [data, setData] = useState([]);

    const fetchNotifications = async () => {
        try {
            const notifications = await getIndieNotificationInbox(
                "unique-user-id",
                "app-id-number",
                "app-token-string",
                takeNumber,
                skipNumber
            );
            console.log("notifications: ", notifications);
            setData(notifications);
        } catch (error) {
            console.error("Error fetching notifications: ", error);
        }
    };

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

    const handleDeleteNotification = async (notificationId) => {
      const updatedNotifications = await deleteIndieNotificationInbox(
        "unique-user-id",
        notificationId,
        app-id-number,
        "app-token-string"
      );
      console.log("updatedNotifications: ", updatedNotifications);

      setData(updatedNotifications);

      // or, instead of setData(...), run: fetchNotifications();
    }

    return (
      ...
      // attach your handleDeleteNotification to mapped notifications
        // inside of your Indie Notification Inbox
        // so you have access to the notification.notification_id

      // example function use:
        // handleDeleteNotification(notification.notification_id)
    )
}