refactor:Update notification icon, readme, sdk props

Author: abhay-keyvalue

README.md

@@ -58,7 +58,7 @@ const config = {
 
 
 ```
-The config is a prop for the SirenProvider component is authenticate and initialize sdk.
+The config is a property containing userToken and recipientId for authenticate and initialize sdk.
 
 ```js
 type config = {
@@ -95,6 +95,7 @@ darkMode | Flag to enable dark mode |  boolean | false |
 onError | Callback for handling errors | (error:  SirenErrorType)=> void | null |
 onPress | Function for handling press of icon | ()=> void | null |
 disabled | Flag to disable click handler of icon |  boolean | false |
+hideBadge | Flag to hide unread notification count badge |  boolean | false |
 
 #### Theming options
 Customize the unread badge of the notification icon, and choose between dark and light theming options. 
@@ -124,14 +125,16 @@ Customize the notification icon style properties includes size of icon, badge, e
         };
         badgeStyle?: {
             size?: number;
-            textSize?: number;
+            textSize?: number;    
+            top?: number;
+            right?: number;
         };
     }
 ```
 
 ### 4. Siren Inbox
 
-SirenNotificationWindow is a paginated list view for displaying notifications.
+SirenNotificationInbox is a paginated list view for displaying notifications.
 
 ```js
 import { SirenInbox } from '@siren/react-native-inbox';
