Remove all native base dependencies.

components/screen-job-detail/screen-job-detail.component.jsx

@@ -1,7 +1,8 @@
 import { useQuery } from "@apollo/client";
-import { Tab, Tabs } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useWindowDimensions } from "react-native";
+import { SceneMap, TabView } from "react-native-tab-view";
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import ErrorDisplay from "../error-display/error-display.component";
 import JobDocuments from "../job-documents/job-documents.component";
@@ -15,7 +16,7 @@ export default function ScreenJobDetail({ route }) {
     params: { jobId },
   } = route;
   const { t } = useTranslation();
-
+  const layout = useWindowDimensions();
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: {
       id: jobId,
@@ -23,31 +24,50 @@ export default function ScreenJobDetail({ route }) {
     skip: !jobId,
   });
 
+  const renderScene = SceneMap({
+    job: () =>
+      JobTombstone({
+        job: data.jobs_by_pk,
+        loading: loading,
+        refetch: refetch,
+      }),
+    lines: () =>
+      JobLines({
+        job: data.jobs_by_pk,
+        loading: loading,
+        refetch: refetch,
+      }),
+    documents: () =>
+      JobDocuments({
+        job: data.jobs_by_pk,
+        loading: loading,
+        refetch: refetch,
+      }),
+    notes: () =>
+      JobNotes({
+        job: data.jobs_by_pk,
+        loading: loading,
+        refetch: refetch,
+      }),
+  });
+
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    { key: "job", title: t("jobdetail.labels.job") },
+    { key: "lines", title: t("jobdetail.labels.lines") },
+    { key: "documents", title: t("jobdetail.labels.documents") },
+    { key: "notes", title: t("jobdetail.labels.notes") },
+  ]);
+
   if (loading) return <LoadingDisplay />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
   return (
-    <Tabs>
-      <Tab heading={t("jobdetail.labels.job")}>
-        <JobTombstone
-          job={data.jobs_by_pk}
-          loading={loading}
-          refetch={refetch}
-        />
-      </Tab>
-      <Tab heading={t("jobdetail.labels.lines")}>
-        <JobLines job={data.jobs_by_pk} loading={loading} refetch={refetch} />
-      </Tab>
-      <Tab heading={t("jobdetail.labels.documents")}>
-        <JobDocuments
-          job={data.jobs_by_pk}
-          loading={loading}
-          refetch={refetch}
-        />
-      </Tab>
-      <Tab heading={t("jobdetail.labels.notes")}>
-        <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
-      </Tab>
-    </Tabs>
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex}
+      initialLayout={{ width: layout.width }}
+    />
   );
 }