Refactor to using RNP & UI Updates.

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

@@ -1,84 +1,23 @@
 import React from "react";
-import { Alert, Modal, StyleSheet, Text, Button, View } from "react-native";
-import ImageViewer from "react-native-image-zoom-viewer";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { removePhotos } from "../../redux/photos/photos.actions";
-import { selectPhotos } from "../../redux/photos/photos.selectors";
+import { Modal } from "react-native";
+import Gallery from "react-native-image-gallery";
 
-const mapStateToProps = createStructuredSelector({
-  photos: selectPhotos,
-});
-const mapDispatchToProps = (dispatch) => ({
-  removePhotos: (ids) => dispatch(removePhotos(ids)),
-});
-
-export function MediaCacheOverlay({
+export default function MediaCacheOverlay({
   photos,
-  removePhotos,
   previewVisible,
   setPreviewVisible,
   imgIndex,
   setImgIndex,
 }) {
+  console.log("photos :>> ", photos);
   return (
     <Modal
-      animationType="slide"
-      onRequestClose={() => {
-        Alert.alert("Modal has been closed.");
-      }}
+      onDismiss={() => setPreviewVisible(false)}
+      onRequestClose={() => setPreviewVisible(false)}
       visible={previewVisible}
-      transparent={true}
+      transparent={false}
     >
-      <ImageViewer
-        onCancel={() => setPreviewVisible(false)}
-        index={imgIndex}
-        onChange={(index) => setImgIndex(index)}
-        style={{ display: "flex" }}
-        renderFooter={(index) => (
-          <View
-            style={{
-              marginleft: "auto",
-              backgroundColor: "tomato",
-            }}
-          >
-            <Text>{index} This is the thing.</Text>
-            <Button
-              onPress={() => {
-                removePhotos([photos[index].id]);
-              }}
-            >
-              <Text>Delete</Text>
-            </Button>
-          </View>
-        )}
-        enableSwipeDown
-        enablePreload
-        imageUrls={photos.map((p) => {
-          return { url: p.uri };
-        })}
-      />
+      <Gallery initialPage={imgIndex} style={{ flex: 1 }} images={photos} />
     </Modal>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  actions: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-  },
-  listContentContainer: {
-    flex: 1,
-  },
-  thumbnail: {
-    width: 10,
-    height: 10,
-    backgroundColor: "tomato",
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(MediaCacheOverlay);