Fixed camera mounting issue. Separated media cache modal. Starting working on deleting images after upload. IO-397 IO-398

components/screen-camera/screen-camera.component.jsx

@@ -1,5 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
 import React, { useEffect, useRef, useState } from "react";
@@ -28,9 +28,22 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
     flashMode: Camera.Constants.FlashMode.off,
     capturing: null,
     cameraType: Camera.Constants.Type.back,
+    tabHasFocus: null,
   });
   const cameraRef = useRef(null);
 
+  useFocusEffect(
+    React.useCallback(() => {
+      // Do something when the screen is focused
+      setState({ ...state, tabHasFocus: true });
+      return () => {
+        // Do something when the screen is unfocused
+        // Useful for cleanup functions
+        setState({ ...state, tabHasFocus: false });
+      };
+    }, [])
+  );
+
   useEffect(() => {
     (async () => {
       const { status } = await Camera.requestPermissionsAsync();
@@ -101,7 +114,7 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
     }
   };
 
-  if (hasPermission === null) {
+  if (hasPermission === null || !state.tabHasFocus) {
     return <View />;
   }