[Version 1.1.0] Merge pull request #64 from KeyValueSoftwareSystems/staging

Author: bilta-keyvalue

CHANGELOG.md

@@ -2,7 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.0.0] - 2024-03-26
+## 1.1.0
+
+### Added
+- Added support for custom delete icon and a flag to toggle the visibility of the delete icon.
+- Added functionality to display thumbnail URL previews for media content.
+- Exposed avatar click property.
+- Implemented specific error code mapping.
+- Enhanced style and theme customizations.
+
+## 1.0.0
 
 ### Added
 

README.md

@@ -9,12 +9,12 @@ The `@sirenapp/react-native-inbox` sdk is a comprehensive and customizable React
 You can install the react sdk from npm 
 
 ```bash
-npm @sirenapp/react-native-inbox
+npm install @sirenapp/react-native-inbox
 ```
 or from yarn
 
 ```bash
-yarn @sirenapp/react-native-inbox
+yarn add @sirenapp/react-native-inbox
 ```
 
 ## 2. Configuration
@@ -51,7 +51,7 @@ Below are optional props available for the icon component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
-customStyles | Object for custom styling |  StyleProps | {} |
+customStyles | Object for custom styling |  CustomStyleProps | {} |
 notificationIcon | Option to use custom notification icon |  JSX Element | null |
 darkMode | Toggle to enable dark mode |  boolean | false |
 onError | Callback for handling errors | (error:  SirenErrorType)=> void | null |
@@ -80,7 +80,7 @@ Here are the available theme options:
 Here are the custom style options for the notification icon:
 ```js
 
-    type StyleProps = {
+    type CustomStyleProps = {
         notificationIcon?: {
           size?: number,
         };
@@ -109,17 +109,14 @@ Below are optional props available for the inbox component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
-customStyles | Object for custom styling |  StyleProps | {} |
-title |  Title of the notification inbox |  string | "Notifications" |
-hideHeader | Toggle to hide or show the header section |  boolean | false |
-hideClearAll | Toggle to hide or show the clear all button |  boolean | false |
+customStyles | Object for custom styling |  CustomStyleProps | {} |
 darkMode |  Toggle 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 | { hideAvatar: boolean } | { hideAvatar: false } |
-customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
-onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
-listEmptyComponent | Custom component for empty notification list | JSX Element | null |
-customHeader | Custom header component | JSX Element | null |
+cardProps | Props for customizing the card | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: JSX.Element, onAvatarClick: ()=> null, hideMediaThumbnailL: false, onMediaThumbnailClick: ()=> null} |
+customCard | Function for rendering custom card | (notification)=> JSX Element | null |
+onCardClick | Custom click handler for card | (notification)=> void | ()=>null |
+listEmptyComponent | Custom component for empty list | JSX Element | null |
+headerProps | Props for customizing the header | HeaderProps | { title: "Notifications", hideHeader: false, hideClearAll: false, customHeader: null, showBackButton:false, backButton: null, onBackPress: ()=> null } |
 customFooter | Custom footer component | JSX Element | null |
 customLoader | Custom component to display the initial loading state| JSX Element | null |
 customErrorWindow | Custom error window | JSX Element | null |
@@ -154,7 +151,6 @@ Here are the available theme options:
             titleColor?: string;
             headerActionColor?: string;
             borderColor?: string;
-            borderWidth?: string;
         };
         windowContainer?: {
             background?: string;
@@ -163,8 +159,8 @@ Here are the available theme options:
             borderColor?: string;
             background?: string;
             titleColor?: string;
+            subTitleColor?: string;
             descriptionColor?: string;
-            dateColor?: string;
         };
     }
 ```
