refactor to turbo

apps/expo/src/app/(tabs)/search/Searchbar.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useRef, useState } from "react";
+import { View } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+import { useFocusEffect } from "expo-router";
+import { FontAwesome5 } from "@expo/vector-icons";
+
+import Colors from "@movie-web/tailwind-config/colors";
+
+export default function Searchbar() {
+  const [keyword, setKeyword] = useState("");
+  const inputRef = useRef<TextInput>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      // When the screen is focused
+      const focus = () => {
+        setTimeout(() => {
+          inputRef?.current?.focus();
+        }, 20);
+      };
+      focus();
+      return focus; // cleanup
+    }, []),
+  );
+
+  return (
+    <View className="border-primary-400 focus-within:border-primary-300 mb-6 mt-4 flex-row items-center rounded-full border">
+      <View className="ml-1 w-12 items-center justify-center">
+        <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
+      </View>
+      <TextInput
+        value={keyword}
+        onChangeText={(text) => setKeyword(text)}
+        ref={inputRef}
+        placeholder="What are you looking for?"
+        placeholderTextColor={Colors.secondary[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white focus-visible:outline-none"
+      />
+    </View>
+  );
+}

apps/expo/src/app/(tabs)/search/_layout.tsx

@@ -0,0 +1,34 @@
+import { ScrollView, View } from "react-native";
+
+import Item from "~/components/item/item";
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+import Searchbar from "./Searchbar";
+
+export default function SearchScreen() {
+  return (
+    <ScrollView>
+      <ScreenLayout
+        title={
+          <View className="flex-row items-center">
+            <Text className="text-2xl font-bold">Search</Text>
+          </View>
+        }
+        subtitle="Looking for something?"
+      >
+        <Searchbar />
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+        </View>
+      </ScreenLayout>
+    </ScrollView>
+  );
+}