@sirenapp/react-native-inbox v1.0.0

Siren React Native Inbox

Overview

The @sirenapp/react-native-inbox sdk is a comprehensive and customizable React Native UI kit for displaying and managing notifications. This documentation provides comprehensive information on how to install, configure, and use the sdk effectively.

1. Installation

You can install the react sdk from npm

npm @sirenapp/react-native-inbox

or from yarn

yarn @sirenapp/react-native-inbox

2. Configuration

2.1 Initialization

Initialize the sdk with user token and recipient id. Wrap the provider around your App's root.

import { SirenProvider } from '@sirenapp/react-native-inbox';

const config = {
  userToken: 'your_user_token',
  recipientId: 'your_recipient_id',
};

<SirenProvider config={config}>
  {/* Your app components */}
</SirenProvider>

2.2 Configure notification icon

Once the provider is configured, next step is to configure the notification icon

This component consists of a notification icon along with a badge to display the number of unviewed notifications

import { SirenInboxIcon } from '@sirenapp/react-native-inbox';

 <SirenInboxIcon />

Props for notification icon

Below are optional props available for the icon component:

Theme customization

Here are the available theme options:

   type Theme = {
        dark: ThemeProps;
        light: ThemeProps;
    };

    type ThemeProps = {
        badgeStyle?: {
            color?: string;
            textColor?: string;
        };
    }

Style customization

Here are the custom style options for the notification icon:

    type StyleProps = {
        notificationIcon?: {
          size?: number,
        };
        badgeStyle?: {
            size?: number;
            textSize?: number;    
            top?: number;
            right?: number;
        };
    }

2.3. Configure notification inbox

Inbox is a paginated list view for displaying notifications.

import { SirenInbox } from '@sirenapp/react-native-inbox';

<SirenInbox />

Props for the notification inbox

Below are optional props available for the inbox component:

Theme customization

Here are the available theme options:

    type Theme = {
        dark: ThemeProps;
        light: ThemeProps;
    };

    type ThemeProps = {
        colors?: {
            primaryColor?: string;
            textColor?: string;
            neutralColor?: string;
            borderColor?: string;
            highlightedCardColor?: string;
            dateColor?: string;
            deleteIcon?: string;
            timerIcon?: string;
            clearAllIcon?: string;
            infiniteLoader?: string;
        };
        windowHeader?: {
            background?: string;
            titleColor?: string;
            headerActionColor?: string;
            borderColor?: string;
            borderWidth?: string;
        };
        windowContainer?: {
            background?: string;
        };
        notificationCard?: {
            borderColor?: string;
            background?: string;
            titleColor?: string;
            descriptionColor?: string;
            dateColor?: string;
        };
    }

Style options

Here are the custom style options for the notification inbox:

    export type StyleProps = {
      notificationIcon?: {
        size?: number;
      };
      window?: {
        width?: DimensionValue;
        height?: DimensionValue;
      };
      windowHeader?: {
        height?: number;
        titleFontWeight?: TextStyle['fontWeight'];
        titleSize?: number;
      }
      windowContainer?: {
        padding?: number;
      };
      notificationCard?: {
        padding?: number;
        borderWidth?: number;
        avatarSize?: number;
        titleFontWeight?: TextStyle['fontWeight'];
        titleSize?: number;
        descriptionSize?: number;
        dateSize?: number;
      };
      badgeStyle?: {
        size?: number;
        textSize?: number;
        top?: number;
        right?: number;
      };
      deleteIcon?:{
        size?: number
      };
      dateIcon?:{
        size?: number
      };
      clearAllIcon?:{
        size?: number
      };
    };

3. Hooks

useSiren is a hook that provides utility functions for modifying notifications.

import { useSiren } from '@sirenapp/react-native-inbox';

function MyComponent() {
  const { markAsRead, deleteNotification } = useSiren();

  function handleMarkAsRead(id) {
    markAsRead(id);
  }

  function handleDeleteNotification(id) {
    deleteNotification(id);
  }

  return (
    {/* Your component logic */}
  );
}

useSiren functions

4. Error codes

Given below are all possible error codes thrown by sdk:

Example

Here's a basic example to help you get started

import React from 'react';
import {SafeAreaView} from 'react-native';
import {SirenInbox,SirenInboxIcon,SirenProvider} from '@sirenapp/react-native-inbox';

function App(): React.JSX.Element {

  const config = {
    userToken: 'your_user_token',
    recipientId: 'your_recipient_id',
  };

  return (
    <SirenProvider config={config}>
      <MyContainer />
    </SirenProvider>
  );
}

export default App;

function MyContainer(): React.JSX.Element {

  return (
    <View>
      <SirenInboxIcon
        darkMode={false}
      />
      <SirenInbox
        title="Notifications"
        hideHeader={false}
        darkMode={false}
        cardProps={{hideAvatar: false}}
      />
    </View>
  );
}

export default MyContainer;