refactor: Notification card refactor and ui fix for empty window

Author: abhay-keyvalue

example/ios/Podfile

@@ -17,7 +17,7 @@ prepare_react_native_project!
 #   dependencies: {
 #     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
 # ```
-flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
+flipper_config = FlipperConfiguration.disabled
 
 linkage = ENV['USE_FRAMEWORKS']
 if linkage != nil

src/components/card.tsx

@@ -1,9 +1,7 @@
-import React, { useState, type ReactElement } from 'react';
+import React, { useState, type ReactElement, useMemo, useEffect } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import type { NotificationDataType } from 'test_notification/dist/esm/types';
-
-import type { NotificationCardProps, SirenStyleProps } from '../types';
+import type { NotificationCardProps } from '../types';
 import { CommonUtils } from '../utils';
 import CloseIcon from './closeIcon';
 import TimerIcon from './timerIcon';
@@ -43,32 +41,39 @@ import TimerIcon from './timerIcon';
 
 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 emptyState = () => {
+    return 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
+      : emptyState()
   );
 
-  const renderAvatar = (
-    notification: NotificationDataType,
-    styles: Partial<SirenStyleProps>
-  ): JSX.Element => {
+  useEffect(() => {
+    setImageSource(
+      notification?.message?.avatar?.imageUrl?.length > 0
+        ? { uri: notification.message?.avatar?.imageUrl }
+        : emptyState()
+    );
+  }, [notification, darkMode]);
+
+  const renderAvatar = useMemo((): JSX.Element => {
     return (
       <View style={style.cardIconContainer}>
         <View style={[style.cardIconRound, styles.cardIconRound]}>
           <Image
             source={imageSource}
             resizeMode='cover'
             style={style.cardAvatarStyle}
-            onError={() => setImageSource(emptyState)}
+            onError={() => setImageSource(emptyState())}
           />
         </View>
       </View>
     );
-  };
+  }, [styles, darkMode, imageSource]);
 
   return (
     <TouchableOpacity
@@ -85,7 +90,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
         ]}
       />
       <View style={[style.cardContainer, styles.cardContainer]}>
-        {!cardProps?.hideAvatar && renderAvatar(notification, styles)}
+        {!cardProps?.hideAvatar && renderAvatar}
         <View style={style.cardContentContainer}>
           <View style={style.cardFooterRow}>
             <Text numberOfLines={2} style={[styles.cardTitle, style.cardTitle]}>

src/components/emptyWindow.tsx

@@ -51,14 +51,14 @@ const style = StyleSheet.create({
   },
   emptyText: {
     fontSize: 14,
-    fontWeight: '400',
+    fontWeight: '600',
     paddingBottom: 5,
     textAlign: 'center',
     paddingTop: 20
   },
   emptyDescription: {
     fontSize: 12,
-    fontWeight: '600',
+    fontWeight: '400',
     textAlign: 'center',
     opacity: 0.8
   },