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>