@@ -174,10 +170,7 @@ Here are the available theme options:
 Here are the custom style options for the notification inbox:
 
 ```js
-    export type StyleProps = {
-      notificationIcon?: {
-        size?: number;
-      };
+    type CustomStyleProps = {
       window?: {
         width?: DimensionValue;
         height?: DimensionValue;
@@ -186,6 +179,8 @@ Here are the custom style options for the notification inbox:
         height?: number;
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
+        borderWidth?: string;
+        titlePadding?: number;
       }
       windowContainer?: {
         padding?: number;
@@ -196,26 +191,48 @@ Here are the custom style options for the notification inbox:
         avatarSize?: number;
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
+        subtitleFontWeight?: TextStyle['fontWeight'];
+        subtitleSize?: number
+        descriptionFontWeight?: TextStyle['fontWeight'];
         descriptionSize?: number;
         dateSize?: number;
       };
-      badgeStyle?: {
-        size?: number;
-        textSize?: number;
-        top?: number;
-        right?: number;
-      };
       deleteIcon?:{
         size?: number
       };
-      dateIcon?:{
+      timerIcon?:{
         size?: number
       };
       clearAllIcon?:{
         size?: number
       };
     };
 ```
+#### CardProps
+```js
+    type CardProps = {
+      hideAvatar?: boolean;
+      onAvatarClick?: (notification: NotificationDataType) => void;
+      disableAutoMarkAsRead?: boolean;
+      deleteIcon?: JSX.Element;
+      hideDelete?: boolean;
+      hideMediaThumbnail?: boolean;
+      onMediaThumbnailClick?: (notification: NotificationDataType) => void;
+    };
+```
+
+#### HeaderProps
+```js
+    type HeaderProps = {
+      title?: string;
+      hideHeader?: boolean;
+      hideClearAll?: boolean;
+      customHeader?: JSX.Element | null;
+      showBackButton?: boolean;
+      backButton?: JSX.Element;
+      onBackPress?: () => void;
+    };
+```
 
 ## 3. Hooks
 
