refactor to tamagui

apps/expo/src/components/ui/Searchbar.tsx

@@ -1,18 +1,30 @@
 import { useContext, useEffect, useRef, useState } from "react";
-import { TextInput, View } from "react-native";
+import { Keyboard } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
-
-import { defaultTheme } from "@movie-web/tailwind-config/themes";
+import { Input, styled, useTheme, View } from "tamagui";
 
 import SearchTabContext from "./SearchTabContext";
 
+const SearchInput = styled(Input, {
+  backgroundColor: "$searchBackground",
+  borderColor: "$colorTransparent",
+  placeholderTextColor: "$searchPlaceholder",
+  outlineStyle: "none",
+  focusStyle: {
+    borderColor: "$colorTransparent",
+    backgroundColor: "$searchFocused",
+  },
+});
+
 export function SearchBar({
   onSearchChange,
 }: {
   onSearchChange: (text: string) => void;
 }) {
+  const theme = useTheme();
   const [keyword, setKeyword] = useState("");
-  const inputRef = useRef<TextInput>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<Input>(null);
 
   const { focusSearchInputRef } = useContext(SearchTabContext);
 
@@ -22,27 +34,49 @@ export function SearchBar({
     };
   }, [focusSearchInputRef]);
 
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      () => {
+        setIsFocused(true);
+      },
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      () => {
+        setIsFocused(false);
+      },
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
   const handleChange = (text: string) => {
     setKeyword(text);
     onSearchChange(text);
   };
 
   return (
-    <View className="border-primary-400 focus-within:border-primary-300 mb-6 mt-4 flex-row items-center rounded-full border bg-black">
-      <View className="ml-1 w-12 items-center justify-center">
-        <FontAwesome5
-          name="search"
-          size={18}
-          color={defaultTheme.extend.colors.search.icon}
-        />
+    <View
+      marginBottom={12}
+      flexDirection="row"
+      alignItems="center"
+      borderRadius={999}
+      borderWidth={1}
+      backgroundColor={isFocused ? theme.searchFocused : theme.searchBackground}
+    >
+      <View width={48} alignItems="center" justifyContent="center">
+        <FontAwesome5 name="search" size={18} color={theme.searchIcon.val} />
       </View>
-      <TextInput
+      <SearchInput
         value={keyword}
         onChangeText={handleChange}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={defaultTheme.extend.colors.search.placeholder}
-        className="w-full rounded-3xl py-3 pr-5 text-white"
+        width="80%"
       />
     </View>
   );