> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suprsend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native (Headless)

> Integrate SuprSend inbox in React Native using the headless library and hooks.

The Headless Inbox library provides hooks that can be integrated into React Native components for building inbox, and toast functionality in your applications.

## Installation

<CodeGroup>
  ```shell npm theme={"system"}
  npm install @suprsend/react-headless
  ```

  ```shell yarn theme={"system"}
  yarn add @suprsend/react-headless
  ```
</CodeGroup>

## Initialization

Enclose your app in **SuprSendProvider** like below and pass the `workspace key`, `distinct_id`, and [`subscriber_id`](/docs/hmac-authentication).

<CodeGroup>
  ```javascript App.js theme={"system"}
  import { SuprSendProvider } from "@suprsend/react-headless";

  function App() {
    return (
      <SuprSendProvider
        workspaceKey="<workspace_key>"
        subscriberId="<subscriber_id>"
        distinctId="<distinct_id>"
      >
        <YourAppCode />
      </SuprSendProvider>
    );
  }
  ```
</CodeGroup>

<Note> SuprSend hooks can only be used inside of SuprSendProvider.</Note>

## Adding SuprSend inbox component

### 1) useBell hook

This hook provides unSeenCount, markAllSeen which is related to the Bell icon in the inbox

**unSeenCount**: Use this variable to show the unseen notification count anywhere in your application.&#x20;

**markAllSeen**: Used to mark seen for all notifications. Call this method on clicking the bell icon so that it will reset the bell count to 0.

<CodeGroup>
  ```javascript Bell.js theme={"system"}
  import { useBell } from "@suprsend/react-headless";

  function Bell() {
    const { unSeenCount, markAllSeen } = useBell();
    return <p onClick={() => markAllSeen()}>{unSeenCount}</p>;
  }
  ```
</CodeGroup>

### 2) useNotifications hook

This hook provides a notifications list, unSeenCount, markClicked, markAllSeen.

**notifications**: List of all notifications. This array can be looped and notifications can be displayed.&#x20;

**unSeenCount**: Use this variable to show the unseen notification count anywhere in your application.&#x20;

**markClicked**: Method used to mark a notification as clicked. Pass notification id which is clicked as the first param.

**markAllRead**: This method is used to mark all individual notifications as seen. Add a button anywhere in your notification tray as **Mark all as read** and on clicking of that call this method.

<Frame caption="mark all read sample">
  <img src="https://mintcdn.com/suprsend/ysJyO3LOXwZ5L098/images/docs/f0d8bcc-Screenshot_2023-06-27_at_12.51.24_PM.png?fit=max&auto=format&n=ysJyO3LOXwZ5L098&q=85&s=6dbbb597802518d6877c22da896c474c" width="904" height="334" data-path="images/docs/f0d8bcc-Screenshot_2023-06-27_at_12.51.24_PM.png" />
</Frame>

<CodeGroup>
  ```javascript Notifications.js theme={"system"}
  import { useNotifications } from "@suprsend/react-headless";

  function Notifications() {
    const { notifications, markAllRead } = useNotifications();

    return (
      <div>
        <h3>Notifications</h3>
      	<p onClick={()=>{markAllRead()}}>Mark all read</p>
        {notifications.map((notification) => {
          return (
            <NotificationItem
              notification={notification}
              key={notification.n_id}
    					markClicked={markClicked}
            />
          );
        })}
      </div>
    );
  }

  function NotificationItem({ notification, markClicked }) {
    const message = notification.message;
    const created = new Date(notification.created_on).toDateString();

    return (
      <div
        onClick={() => {
          markClicked(notification.n_id);
        }}
        style={{
          backgroundColor: "lightgray",
          margin: 2,
          borderRadius: 5,
          padding: 4,
          cursor: "pointer",
        }}
      >
        <div style={{ display: "flex" }}>
          <p>{message.header}</p>
          {!notification.seen_on && <p style={{ color: "green" }}>*</p>}
        </div>
        <div>
          <p>{message.text}</p>
        </div>
        <div>
          <p style={{ fontSize: "12px" }}>{created}</p>
        </div>
      </div>
    );
  }
  ```
</CodeGroup>

##### Notification object structure:

<CodeGroup>
  ```javascript Notification.js theme={"system"}
  interface IRemoteNotification {
    n_id: string
    n_category: string
    created_on: number
    seen_on?: number
    message: IRemoteNotificationMessage
  }

  interface IRemoteNotificationMessage {
    header: string
    schema: string
    text: string
    url: string
    extra_data?: string
    actions?: { url: string; name: string }[]
    avatar?: { avatar_url?: string; action_url?: string }
    subtext?: { text?: string; action_url?: string }
  }
  ```
</CodeGroup>

### 3) useEvent hook

This hook is an event emitter when and takes arguments event type and callback function when the event happens. Must be called anywhere inside SuprSendProvider

**Handled Events:**

1. new\_notification: Called when the new notification occurs can be used to show toast in your application.

<CodeGroup>
  ```javascript Sample.js theme={"system"}
  import { useEvent } from "@suprsend/react-headless";

  function Home() {
    useEvent("new_notification", (newNotification) => {
      console.log("new notification data: ", newNotification);
      alert("You have new notifications");
    });

    return <p>Home</p>;
  }
  ```
</CodeGroup>

## Example implementation

Check the [example implementation.](https://codesandbox.io/s/suprsend-react-headless-example-qkxobd?file=/src/App.tsx)

***