Fixed tab issues & added gallery view IO-397 IO-398

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

@@ -1,6 +1,15 @@
 import { Button, Text as NBText, Thumbnail, View } from "native-base";
-import React from "react";
-import { FlatList, SafeAreaView, Text } from "react-native";
+import React, { useState } from "react";
+import {
+  Alert,
+  FlatList,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import ImageViewer from "react-native-image-zoom-viewer";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -18,31 +27,90 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [imgIndex, setImgIndex] = useState(0);
   return (
-    <SafeAreaView style={{ display: "flex", flex: 1 }}>
-      <Text>This is the media cache screen.</Text>
-      <Button block onPress={() => removeAllPhotos()}>
-        <NBText>Delete all</NBText>
-      </Button>
-      <Button block onPress={() => uploadAllphotos()}>
-        <NBText>Upload all</NBText>
-      </Button>
-      <Text>{photos.length}</Text>
-
+    <SafeAreaView style={styles.container}>
       <FlatList
-        style={{ flex: 1 }}
         data={photos}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
         keyExtractor={(item) => item.id}
-        renderItem={(object) => (
-          <View>
-            <Text>{object.item.uri}</Text>
-            {!object.item.video && (
+        numColumns={5}
+        renderItem={(object) =>
+          object.item.video ? (
+            <Text>Video</Text>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
+              }}
+            >
               <Thumbnail square large source={{ uri: object.item.uri }} />
-            )}
-          </View>
-        )}
+            </TouchableOpacity>
+          )
+        }
       />
+      <Text>{`${photos.length} Photos`}</Text>
+      <View style={styles.actions}>
+        <Button onPress={() => removeAllPhotos()}>
+          <NBText>Delete all</NBText>
+        </Button>
+        <Button onPress={() => uploadAllphotos()}>
+          <NBText>Upload all</NBText>
+        </Button>
+      </View>
+      <Modal
+        animationType="slide"
+        onRequestClose={() => {
+          Alert.alert("Modal has been closed.");
+        }}
+        visible={previewVisible}
+        transparent={true}
+      >
+        <ImageViewer
+          onCancel={() => setPreviewVisible(false)}
+          index={imgIndex}
+          onChange={(index) => setImgIndex(index)}
+          style={{ display: "flex" }}
+          renderFooter={(index) => (
+            <View
+              style={{
+                backgroundColor: "tomato",
+              }}
+            >
+              <Text>{index} This is the thing.</Text>
+            </View>
+          )}
+          enableSwipeDown
+          enablePreload
+          imageUrls={photos.map((p) => {
+            return { url: p.uri };
+          })}
+        />
+      </Modal>
     </SafeAreaView>
   );
 }
+
+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)(ScreenMediaCache);