Added job select & safe view to camera.

components/camera-select-job/camera-select-job.component.jsx

@@ -41,13 +41,10 @@ export function CameraSelectJob({
   if (loading) return <LoadingDisplay />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
+  console.log("Picker Render");
   return (
     <View
       style={{
-        // display: "flex",
-        // width: "100%",
-        // alignSelf: "flex-start",
-        // alignItems: "center",
         backgroundColor: "rgba(35,35,35, 0.4)",
         paddingTop: 30,
         //textShadow: "tomato 0px 0px 10px",

components/screen-camera/screen-camera.jsx

@@ -47,8 +47,10 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
 
   useEffect(() => {
     (async () => {
-      const { status } = await Camera.requestPermissionsAsync();
-      setHasPermission(status === "granted");
+      const { status: cameraStatus } = await Camera.requestPermissionsAsync();
+      setHasPermission(cameraStatus === "granted");
+
+      console.log("Camera Perms:", await Camera.getPermissionsAsync());
     })();
   }, []);
 
@@ -68,7 +70,6 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
         skipProcessing: true,
       };
 
-      console.log("Taking a picture!");
       let photo = await cameraRef.current.takePictureAsync(options);
       const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
       const newUri = FileSystem.documentDirectory + "photos/" + filename;
@@ -78,7 +79,13 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
         to: newUri,
       });
       setState({ ...state, capturing: false });
-      console.log("Adding photo to cache...");
+      console.log("Add Photo Object", {
+        ...photo,
+        id: filename,
+        uri: newUri,
+        jobId: cameraJobId,
+        video: false,
+      });
       addPhoto({
         ...photo,
         id: filename,

components/screen-main/screen-main.component.jsx

@@ -8,7 +8,6 @@ import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -102,7 +101,11 @@ const CameraStackNavigator = ({ navigation }) => (
 
 const MediaCacheStackNavigator = ({ navigation }) => (
   <CameraStack.Navigator initialRouteName="TabMediaCache">
-    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
+    <CameraStack.Screen
+      name="MediaCache"
+      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
+      component={ScreenMediaCache}
+    />
   </CameraStack.Navigator>
 );
 

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",
   },
 });