Added image picker and cleaned up main and job list screens.

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

@@ -1,9 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import * as ImagePicker from "expo-image-picker";
 import { Body, H3, Icon, ListItem, Right } from "native-base";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Text } from "react-native";
+import { Animated, Platform, Text } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import { connect } from "react-redux";
@@ -23,9 +24,40 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
   const { t } = useTranslation();
   const navigation = useNavigation();
 
-  const RenderRightAction = () => {
-    const navigation = useNavigation();
-    const { t } = useTranslation();
+  useEffect(() => {
+    (async () => {
+      if (Platform.OS !== "web") {
+        const {
+          status,
+        } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (status !== "granted") {
+          alert("Sorry, we need camera roll permissions to make this work!");
+        }
+      }
+    })();
+  }, []);
+
+  const pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    console.log(result);
+
+    if (!result.cancelled) {
+      //  setImage(result.uri);
+    }
+  };
+
+  const RenderRightAction = (progress, dragX) => {
+    const scale = dragX.interpolate({
+      inputRange: [-100, 0],
+      outputRange: [0.7, 0],
+    });
+
     return (
       <TouchableOpacity
         style={[styles.swipe_view, styles.swipe_view_blue]}
@@ -35,10 +67,46 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
           navigation.navigate("CameraTab");
         }}
       >
-        <Ionicons name="ios-camera" size={24} color="white" />
-        {/* <Text style={styles.swipe_text}>
-          {t("joblist.actions.swipecamera")}
-        </Text> */}
+        <Animated.View
+          style={{
+            // color: "white",
+            // paddingHorizontal: 10,
+            // fontWeight: "600",
+            transform: [{ scale }],
+          }}
+        >
+          <Ionicons name="ios-camera" size={24} color="white" />
+        </Animated.View>
+      </TouchableOpacity>
+    );
+  };
+  const RenderLeftAction = (progress, dragX) => {
+    const scale = dragX.interpolate({
+      inputRange: [0, 100],
+      outputRange: [0, 1],
+      extrapolate: "clamp",
+    });
+
+    return (
+      <TouchableOpacity
+        style={[styles.swipe_view, styles.swipe_view_blue]}
+        onPress={() => {
+          setCameraJobId(item.id);
+          setCameraJob(item);
+          navigation.push("MediaBrowser");
+          //pickImage(item.id);
+        }}
+      >
+        <Animated.Text
+          style={{
+            // color: "white",
+            // paddingHorizontal: 10,
+            // fontWeight: "600",
+            transform: [{ scale }],
+          }}
+        >
+          Add
+        </Animated.Text>
       </TouchableOpacity>
     );
   };
@@ -51,7 +119,10 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
   };
 
   return (
-    <Swipeable renderRightActions={() => <RenderRightAction />}>
+    <Swipeable
+      renderLeftActions={RenderLeftAction}
+      renderRightActions={RenderRightAction}
+    >
       <TouchableOpacity onPress={onPress}>
         <ListItem>
           <H3>{item.ro_number || t("general.labels.na")}</H3>