Fixed issues for demo.

components/job-lines/job-lines.component.jsx

@@ -0,0 +1,81 @@
+import { Card, CardItem, Container, Content, Text } from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl, StyleSheet } from "react-native";
+import Dinero from "dinero.js";
+
+export default function JobLines({ job, loading, refetch }) {
+  const { t } = useTranslation();
+  if (!!!job) {
+    <Card>
+      <Text>Job is not defined.</Text>
+    </Card>;
+  }
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      >
+        <FlatList
+          data={job.joblines}
+          style={{ flex: 1 }}
+          contentContainerStyle={localStyles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          renderItem={(object) => (
+            <Card>
+              <CardItem style={localStyles.flexRow}>
+                <Text style={localStyles.growWithEllipsis}>{`${
+                  object.item.line_desc
+                }${
+                  object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
+                }`}</Text>
+                {object.item.part_type && (
+                  <Text style={localStyles.sideMargins}>
+                    {t(`jobdetail.part_types.${object.item.part_type}`)}
+                  </Text>
+                )}
+                <Text style={localStyles.sideMargins}>
+                  {Dinero({
+                    amount: Math.round((object.item.act_price || 0) * 100),
+                  }).toFormat()}
+                </Text>
+              </CardItem>
+              <CardItem style={localStyles.flexRow}>
+                {object.item.mod_lbr_ty && (
+                  <Text>
+                    {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
+                  </Text>
+                )}
+              </CardItem>
+            </Card>
+          )}
+        />
+      </Content>
+    </Container>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  listContentContainer: {
+    flex: 1,
+  },
+  flexRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  sideMargins: {
+    marginLeft: 5,
+    marginRight: 5,
+  },
+  growWithEllipsis: {
+    flex: 1,
+  },
+});