# Novu React Native NovuProvider Hook (/platform/sdks/react-native/hooks/novu-provider)

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

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

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 items={['US', 'EU', 'HMAC Encryption']}>
  <Tab>
    ```tsx
    import { NovuProvider } from '@novu/react-native';

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

  <Tab>
    ```tsx
    import { NovuProvider } from '@novu/react-native';

    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>
    <Callout type="info">
      Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption).
    </Callout>

    ```tsx
    import { NovuProvider } from '@novu/react-native';

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