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,