Fixed hooks issue for useNavigation + added swipeable

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

@@ -0,0 +1,64 @@
+import { Card, CardItem, H3, SwipeRow } from "native-base";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import Swipeable from "react-native-gesture-handler/Swipeable";
+import { useTranslation } from "react-i18next";
+import { Ionicons } from "@expo/vector-icons";
+import styles from "../styles";
+
+const RenderRightAction = (props) => {
+  const { t } = useTranslation();
+  return (
+    <View style={[styles.swipe_view, styles.swipe_view_blue]}>
+      <Ionicons name="ios-camera" size={24} color="white" />
+      <Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
+    </View>
+  );
+};
+
+export default function JobListItem({ item }) {
+  console.log("JobListItem -> item", item);
+  const navigation = useNavigation();
+
+  const onPress = () => {
+    navigation.push("JobDetail", {
+      jobId: item.id,
+      title: item.ro_number ? item.ro_number : `EST-${item.est_number}`,
+    });
+  };
+
+  return (
+    <Swipeable renderRightActions={() => <RenderRightAction />}>
+      <Card>
+        <CardItem header bordered first button onPress={onPress}>
+          <View style={localStyles.item_header}>
+            <H3 style={localStyles.item_header_content}>
+              {item.ro_number ? item.ro_number : `EST-${item.est_number}`}
+            </H3>
+            <Text style={localStyles.item_header_margin}>
+              {item.clm_no || ""}
+            </Text>
+          </View>
+        </CardItem>
+        <CardItem bordered last button>
+          <View>
+            <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
+              item.ownr_co_nm || ""
+            }`}</Text>
+            <Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
+              item.v_model_desc || ""
+            }`}</Text>
+          </View>
+        </CardItem>
+      </Card>
+    </Swipeable>
+  );
+}
+const localStyles = StyleSheet.create({
+  item_header: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  item_header_margin: { marginLeft: 10 },
+});