docs/platform/sdks/react-native.mdx - next - githubmirror/novu

docs/platform/sdks/react-native.mdx
161 строка4 KB
mintlify[bot]
docs(docs): Apply SEO and metadata best practices (#11903)
13 июл 2026, 11:22
13 июл 2026, 11:2201f36ae
---
title: 'Quickstart'
description: "Add Novu-powered in-app notifications to your React Native app with the Novu React Native SDK and a fully working example project."
---


You can build your own Inbox UI with Novu's React Native hooks SDK. Novu will take care of data fetching will help you build a fully custom notification-center UI.

<Note>
  Novu provides hooks to build a custom Inbox UI for react-native applications. Pre built `Inbox` component for react-native is currently not available. View our [React Native Expo Template](https://github.com/novuhq/novu-expo) for a live example on how to use hooks exposed by `@novu/react-native` SDK to build your own Inbox UI.
</Note>

<Steps>
  <Step title="Install the React Native hooks SDK">
  ```bash
  npm install @novu/react-native
  ```
  </Step>

  <Step title="Add the Novu provider to your react-native file">
    The `NovuProvider` component is used to provide the Novu context to the inbox hooks. Make sure that the provider is wrapping your Inbox hook usages at the component tree.

<Tabs>
  <Tab title="US Region">
```tsx
import { NovuProvider } from "@novu/react-native";

function Layout() {
  return (
    <NovuProvider
      subscriber="YOUR_SUBSCRIBER_ID"
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
    >
      {/* Your app components where you want to use the hooks */}
    </NovuProvider>
  );
}
```
  </Tab>

  <Tab title="EU Region">
```tsx
import { NovuProvider } from "@novu/react-native";

function Layout() {
  return (
    <NovuProvider
      subscriber="YOUR_SUBSCRIBER_ID"
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      apiUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.socket.novu.co"
    >
      {/* Your app components where you want to use the hooks */}
      <YourCustomInbox />
    </NovuProvider>
  );
}
```
  </Tab>
  <Tab title="HMAC Encryption">
    <Note>
      Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption).
    </Note>

    ```tsx

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

  </Tab>
</Tabs>
    <Note>
      You can find the `applicationIdentifier` in the Novu Dashboard under the [API keys page](https://dashboard.novu.co/api-keys).
      The `subscriberId` is the unique identifier of the user in your application, learn more about subscribers [here](/platform/concepts/subscribers).
    </Note>
  </Step>

   <Step title="Build your own inbox UI">
```tsx
import {
  FlatList,
  View,
  Text,
  ActivityIndicator,
  RefreshControl,
} from "react-native";

import { useNotifications, Notification } from "@novu/react-native";

function YourCustomInbox() {
  const { notifications, isLoading, fetchMore, hasMore, refetch } =
    useNotifications();

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.body}</Text>
    </View>
  );

  const renderFooter = () => {
    if (!hasMore) return null;

    return (
      <View>
        <ActivityIndicator size="small" color="#2196F3" />
      </View>
    );
  };

  const renderEmpty = () => (
    <View>
      <Text>No updates available</Text>
    </View>
  );

  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#2196F3" />
      </View>
    );
  }

  return (
    <FlatList
      data={notifications}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.listContainer}
      onEndReached={fetchMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
      ListEmptyComponent={renderEmpty}
      refreshControl={
        <RefreshControl
          refreshing={isLoading}
          onRefresh={refetch}
          colors={["#2196F3"]}
        />
      }
    />
  );
}
```

  </Step>

  <Step title="Trigger a notification">
    Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action.
  </Step>
</Steps>