Package and asset updates before expo upgrade.

app.json

@@ -4,24 +4,26 @@
     "slug": "imexmobile",
     "version": "1.0.0",
     "orientation": "default",
-    "icon": "./assets/logo240.png",
+    "icon": "./assets/logo192.png",
     "splash": {
       "image": "./assets/logo1024.png",
       "resizeMode": "contain",
       "backgroundColor": "#efefef"
     },
     "notification": {
-      "icon": "./assets/logo240.png"
+      "icon": "./assets/logo192.png"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
     "web": {
-      "favicon": "./assets/logo240.png"
+      "favicon": "./assets/logo192.png"
     },
     "description": ""
   }

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 }}>
+    <View style={{ display: "flex", flex: 1 }}>
-      <Camera style={{ flex: 1 }} type={type}>
+      <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",
-            }}
+              backgroundColor: "transparent",
-            onPress={() => {
-              setType(
-                type === Camera.Constants.Type.back
-                  ? Camera.Constants.Type.front
-                  : Camera.Constants.Type.back
-              );
             }}
           >
-            <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
+            <MaterialCommunityIcons
-              Flip
+              name="camera-switch"
-            </Text>
+              style={{ color: "#fff", fontSize: 40 }}
+            />
           </TouchableOpacity>
           <TouchableOpacity
-            style={{ alignSelf: "center" }}
+            onPress={handleTakePicture}
-            onPress={async () => {
+            style={{
-              if (cameraRef) {
+              alignSelf: "flex-end",
-                let photo = await cameraRef.takePictureAsync();
+              alignItems: "center",
-                console.log("photo", photo);
+              backgroundColor: "transparent",
-              }
             }}
           >
-            <View
+            <FontAwesome
-              style={{
+              name="camera"
-                borderWidth: 2,
+              style={{ color: "#fff", fontSize: 40 }}
-                borderRadius: "50%",
+            />
-                borderColor: "white",
+          </TouchableOpacity>
-                height: 50,
+          <TouchableOpacity
-                width: 50,
+            onPress={() => {
-                display: "flex",
+              navigation.push("MediaCache");
-                justifyContent: "center",
+            }}
-                alignItems: "center",
+            style={{
-              }}
+              alignSelf: "flex-end",
-            >
+              alignItems: "center",
-              <View
+              backgroundColor: "transparent",
-                style={{
+            }}
-                  borderWidth: 2,
+          >
-                  borderRadius: "50%",
+            <Ionicons
-                  borderColor: "white",
+              name="ios-photos"
-                  height: 40,
+              style={{ color: "#fff", fontSize: 40 }}
-                  width: 40,
+            />
-                  backgroundColor: "white",
-                }}
-              ></View>
-            </View>
           </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";

package.json

@@ -8,27 +8,28 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.3",
+    "@apollo/client": "^3.2.5",
-    "@react-native-community/async-storage": "^1.11.0",
+    "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "^5.8.0",
+    "@react-navigation/bottom-tabs": "^5.10.7",
-    "@react-navigation/drawer": "^5.9.0",
+    "@react-navigation/drawer": "^5.10.7",
-    "@react-navigation/native": "^5.7.3",
+    "@react-navigation/native": "^5.8.7",
-    "@react-navigation/stack": "^5.9.0",
+    "@react-navigation/stack": "^5.12.4",
     "dinero.js": "^1.8.1",
-    "expo": "~38.0.8",
+    "expo": "^38.0.10",
     "expo-camera": "~8.3.1",
+    "expo-file-system": "~9.0.1",
     "expo-font": "~8.2.1",
     "expo-localization": "~8.2.1",
     "expo-status-bar": "^1.0.2",
-    "firebase": "^7.17.1",
+    "firebase": "^7.24.0",
-    "formik": "^2.1.5",
+    "formik": "^2.2.3",
-    "graphql": "^15.3.0",
+    "graphql": "^15.4.0",
-    "i18next": "^19.6.3",
+    "i18next": "^19.8.3",
-    "native-base": "^2.13.13",
+    "native-base": "^2.13.14",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
-    "react-i18next": "^11.7.0",
+    "react-i18next": "^11.7.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-indicators": "^0.17.0",
@@ -36,17 +37,17 @@
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
     "react-native-web": "~0.11.7",
-    "react-redux": "^7.2.1",
+    "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
-    "subscriptions-transport-ws": "^0.9.17"
+    "subscriptions-transport-ws": "^0.9.18"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.6",
+    "@babel/core": "^7.12.3",
-    "babel-preset-expo": "~8.1.0"
+    "babel-preset-expo": "^8.1.0"
   },
   "private": true
 }