fix: Header clear icon press is inactive and remove unwanted closeIconSize prop from window header

Author: abhay-keyvalue

README.md

@@ -186,7 +186,6 @@ Here are the custom style options for the notification inbox:
         height?: number;
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
-        closeIconSize?: number;
       }
       windowContainer?: {
         padding?: number;

src/components/header.tsx

@@ -38,12 +38,16 @@ const Header = (props: {
       <Text numberOfLines={1} style={[style.headerTitle, styles.headerTitle]}>
         {title}
       </Text>
-      {!hideClearAll && <View style={style.clearIconContainer}>
-        <ClearIcon styles={styles} />
-        <TouchableOpacity disabled={clearAllDisabled} onPress={onPressClearAll}>
+      {!hideClearAll && (
+        <TouchableOpacity
+          disabled={clearAllDisabled}
+          onPress={onPressClearAll}
+          style={style.clearIconContainer}
+        >
+          <ClearIcon styles={styles} />
           <Text style={styles.headerAction}>{Constants.CLEAR_ALL_LABEL}</Text>
         </TouchableOpacity>
-      </View>}
+      )}
     </View>
   );
 };
@@ -55,7 +59,7 @@ const style = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 10,
-    paddingHorizontal: 15,
+    paddingHorizontal: 15
   },
   clearIconContainer: {
     flexDirection: 'row',

src/types.ts

@@ -147,7 +147,6 @@ export type StyleProps = {
     height?: number;
     titleFontWeight?: TextStyle['fontWeight'];
     titleSize?: number;
-    closeIconSize?: number;
     titlePadding?: number;
     borderWidth?: number;
   };

src/utils/commonUtils.ts

@@ -151,7 +151,7 @@ export const applyTheme = (
   clearIconContainer: {
     width: customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size,
     height: customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size,
-    marginRight: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.2
+    marginRight: (customStyles.clearAllIcon?.size || defaultStyles.clearAllIcon.size) * 0.3
   },
   timerIcon: {
     borderColor: theme.colors?.timerIcon || DefaultTheme[mode].colors.timerIcon,

src/utils/constants.ts

@@ -112,7 +112,6 @@ export const defaultStyles = {
     height: 50,
     titleFontWeight: '500',
     titleSize: 20,
-    closeIconSize: 20,
     titlePadding: 0,
     borderWidth: 0.6
   },
@@ -139,6 +138,6 @@ export const defaultStyles = {
     size: 12
   },
   clearAllIcon: {
-    size: 18
+    size: 16
   }
 };