feat: searchbar UX

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

@@ -32,7 +32,7 @@ export default function Searchbar({
   };
 
   return (
-    <View className="mb-6 mt-4 flex-row items-center rounded-full border border-primary-400 focus-within:border-primary-300">
+    <View className="mb-6 mt-4 flex-row items-center rounded-full border border-primary-400 bg-black focus-within:border-primary-300">
       <View className="ml-1 w-12 items-center justify-center">
         <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
       </View>

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

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { Animated, ScrollView, View } from "react-native";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
@@ -11,6 +11,7 @@ import Searchbar from "./Searchbar";
 
 export default function SearchScreen() {
   const [searchResults, setSearchResults] = useState<ItemData[]>([]);
+  const fadeAnim = useRef(new Animated.Value(1)).current;
 
   const handleSearchChange = async (query: string) => {
     if (query.length > 0) {
@@ -21,8 +22,27 @@ export default function SearchScreen() {
     }
   };
 
+  const handleScrollBegin = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handleScrollEnd = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
   return (
+    <View style={{ flex: 1 }}>
       <ScrollView
+        onScrollBeginDrag={handleScrollBegin}
+        onMomentumScrollEnd={handleScrollEnd}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
       >
@@ -33,7 +53,6 @@ export default function SearchScreen() {
             </View>
           }
         >
-        <Searchbar onSearchChange={handleSearchChange} />
           <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
             {searchResults.map((item, index) => (
               <View key={index} className="basis-1/2 px-3 pb-3">
@@ -43,6 +62,18 @@ export default function SearchScreen() {
           </View>
         </ScreenLayout>
       </ScrollView>
+      <Animated.View
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          opacity: fadeAnim,
+        }}
+      >
+        <Searchbar onSearchChange={handleSearchChange} />
+      </Animated.View>
+    </View>
   );
 }