Quickstart

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.

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 for a live example on how to use hooks exposed by @novu/react-native SDK to build your own Inbox UI.

Install the React Native hooks SDK

npm install @novu/react-native

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.

US Region
EU Region
HMAC Encryption

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

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

Read more about HMAC Encryption.

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

You can find the applicationIdentifier in the Novu Dashboard under the API keys page. The subscriberId is the unique identifier of the user in your application, learn more about subscribers here.

Build your own inbox UI

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"]}
        />
      }
    />
  );
}

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.

@novu/js

Quickstart

⌘I

Getting Started

Integrate <Inbox />

Integrate <Subscription />

Build a Workflow

Integrate Channels Providers

SDKs

Developer

Account

Build with AI

Additional Resources