Added camera screen + dependencies.

components/job-list-item/job-list-item.component.jsx

@@ -6,14 +6,19 @@ import Swipeable from "react-native-gesture-handler/Swipeable";
 import { useTranslation } from "react-i18next";
 import { Ionicons } from "@expo/vector-icons";
 import styles from "../styles";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 const RenderRightAction = (props) => {
+  const navigation = useNavigation();
   const { t } = useTranslation();
   return (
-    <View style={[styles.swipe_view, styles.swipe_view_blue]}>
+    <TouchableOpacity
+      style={[styles.swipe_view, styles.swipe_view_blue]}
+      onPress={() => navigation.push("JobCamera")}
+    >
       <Ionicons name="ios-camera" size={24} color="white" />
       <Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
-    </View>
+    </TouchableOpacity>
   );
 };
 
@@ -50,6 +55,10 @@ export default function JobListItem({ item }) {
               item.v_model_desc || ""
             }`}</Text>
           </View>
+          <View style={[{ width: 150 }, localStyles.card_content_margin]}>
+            <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
+            <Text>{item.clm_total || ""}</Text>
+          </View>
         </CardItem>
       </Card>
     </Swipeable>
@@ -61,4 +70,7 @@ const localStyles = StyleSheet.create({
     alignItems: "center",
   },
   item_header_margin: { marginLeft: 10 },
+  card_content_margin: {
+    marginLeft: 15,
+  },
 });

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

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import { Text, View, TouchableOpacity } from "react-native";
+import { Camera } from "expo-camera";
+
+export default function ScreenCamera() {
+  const [hasPermission, setHasPermission] = useState(null);
+  const [type, setType] = useState(Camera.Constants.Type.back);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestPermissionsAsync();
+      setHasPermission(status === "granted");
+    })();
+  }, []);
+
+  if (hasPermission === null) {
+    return <View />;
+  }
+  if (hasPermission === false) {
+    return <Text>No access to camera</Text>;
+  }
+  return (
+    <View style={{ flex: 1 }}>
+      <Camera style={{ flex: 1 }} type={type}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: "transparent",
+            flexDirection: "row",
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 0.1,
+              alignSelf: "flex-end",
+              alignItems: "center",
+            }}
+            onPress={() => {
+              setType(
+                type === Camera.Constants.Type.back
+                  ? Camera.Constants.Type.front
+                  : Camera.Constants.Type.back
+              );
+            }}
+          >
+            <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
+              Flip
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{ alignSelf: "center" }}
+            onPress={async () => {
+              if (cameraRef) {
+                let photo = await cameraRef.takePictureAsync();
+                console.log("photo", photo);
+              }
+            }}
+          >
+            <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>
+          </TouchableOpacity>
+        </View>
+      </Camera>
+    </View>
+  );
+}

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

@@ -29,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
+import ScreenCamera from "../screen-camera/screen-camera.component";
 import { Ionicons } from "@expo/vector-icons";
 
 const JobStack = createStackNavigator();
@@ -78,6 +79,7 @@ const JobStackNavigator = ({ navigation }) => (
           i18n.t("joblist.labels.detail"),
       })}
     />
+    <JobStack.Screen name="JobCamera" component={ScreenCamera} />
   </JobStack.Navigator>
 );
 

components/styles.js

@@ -14,6 +14,7 @@ export default StyleSheet.create({
   },
 
   swipe_view: {
+    flex: 1,
     alignItems: "center",
     justifyContent: "center",
     width: 100,

package.json

@@ -16,6 +16,7 @@
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
     "expo": "~38.0.8",
+    "expo-camera": "~8.3.1",
     "expo-font": "~8.2.1",
     "expo-localization": "~8.2.1",
     "expo-status-bar": "^1.0.2",

yarn.lock

@@ -2906,6 +2906,16 @@ expo-asset@~8.1.7:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
+expo-camera@~8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-8.3.1.tgz#e17c080c4aafd71f66495c2b6dfc53dcd31b0368"
+  integrity sha512-weFanDVsJKAbm5g90zWIUD4zVrXKoQq7g2BTg4zy4p24YsGfXKYRH4ja0YRgr3Ci/abGaaRNZjsPMJiNskR+tA==
+  dependencies:
+    fbjs "1.0.0"
+    invariant "2.2.4"
+    lodash "^4.6.0"
+    prop-types "^15.6.0"
+
 expo-constants@~9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-9.1.1.tgz#bca141ee3d4550e308798128f66c6d9c6a206ca1"
@@ -3626,7 +3636,7 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==