IO-760 Delete pictures in bulk & other minor fixes

components/media-cache-overlay/media-cache-overlay.component.jsx

@@ -1,7 +1,7 @@
+import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import { Modal } from "react-native";
+import { Modal, SafeAreaView, TouchableOpacity, View } from "react-native";
 import Gallery from "react-native-image-gallery";
-
 export default function MediaCacheOverlay({
   photos,
   previewVisible,
@@ -9,7 +9,6 @@ export default function MediaCacheOverlay({
   imgIndex,
   setImgIndex,
 }) {
-  console.log("photos :>> ", photos);
   return (
     <Modal
       onDismiss={() => setPreviewVisible(false)}
@@ -17,7 +16,20 @@ export default function MediaCacheOverlay({
       visible={previewVisible}
       transparent={false}
     >
-      <Gallery initialPage={imgIndex} style={{ flex: 1 }} images={photos} />
+      <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
+        <Gallery initialPage={imgIndex} images={photos} />
+        <TouchableOpacity
+          style={{ position: "absolute" }}
+          onPress={() => setPreviewVisible(false)}
+        >
+          <Ionicons
+            name="ios-close"
+            size={64}
+            color="dodgerblue"
+            style={{ margin: 20 }}
+          />
+        </TouchableOpacity>
+      </SafeAreaView>
     </Modal>
   );
 }