React Native Get Started

Learn how to add Novu powered Inbox to your React Native app

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.

   React Native

   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

   React Native

   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.