feat: allow customization of the close icon for uploads (#1668)

Author: madsroskar

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -87,9 +95,8 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
       messageInput: {
-        imageUploadPreview: { dismiss, flatList, itemContainer, upload },
+        imageUploadPreview: { flatList, itemContainer, upload },
       },
     },
   } = useTheme();
@@ -140,15 +147,11 @@ const ImageUploadPreviewWithContext = <
             style={[styles.upload, upload]}
           />
         </UploadProgressIndicator>
-        <TouchableOpacity
+        <DismissUpload
           onPress={() => {
             removeImage(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-          testID='remove-image-upload-preview'
-        >
-          <Close pathFill={white} />
-        </TouchableOpacity>
+        />
         <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
       </View>
     );
@@ -170,6 +173,29 @@ const ImageUploadPreviewWithContext = <
   ) : null;
 };
 
+type DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;
+
+const DismissUpload = ({ onPress }: DismissUploadProps) => {
+  const {
+    theme: {
+      colors: { overlay, white },
+      messageInput: {
+        imageUploadPreview: { dismiss, dismissIconColor },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+      testID='remove-image-upload-preview'
+    >
+      <Close pathFill={dismissIconColor || white} />
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,

package/src/contexts/themeContext/utils/theme.ts

@@ -267,6 +267,7 @@ export type Theme = {
     };
     imageUploadPreview: {
       dismiss: ViewStyle;
+      dismissIconColor: Color;
       flatList: ViewStyle;
       itemContainer: ViewStyle;
       upload: ImageStyle;
@@ -766,6 +767,7 @@ export const defaultTheme: Theme = {
     },
     imageUploadPreview: {
       dismiss: {},
+      dismissIconColor: '',
       flatList: {},
       itemContainer: {},
       upload: {},