@@ -225,14 +242,10 @@ Here are the custom style options for the notification inbox:
 import { useSiren } from '@sirenapp/react-native-inbox';
 
 function MyComponent() {
-  const { markAsRead, deleteNotification } = useSiren();
+  const { markAsReadById, deleteById } = useSiren();
 
   function handleMarkAsRead(id) {
-    markAsRead(id);
-  }
-
-  function handleDeleteNotification(id) {
-    deleteNotification(id);
+    markAsReadById(id);
   }
 
   return (
@@ -244,23 +257,11 @@ function MyComponent() {
 
 Functions | Parameters | Type | Description |
 ----------|------------|-------|------------|
-markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
-markAsRead | id | string | Set read status of a notification to true          |
-deleteNotification |  id | string  | Delete a notification by id |
-deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date |
-markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
-
-## 4. Error codes
-Given below are all possible error codes thrown by sdk:
-
-Error code  | Description |
---- | --- |
-INVALID_TOKEN | The token passed in the provider is invalid |
-INVALID_RECIPIENT_ID | The recipient id passed in the provider is invalid |
-TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed |
-GENERIC_API_ERROR | Occurrence of an unexpected api error |
-OUTSIDE_SIREN_CONTEXT | Attempting to invoke the functions outside the siren inbox context |
-MISSING_PARAMETER | The required parameter is missing |
+markAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
+markAsReadById | id | string | Set read status of a notification to true          |
+deleteById |  id | string  | Delete a notification by id |
+deleteByDate | startDate | ISO date string | Delete all notifications until given date |
+markAllAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
 
 ## Example
 Here's a basic example to help you get started
@@ -294,10 +295,9 @@ function MyContainer(): React.JSX.Element {
         darkMode={false}
       />
       <SirenInbox
-        title="Notifications"
         hideHeader={false}
         darkMode={false}
-        cardProps={{hideAvatar: false}}
+        cardProps={{hideAvatar: false, disableAutoMarkAsRead: false}}
       />
     </View>
   );

example/App.tsx

@@ -11,7 +11,13 @@ const Stack = createNativeStackNavigator();
 function MyStack() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name='Home' component={Home} />
+      <Stack.Screen
+        name='Home'
+        options={{
+          headerShown: false
+        }}
+        component={Home}
+      />
       <Stack.Screen
         name='Notifications'
         options={{
@@ -31,11 +37,7 @@ function App(): React.JSX.Element {
 
   return (
     <NavigationContainer>
-      <SirenProvider
-        config={config}
-      >
-        {MyStack()}
-      </SirenProvider>
+      <SirenProvider config={config}>{MyStack()}</SirenProvider>
     </NavigationContainer>
   );
 }

example/package.json

@@ -13,7 +13,7 @@
     "@react-navigation/bottom-tabs": "^6.5.14",
     "@react-navigation/native": "^6.1.12",
     "@react-navigation/native-stack": "^6.9.20",
-    "@sirenapp/react-native-inbox": "^1.0.0",
+    "@sirenapp/react-native-inbox": "^1.1.0",
     "react": "18.2.0",
     "react-native": "0.73.4",
     "react-native-modal": "^13.0.1",

example/screens/home.tsx

@@ -19,24 +19,24 @@ const badgeThemes = [
   {
     light: {
       badgeStyle: {
-        color: 'black',
-      }, 
+        color: 'black'
+      }
     },
     dark: {
       badgeStyle: {
-        color: 'green', 
+        color: 'green'
       }
     }
   },
   {
     light: {
       badgeStyle: {
-        color: 'blue',
+        color: 'blue'
       }
     },
     dark: {
       badgeStyle: {
-        color: 'pink',
+        color: 'pink'
       }
     }
   }
@@ -48,7 +48,7 @@ function Home(): React.JSX.Element {
   const [showTestingWindow, setShowTestingWindow] = useState(false);
   const [showCustomNotification, setShowCustomNotification] = useState(false);
   const [badgeThemeIndex, setBadgeThemeIndex] = useState(0);
-  const [showNetwork, setShowNetwork] = useState(true);
+  const [showNetwork, setShowNetwork] = useState(false);
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? '#000' : '#FFF'
@@ -79,12 +79,9 @@ function Home(): React.JSX.Element {
         </View>
         {showTestingWindow && (
           <View style={styles.testingWindowInnerContainer}>
-            {renderButton(
-              `${showNetwork ? 'Hide' : 'Show'} network`,
-              () => {
-                setShowNetwork((showNetwork) => !showNetwork);
-              }
-            )}
+            {renderButton(`${showNetwork ? 'Hide' : 'Show'} network`, () => {
+              setShowNetwork((showNetwork) => !showNetwork);
+            })}
             {renderButton(`${showCustomNotification ? 'Default' : 'Custom'}-N-Icon`, () =>
               setShowCustomNotification((showCustomNotification) => !showCustomNotification)
             )}
@@ -120,20 +117,24 @@ function Home(): React.JSX.Element {
         backgroundColor={backgroundStyle.backgroundColor}
       />
       <View style={styles.contentContainer}>
-        <SirenInboxIcon
-          theme={badgeThemes[badgeThemeIndex]}
-          customStyles={{
-            notificationIcon: {
-              size: 60
-            }
-          }}
-          notificationIcon={showCustomNotification ? renderNotificationIcon() : undefined}
-          onPress={() => navigation.navigate('Notifications')}
-        />
-        <Text>Siren Notification Icon Theme Testing</Text>
-        {showNetwork && <NetworkLogDebugModal />}
+        <View style={styles.iconContainer}>
+          <SirenInboxIcon
+            theme={badgeThemes[badgeThemeIndex]}
+            customStyles={{
+              notificationIcon: {
+                size: 30
+              }
+            }}
+            notificationIcon={showCustomNotification ? renderNotificationIcon() : undefined}
+            onPress={() => navigation.navigate('Notifications')}
+          />
+        </View>
+        <View style={styles.contentContainer}>
+          <Text>Home screen</Text>
+          {showNetwork && <NetworkLogDebugModal />}
+        </View>
+        {testingWindow()}
       </View>
-      {testingWindow()}
     </SafeAreaView>
   );
 }
@@ -171,7 +172,7 @@ const styles = StyleSheet.create({
   },
   testingWindowInnerContainer: {
     flexWrap: 'wrap',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   whiteLabel: {
     color: '#fff',
@@ -187,6 +188,12 @@ const styles = StyleSheet.create({
     margin: 6,
     borderRadius: 4,
     height: 30
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 10,
+    zIndex:2,
   }
 });