@@ -145,27 +148,42 @@ import { SirenInbox } from '@siren/react-native-inbox';
 />
 
 ```
-#### Siren Notification Window Props
-Given below are all props of window component.
+#### Siren Notification Inbox Props
+Given below are all props of inbox component.
 
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
-theme | Theme object for custom styling |  Theme | {} |
-title |  Title of the notification window |  string | "Notifications" |
+theme | Theme object for custom color theme |  Theme | {} |
+customStyles | Style object for custom styling |  StyleProps | {} |
+title |  Title of the notification inbox |  string | "Notifications" |
 hideHeader | Flag to hide or show the header |  boolean | false |
 hideClearAll | Flag to hide or show the clear all button in header |  boolean | false |
 darkMode | Flag to enable dark mode |  boolean | false |
+itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) |  number | 20 |
 cardProps | Props for customizing the notification cards | CardProps | null |
 customNotificationCard | Custom function for rendering notification cards | (notification)=> JSX Element | null |
 onNotificationCardClick | Props for customizing the notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component to display when the notification list is empty | JSX Element | null |
 customHeader | Custom header component | JSX Element | null |
 customFooter | Custom footer component | JSX Element | null |
+customLoader | Custom loader component | JSX Element | null |
+customErrorWindow | Custom error component | JSX Element | null |
 onError | Callback for handling errors | (error:  SirenErrorType)=> void | null |
 
+#### Card props
+
+Style object for customize notification card.
+
+```js
+type CardProps = {
+  hideAvatar?: boolean;
+  showMedia?: boolean;
+};
+```
+
 #### Theming options
 
-Customizable UI option for notification window, with dark and light theme options. 
+Customizable UI option for notification inbox, with dark and light theme options. 
 
 ```js
     type Theme = {
@@ -184,6 +202,7 @@ Customizable UI option for notification window, with dark and light theme option
             deleteIcon?: string;
             timerIcon?: string;
             clearAllIcon?: string;
+            infiniteLoader?: string;
         };
         windowHeader?: {
             background?: string;
@@ -205,9 +224,9 @@ Customizable UI option for notification window, with dark and light theme option
     }
 ```
 
-#### Theming options
+#### Styling options
 
-Customizable Styling option for notification window.
+Customizable Styling option for notification inbox.
 
 ```js
     export type StyleProps = {
@@ -223,7 +242,6 @@ Customizable Styling option for notification window.
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
         closeIconSize?: number;
-        titlePadding?: number;
       }
       windowContainer?: {
         padding?: number;
@@ -234,14 +252,23 @@ Customizable Styling option for notification window.
         avatarSize?: number;
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
-        titlePadding?: number;
         descriptionSize?: number;
-        descriptionPadding?: number;
         dateSize?: number;
       };
       badgeStyle?: {
         size?: number;
         textSize?: number;
+        top?: number;
+        right?: number;
+      };
+      deleteIcon?:{
+        size?: number
+      };
+      dateIcon?:{
+        size?: number
+      };
+      clearAllIcon?:{
+        size?: number
       };
     };
 ```
@@ -288,7 +315,7 @@ INVALID_RECIPIENT_ID | Invalid recipient id | Recipient id in provider is invali
 TOKEN_VERIFICATION_FAILED | This operation requires a valid token | Failed to verify token and initialize sdk |
 INVALID_ERROR_FUNCTION | Invalid error function | Error function is invalid |
 GENERIC_API_ERROR | Api error | Failed to call a internal api |
-SIREN_OBJECT_NOT_FOUND | Siren Object Not found | Was failed to initialize sdk, Siren object not created |
+OUTSIDE_SIREN_CONTEXT | Siren Object Not found | Was failed to initialize sdk, Siren object not created |
 MISSING_PARAMETER | Missing Parameter | A parameter is missing in function call |
 
 ### Complete Code Example

package-lock.json

@@ -78,6 +78,6 @@
   ],
   "dependencies": {
     "pubsub-js": "^1.9.4",
-    "test_notification": "^1.0.10"
+    "test_notification": "^1.0.20"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import React, { type ReactElement } from 'react';
+import React, { useState, type ReactElement } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { NotificationDataType } from 'test_notification/dist/esm/types';
@@ -41,27 +41,34 @@ import TimerIcon from './timerIcon';
  * @param {Function} props.onDelete - Callback function executed when the delete action is triggered.
  */
 
-const renderAvatar = (
-  notification: NotificationDataType,
-  styles: Partial<SirenStyleProps>
-): JSX.Element => {
-  return (
-    <View style={style.cardIconContainer}>
-      <View style={[style.cardIconRound, styles.cardIconRound]}>
-        {Boolean(notification?.message?.avatar?.imageUrl) && (
+const Card = (props: NotificationCardProps): ReactElement => {
+  const { onCardClick, notification, cardProps, styles, onDelete, darkMode } = props;
+  const emptyState = darkMode
+    ? require('../assets/emptyDark.png')
+    : require('../assets/emptyLight.png');
+  const [imageSource, setImageSource] = useState(
+    notification?.message?.avatar?.imageUrl?.length > 0
+      ? { uri: notification.message?.avatar?.imageUrl }
+      : emptyState
+  );
+
+  const renderAvatar = (
+    notification: NotificationDataType,
+    styles: Partial<SirenStyleProps>
+  ): JSX.Element => {
+    return (
+      <View style={style.cardIconContainer}>
+        <View style={[style.cardIconRound, styles.cardIconRound]}>
           <Image
-            source={{ uri: notification.message?.avatar?.imageUrl }}
+            source={imageSource}
             resizeMode='cover'
             style={style.cardAvatarStyle}
+            onError={() => setImageSource(emptyState)}
           />
-        )}
+        </View>
       </View>
-    </View>
-  );
-};
-
-const Card = (props: NotificationCardProps): ReactElement => {
-  const { onCardClick, notification, cardProps, styles, onDelete } = props;
+    );
+  };
 
   return (
     <TouchableOpacity
@@ -81,17 +88,17 @@ const Card = (props: NotificationCardProps): ReactElement => {
         {!cardProps?.hideAvatar && renderAvatar(notification, styles)}
         <View style={style.cardContentContainer}>
           <View style={style.cardFooterRow}>
-            <Text numberOfLines={1} style={[styles.cardTitle, style.cardTitle]}>
+            <Text numberOfLines={2} style={[styles.cardTitle, style.cardTitle]}>
               {notification.message?.header}
             </Text>
             <CloseIcon onDelete={onDelete} notification={notification} styles={styles} />
           </View>
           {Boolean(notification.message?.subHeader) && (
-            <Text numberOfLines={1} style={[style.cardDescription, styles.cardDescription]}>
+            <Text numberOfLines={2} style={[style.cardDescription, styles.cardDescription]}>
               {notification.message?.subHeader}
             </Text>
           )}
-          <Text numberOfLines={3} style={[style.cardDescription, styles.cardDescription]}>
+          <Text numberOfLines={2} style={[style.cardDescription, styles.cardDescription]}>
             {notification.message?.body}
           </Text>
           <View style={style.dateContainer}>
@@ -122,7 +129,8 @@ const style = StyleSheet.create({
     paddingTop: 4
   },
   cardTitle: {
-    paddingBottom: 4
+    paddingBottom: 4,
+    paddingTop: 4
   },
   icon: {
     width: '100%',

src/assets/bellDark.png

@@ -8,21 +8,20 @@ const ClearIcon = ({ styles }: { styles: Partial<SirenStyleProps> }): ReactEleme
 
   for (let i = 0; i < 3; i++)
     icon.push(
-      <View key={i} style={[style.clearIcon, styles.clearIcon, { marginLeft: (3 - i) * 2 }]} />
+      <View key={i} style={[style.clearIcon, styles.clearIcon, { marginLeft: (2 - i) * 5 }]} />
     );
 
-  return <View>{icon}</View>;
+  return <View style={[style.clearIconContainer, styles.clearIconContainer]}>{icon}</View>;
 };
 
 const style = StyleSheet.create({
   clearIcon: {
-    height: 2,
-    width: 14,
-    borderRadius: 1.2,
-    marginTop: 1.5,
-    marginBottom: 0.5,
-    marginRight: 5
+    width: '100%'
   },
+  clearIconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
 });
 
 export default ClearIcon;