Package and asset updates before expo upgrade.

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

@@ -1,11 +1,18 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Text, View, TouchableOpacity } from "react-native";
 import { Camera } from "expo-camera";
+import {
+  Ionicons,
+  FontAwesome,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
 
 export default function ScreenCamera() {
+  const navigation = useNavigation();
   const [hasPermission, setHasPermission] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);
-
+  const cameraRef = useRef(null);
   useEffect(() => {
     (async () => {
       const { status } = await Camera.requestPermissionsAsync();
@@ -13,6 +20,22 @@ export default function ScreenCamera() {
     })();
   }, []);
 
+  const handleCameraType = () => {
+    setType(
+      type === Camera.Constants.Type.back
+        ? Camera.Constants.Type.front
+        : Camera.Constants.Type.back
+    );
+  };
+
+  const handleTakePicture = async () => {
+    console.log("Taking the picture!");
+    if (cameraRef.current) {
+      let photo = await cameraRef.current.takePictureAsync();
+      console.log("The Photo", photo);
+    }
+  };
+
   if (hasPermission === null) {
     return <View />;
   }
@@ -20,65 +43,56 @@ export default function ScreenCamera() {
     return <Text>No access to camera</Text>;
   }
   return (
-    <View style={{ flex: 1 }}>
-      <Camera style={{ flex: 1 }} type={type}>
+    <View style={{ display: "flex", flex: 1 }}>
+      <Camera style={{ flex: 1 }} type={type} ref={cameraRef}>
         <View
           style={{
             flex: 1,
-            backgroundColor: "transparent",
             flexDirection: "row",
+            justifyContent: "space-between",
+            margin: 20,
           }}
         >
           <TouchableOpacity
+            onPress={handleCameraType}
             style={{
-              flex: 0.1,
               alignSelf: "flex-end",
               alignItems: "center",
-            }}
-            onPress={() => {
-              setType(
-                type === Camera.Constants.Type.back
-                  ? Camera.Constants.Type.front
-                  : Camera.Constants.Type.back
-              );
+              backgroundColor: "transparent",
             }}
           >
-            <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
-              Flip
-            </Text>
+            <MaterialCommunityIcons
+              name="camera-switch"
+              style={{ color: "#fff", fontSize: 40 }}
+            />
           </TouchableOpacity>
           <TouchableOpacity
-            style={{ alignSelf: "center" }}
-            onPress={async () => {
-              if (cameraRef) {
-                let photo = await cameraRef.takePictureAsync();
-                console.log("photo", photo);
-              }
+            onPress={handleTakePicture}
+            style={{
+              alignSelf: "flex-end",
+              alignItems: "center",
+              backgroundColor: "transparent",
             }}
           >
-            <View
-              style={{
-                borderWidth: 2,
-                borderRadius: "50%",
-                borderColor: "white",
-                height: 50,
-                width: 50,
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <View
-                style={{
-                  borderWidth: 2,
-                  borderRadius: "50%",
-                  borderColor: "white",
-                  height: 40,
-                  width: 40,
-                  backgroundColor: "white",
-                }}
-              ></View>
-            </View>
+            <FontAwesome
+              name="camera"
+              style={{ color: "#fff", fontSize: 40 }}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.push("MediaCache");
+            }}
+            style={{
+              alignSelf: "flex-end",
+              alignItems: "center",
+              backgroundColor: "transparent",
+            }}
+          >
+            <Ionicons
+              name="ios-photos"
+              style={{ color: "#fff", fontSize: 40 }}
+            />
           </TouchableOpacity>
         </View>
       </Camera>

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

@@ -26,6 +26,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
+import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
 
 const JobStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
@@ -75,6 +76,7 @@ const JobStackNavigator = ({ navigation }) => (
       })}
     />
     <JobStack.Screen name="JobCamera" component={ScreenCamera} />
+    <JobStack.Screen name="MediaCache" component={ScreenMediaCache} />
   </JobStack.Navigator>
 );
 

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, Text } from "react-native";
+import * as FileSystem from "expo-file-system";
+
+export default function ScreenMediaCache() {
+  console.log("DocDir", FileSystem.documentDirectory);
+
+  FileSystem.readDirectoryAsync(FileSystem.documentDirectory).then((p) => {
+    console.log(p);
+  });
+  return (
+    <View>
+      <Text>This is the media cache screen.</Text>
+    </View>
+  );
+}

components/screen-sign-in/screen-sign-in.component.jsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import Logo from "../../assets/logo240.png";
+import Logo from "../../assets/logo192.png";
 import { emailSignInStart } from "../../redux/user/user.actions";
 import {
   selectCurrentUser,

components/screen-splash/screen-splash.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, Image } from "react-native";
-import Logo from "../../assets/logo240.png";
+import Logo from "../../assets/logo192.png";
 import { useTranslation } from "react-i18next";
 import { H1, Container, Content } from "native-base";
 import styles from "../styles";