IO-750 Resolve overwriting images on iOS Upload

components/upload-progress/upload-progress.component.jsx

@@ -1,9 +1,15 @@
+import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import * as Progress from "react-native-progress";
-
-export default function UploadProgress({ uploads }) {
-  console.log("uploads :>> ", uploads);
+import _ from "lodash";
+export default function UploadProgress({ uploads, setUploads }) {
   return (
     <View style={styles.container}>
       <ScrollView>
@@ -19,6 +25,13 @@ export default function UploadProgress({ uploads }) {
                 color={uploads[key].percent === 1 ? "green" : "blue"}
               />
             </View>
+            <TouchableOpacity
+              onPress={() =>
+                setUploads((prevUploads) => _.omit(prevUploads, key))
+              }
+            >
+              <Ionicons name="ios-close" size={32} />
+            </TouchableOpacity>
           </View>
         ))}
       </ScrollView>
@@ -35,12 +48,14 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     marginBottom: 12,
+    marginLeft: 12,
+    marginRight: 12,
   },
   progressText: {
     flex: 1,
   },
   progressBarContainer: {
-    flex: 1,
+    flex: 3,
     marginLeft: 12,
     marginRight: 12,
   },