Add liquid search & jobs list.

app/_layout.tsx

@@ -17,7 +17,7 @@ import "../translations/i18n";
 function AuthenticatedLayout() {
   const { t } = useTranslation();
   return (
-    <NativeTabs>
+    <NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
       <NativeTabs.Trigger name="jobs">
         <Label>{t("joblist.labels.activejobs")}</Label>
         <Icon sf="checklist" drawable="custom_android_drawable" />
@@ -26,6 +26,9 @@ function AuthenticatedLayout() {
         <Icon sf="gear" drawable="custom_settings_drawable" />
         <Label>{t("settings.titles.settings")}</Label>
       </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="search" role="search">
+        <Label>Search</Label>
+      </NativeTabs.Trigger>
     </NativeTabs>
   );
 }

app/jobs/_layout.tsx

@@ -1,6 +1,10 @@
-import { Stack } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 
 function JobsStack() {
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  console.log("*** ~ JobsStack ~ params:", params);
+
   return (
     <Stack
       screenOptions={{
@@ -9,8 +13,27 @@ function JobsStack() {
         },
       }}
     >
-      <Stack.Screen name="index" options={{ title: "Active Jobs" }} />
-      <Stack.Screen name="[jobId]" options={{ title: "Job Details" }} />
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Search",
+          headerSearchBarOptions: {
+            placement: "automatic",
+            placeholder: "Search",
+            onChangeText: (event) => {
+              router.setParams({
+                search: event?.nativeEvent?.text,
+              });
+            },
+          },
+        }}
+      />
+      <Stack.Screen
+        name="[jobId]"
+        options={({ route }) => ({
+          title: (route.params as any)?.title || "Job Details",
+        })}
+      />
     </Stack>
   );
 }

app/jobs/index.tsx

@@ -1,24 +1,4 @@
-import { Link } from "expo-router";
-import { StyleSheet, Text, View } from "react-native";
-
+import JobsList from "../../components/jobs-list/jobs-list";
 export default function Tab() {
-  return (
-    <View style={styles.container}>
-      <Text>Jobs Screen.</Text>
-      <Link
-        href={{ pathname: "/jobs/[jobId]", params: { jobId: 123 } }}
-        withAnchor
-      >
-        Go to detail
-      </Link>
-    </View>
-  );
+  return <JobsList />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});

app/search/_layout.tsx

@@ -0,0 +1,24 @@
+import { Stack, useRouter } from "expo-router";
+
+export default function SearchLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Search",
+          headerSearchBarOptions: {
+            placement: "automatic",
+            placeholder: "Search",
+            onChangeText: (event) => {
+              router.setParams({
+                globalSearch: event?.nativeEvent?.text,
+              });
+            },
+          },
+        }}
+      />
+    </Stack>
+  );
+}

app/search/index.tsx

@@ -0,0 +1,12 @@
+import { useLocalSearchParams } from "expo-router";
+import { ScrollView } from "react-native";
+import { Text } from "react-native-paper";
+
+export default function SearchIndex() {
+  const { globalSearch } = useLocalSearchParams();
+  return (
+    <ScrollView>
+      <Text>Some search results here for: {globalSearch}</Text>
+    </ScrollView>
+  );
+}