From 0721262d84532a8c9c8c8709001229980c8ae5a5 Mon Sep 17 00:00:00 2001
From: mrevanzak <mrevanzak@gmail.com>
Date: Sun, 29 Oct 2023 16:53:34 +0700
Subject: [PATCH] feat: search on header

---
 apps/expo/src/app/(tabs)/_layout.tsx | 23 +++++++---
 apps/expo/src/app/_layout.tsx        | 11 ++++-
 apps/expo/src/app/search.tsx         |  6 +++
 apps/expo/src/components/Header.tsx  | 68 ++++++++++++++++++++++++++++
 4 files changed, 99 insertions(+), 9 deletions(-)
 create mode 100644 apps/expo/src/app/search.tsx
 create mode 100644 apps/expo/src/components/Header.tsx

diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index f86fb14..0753bc4 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -15,6 +15,7 @@ export default function TabsLayout() {
           borderTopRightRadius: 15,
           height: 70,
         },
+        headerShown: false,
       }}
     >
       <Tabs.Screen
@@ -45,13 +46,21 @@ export default function TabsLayout() {
             left: 2,
           },
           tabBarIcon: ({ focused }) => (
-            <Ionicons
-              name={
-                focused ? "md-checkmark-circle-outline" : "md-checkmark-circle"
-              }
-              size={70}
-              color="#FDBC12"
-            />
+            <Button
+              avoidInnerPadding
+              avoidMinWidth
+              backgroundColor="transparent"
+            >
+              <Ionicons
+                name={
+                  focused
+                    ? "md-checkmark-circle-outline"
+                    : "md-checkmark-circle"
+                }
+                size={70}
+                color="#FDBC12"
+              />
+            </Button>
           ),
         }}
       />
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
index 836e9c2..6bb3d72 100644
--- a/apps/expo/src/app/_layout.tsx
+++ b/apps/expo/src/app/_layout.tsx
@@ -1,11 +1,18 @@
-import { Slot } from "expo-router";
+import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
+import Header from "@/components/Header";
 import { TRPCProvider } from "@/utils/api";
 
 export default function RootLayout() {
   return (
     <TRPCProvider>
-      <Slot />
+      <Stack
+        screenOptions={{
+          header: (props) => <Header {...props} />,
+        }}
+      >
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
       <StatusBar />
     </TRPCProvider>
   );
diff --git a/apps/expo/src/app/search.tsx b/apps/expo/src/app/search.tsx
new file mode 100644
index 0000000..7007c2b
--- /dev/null
+++ b/apps/expo/src/app/search.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { Text } from "react-native-ui-lib";
+
+export default function SearchScreen() {
+  return <Text>search</Text>;
+}
diff --git a/apps/expo/src/components/Header.tsx b/apps/expo/src/components/Header.tsx
new file mode 100644
index 0000000..e7edbab
--- /dev/null
+++ b/apps/expo/src/components/Header.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Button, TextField } from "react-native-ui-lib";
+import { Link, usePathname } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+import type { BottomTabHeaderProps } from "@react-navigation/bottom-tabs";
+import type { NativeStackHeaderProps } from "@react-navigation/native-stack";
+
+export default function Header(
+  props: BottomTabHeaderProps | NativeStackHeaderProps,
+) {
+  const pathname = usePathname();
+  const isSearchScreen = pathname === "/search";
+
+  return (
+    <SafeAreaView className="flex-row bg-[#157DC1]" {...props}>
+      {isSearchScreen && (
+        <Link href="/(tabs)/home" asChild>
+          <Button
+            avoidInnerPadding
+            animateLayout
+            paddingL-s4
+            bg-transparent
+            centerH
+            iconSource={() => (
+              <MaterialIcons name="arrow-back-ios" size={24} color="white" />
+            )}
+          />
+        </Link>
+      )}
+      <Link href="/search" asChild disabled={isSearchScreen}>
+        <Button
+          avoidInnerPadding
+          flex-1
+          bg-transparent
+          disabledBackgroundColor="transparent"
+          animateLayout
+        >
+          <TextField
+            placeholder="Search"
+            containerStyle={{
+              backgroundColor: "white",
+              marginHorizontal: 10,
+              marginVertical: 20,
+              height: 30,
+              borderRadius: 8,
+              flex: 1,
+            }}
+            fieldStyle={{
+              marginLeft: 10,
+            }}
+            readonly={!isSearchScreen}
+            // onChangeText={onChangeText}
+            enableErrors
+            // validate={["required", "email", (value) => value.length > 6]}
+            // validationMessage={[
+            //   "Field is required",
+            //   "Email is invalid",
+            //   "Password is too short",
+            // ]}
+            maxLength={30}
+          />
+        </Button>
+      </Link>
+      {/* </View> */}
+    </SafeAreaView>
+  );
+}