@notiflyio/react-native

Notifly React Native SDK for building custom inbox notification experiences.

Notifly provides @notiflyio/react-native, a React library that helps to add a fully functioning Inbox to your mobile application in minutes. Let's do a quick recap on how you can easily use it in your application. Full documentation: https://notifly.io.

Note: the SDK's exported provider is named NovuProvider — Notifly is a fork of Novu and keeps upstream code identifiers for easy upgrades.

Installation

• Install @notiflyio/react-native npm package in your react app

npm install @notiflyio/react-native

Getting Started

• Add the below code in the app.tsx file

import { NovuProvider, useNotifications } from '@notiflyio/react-native';

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

  return (
    <Show when={!isLoading} fallback={<NotificationListSkeleton />}>
      <Show when={notifications && notifications.length > 0} fallback={<EmptyNotificationList />}>
        <InfiniteScroll
          dataLength={notifications?.length ?? 0}
          fetchMore={fetchMore}
          hasMore={hasMore}
          loader={<LoadMoreSkeleton />}
        >
          {notifications?.map((notification) => {
            return <NotificationItem key={notification.id} notification={notification} />;
          })}
        </InfiniteScroll>
      </Show>
    </Show>
  );
}