> ## Documentation Index
> Fetch the complete documentation index at: https://novu-c5de82d9-docs-homepage-redesign.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# NovuProvider

> Learn how to use the NovuProvider component to set up the Novu context in your React Native application

The `NovuProvider` is the top-level component that provides the [Novu instance](/platform/inbox/headless-mode) to the rest of the hooks through the context.
Usually, it's placed somewhere in the root of your application, which makes the hooks accessible throughout the application.

## Props

| Prop                  | Type      | Required | Description                                                    |
| --------------------- | --------- | -------- | -------------------------------------------------------------- |
| subscriberId          | string    | Yes      | The unique identifier of the subscriber                        |
| applicationIdentifier | string    | Yes      | Your application identifier from Novu                          |
| subscriberHash        | string    | No       | HMAC encryption hash for the subscriber                        |
| apiUrl                | string    | No       | Custom api url for self-hosted instances                       |
| socketUrl             | string    | No       | Custom socket URL for self-hosted instances                    |
| children              | ReactNode | Yes      | The child components that will have access to the Novu context |

## Example Usage

<Tabs>
  <Tab>
    ```tsx theme={null}

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>

  <Tab>
    ```tsx theme={null}

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
          apiUrl="https://eu.api.novu.co"
          socketUrl="wss://eu.socket.novu.co"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>

  <Tab>
    <Note>
      Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption).
    </Note>

    ```tsx theme={null}

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
          subscriberHash="SUBSCRIBER_HASH_HMAC_ENCRYPTION"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>
</Tabs>