# 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](https://dashboard.nativenotify.com/sign-up-one) 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](/docs/indie-notification-inbox/getIndieNotificationInbox) page.

## Setup and Use

1. **Import deleteIndieNotificationInbox**

   In your Indie Notification Inbox screen, include these imports:

   ```bash
   import React, { useState, useEffect } from 'react';
   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:

   ```bash
   const handleDeleteNotification = async (notificationId) => {
     try {
       await deleteIndieNotificationInbox(
         "unique-user-id",
         notificationId,
         app-id-number,
         "app-token-string"
       );
       fetchNotifications(); // reload the list in the same shape as getIndieNotificationInbox
     } catch (error) {
       console.error("Error deleting notification: ", error);
     }
   }
   ```

   The "unique-user-id" is the unique user ID you registered with Native Notify during the [Indie Push Notification registration process](/docs/indie-push-notifications/registration).

   > **Note:**
   >
   > - The deleteIndieNotificationInbox function resolves with the subscriber's 10 most recent remaining rows **as raw database rows** (`date_sent`, `push_data`, `notification_read`, … — not the `date` / `pushData` / `read` shape the list returns), so reload the list with getIndieNotificationInbox instead of rendering that result.
   > - On an account whose free trial has ended, or on the Premium plan (the inbox is a Pro plan feature), the server answers `201` with an explanation text and nothing is deleted.
   > - A failed request (a wrong app token, a network error) rejects — keep the `try` / `catch`.
   > - The getIndieNotificationInbox guide can be found here: [getIndieNotificationInbox Guide](/docs/indie-notification-inbox/getIndieNotificationInbox)

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:

   ```bash
   handleDeleteNotification(notification.notification_id)
   ```

## Complete example

```bash
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) => {
      try {
        await deleteIndieNotificationInbox(
          "unique-user-id",
          notificationId,
          app-id-number,
          "app-token-string"
        );
        fetchNotifications(); // reload the list in the same shape as getIndieNotificationInbox
      } catch (error) {
        console.error("Error deleting notification: ", error);
      }
    }

    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)
    )
}
```