Added job select & safe view to camera.

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

@@ -1,15 +1,13 @@
-import * as FileSystem from "expo-file-system";
+import { Button, Container, Spinner, Text as NBText, View } from "native-base";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
-  Button,
-  Container,
-  Content,
-  Spinner,
-  Text as NBText,
-  Thumbnail,
-  View,
-} from "native-base";
-import React, { useEffect, useState } from "react";
-import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -37,63 +35,61 @@ export function ScreenMediaCache({
   uploadAllphotos,
   uploadInProgress,
 }) {
+  const { t } = useTranslation();
   const [previewVisible, setPreviewVisible] = useState(false);
   const [imgIndex, setImgIndex] = useState(0);
   const [imagesInDir, setImagesInDir] = useState([]);
 
-  useEffect(() => {
-    const check = async () => {
-      setImagesInDir(
-        await FileSystem.readDirectoryAsync(
-          FileSystem.documentDirectory + "photos"
-        )
-      );
-    };
-    photos.length;
-    check();
-  }, [photos]);
-  console.log("upinprog", uploadInProgress);
+  console.log("Photos", photos);
+
   return (
     <Container>
-      <Content>
-        <View style={styles.actions}>
-          <Button onPress={() => removeAllPhotos()}>
-            <NBText>Delete all</NBText>
-          </Button>
-          <Button onPress={() => uploadAllphotos()}>
-            <NBText>Upload all </NBText>
-            {uploadInProgress && <Spinner />}
-          </Button>
-        </View>
-        <Text>{`${photos.length} Photos`}</Text>
-        <FlatList
-          data={photos}
-          style={{ flex: 5 }}
-          contentContainerStyle={styles.listContentContainer}
-          keyExtractor={(item) => item.id}
-          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 }} />
-              </TouchableOpacity>
-            )
-          }
-        />
-        <MediaCacheOverlay
-          imgIndex={imgIndex}
-          setImgIndex={setImgIndex}
-          previewVisible={previewVisible}
-          setPreviewVisible={setPreviewVisible}
-        />
-      </Content>
+      <View style={styles.actions}>
+        <Button onPress={() => removeAllPhotos()}>
+          <NBText>{t("mediacache.actions.deleteall")}</NBText>
+        </Button>
+        <Button onPress={() => uploadAllphotos()}>
+          <NBText>{t("mediacache.actions.uploadall")}</NBText>
+          {uploadInProgress && <Spinner />}
+        </Button>
+      </View>
+
+      <FlatList
+        data={photos}
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.listContentContainer}
+        keyExtractor={(item) => item.id}
+        numColumns={4}
+        renderItem={(object) =>
+          object.item.video ? (
+            <Text>Video</Text>
+          ) : (
+            <TouchableOpacity
+              style={{
+                flex: 1 / 4, //here you can use flex:1 also
+                aspectRatio: 1,
+              }}
+              onPress={() => {
+                setImgIndex(object.index);
+                setPreviewVisible(true);
+              }}
+            >
+              <Image
+                source={{ uri: object.item.uri }}
+                style={{ flex: 1 }}
+                resizeMode="cover"
+              />
+            </TouchableOpacity>
+          )
+        }
+      />
+      <MediaCacheOverlay
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+      <Text>{`${photos.length} Photos`}</Text>
     </Container>
   );
 }
@@ -108,12 +104,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-evenly",
   },
   listContentContainer: {
-    flex: 1,
-  },
-  thumbnail: {
-    width: 10,
-    height: 10,
-    // backgroundColor: "tomato",
+    //flex: 1,
+    justifyContent: "flex-start",
+    //flexDirection: "row",
   },
 });