Feat/card avatar click (#43)

* feat: Add avatar click functionality to notification card
* fix: send back notification data as param in onAvatarClick function

Author: abhay-keyvalue

README.md

@@ -217,6 +217,7 @@ Here are the custom style options for the notification inbox:
 ```js
     type CardProps = {
       hideAvatar?: boolean;
+      onAvatarClick?: (notification: NotificationDataType) => void;
       disableAutoMarkAsRead?: boolean;
       hideDelete?: boolean;
     };

example/screens/notifications.tsx

@@ -163,15 +163,15 @@ function Notifications(): React.JSX.Element {
       />
       <View style={styles.contentContainer}>
         <SirenInbox
-          title='Siren Notifications'
           inboxHeaderProps={{
             hideHeader: hideHeader,
             customHeader: showCustomHeader ? renderCustomHeader() : undefined,
             showBackButton: true,
             onBackPress: () => navigation.goBack(),
+            title: 'Siren Inbox',
           }}
           darkMode={sdkDarkModeEnabled}
-          cardProps={{ hideAvatar: hideAvatar, disableAutoMarkAsRead: false }}
+          cardProps={{ hideAvatar: hideAvatar, disableAutoMarkAsRead: false, onAvatarClick: (notification: NotificationDataType) => console.log('avatar click', notification) }}
           theme={windowThemes[windowThemeIndex]}
           customFooter={showCustomFooter ? renderCustomFooter() : undefined}
           listEmptyComponent={showCustomEmptyComponent ? renderListEmpty() : undefined}

src/components/card.tsx

@@ -42,7 +42,7 @@ import TimerIcon from './timerIcon';
 
 const Card = (props: NotificationCardProps): ReactElement => {
   const { onCardClick, notification, cardProps = {}, styles, onDelete, darkMode } = props;
-  const { hideAvatar, disableAutoMarkAsRead, hideDelete = false } = cardProps;
+  const { hideAvatar, disableAutoMarkAsRead, hideDelete = false, onAvatarClick } = cardProps;
   const { markAsRead } = useSiren();
 
   const opacity = useRef(new Animated.Value(1)).current;
@@ -74,20 +74,28 @@ const Card = (props: NotificationCardProps): ReactElement => {
     setImageSource(emptyState());
   };
 
+  const avatarClick = () => {
+    if (onAvatarClick) onAvatarClick(notification);
+  };
+
   const renderAvatar = useMemo((): JSX.Element => {
     return (
       <View style={style.cardIconContainer}>
-        <View style={[style.cardIconRound, styles.cardIconRound]}>
+        <TouchableOpacity
+          disabled={Boolean(!onAvatarClick)}
+          onPress={avatarClick}
+          style={[style.cardIconRound, styles.cardIconRound]}
+        >
           <Image
             source={imageSource}
             resizeMode='cover'
             style={style.cardAvatarStyle}
             onError={onError}
           />
-        </View>
+        </TouchableOpacity>
       </View>
     );
-  }, [styles, darkMode, imageSource]);
+  }, [styles, darkMode, imageSource, onAvatarClick]);
 
   const onDeleteItem = async (): Promise<void> => {
 

src/components/sirenInbox.tsx

@@ -72,7 +72,11 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     theme = { dark: {}, light: {} },
     customStyles = {},
     darkMode = false,
-    cardProps = { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false },
+    cardProps = {
+      hideAvatar: false,
+      disableAutoMarkAsRead: false,
+      hideDelete: false
+    },
     listEmptyComponent = null,
     inboxHeaderProps = {},
     customFooter = null,

src/types.ts

@@ -81,6 +81,7 @@ export type SirenProviderConfigProps = {
  */
 type CardProps = {
   hideAvatar?: boolean;
+  onAvatarClick?: (notification: NotificationDataType) => void;
   disableAutoMarkAsRead?: boolean;
   hideDelete?: boolean;
 };