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

View our React Native Expo Template for a live example of the inbox in action.

1

Install the React Native hooks SDK

npm install @novu/react-native
2

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.

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

function Layout() {
  return (
     <NovuProvider
      subscriberId="YOUR_SUBSCRIBER_ID"
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
    >
      {/* Your app components where you want to use the hooks */}
      <YourCustomInbox />
    </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.

3

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

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. To create your first workflow, follow our quickstart guide.

Was this page helpful?

API ReferenceNovuProvider