From 07b9f7cd4b1a5c894722e2bb50e3ee03ae3c3359 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 2 Apr 2024 01:25:59 +0200
Subject: [PATCH] fix: use zstack to keep searchbar visible on search screen

---
 apps/expo/src/app/(tabs)/search.tsx | 80 +++++++++++++++--------------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/search.tsx b/apps/expo/src/app/(tabs)/search.tsx
index e219cd1..5d75ae6 100644
--- a/apps/expo/src/app/(tabs)/search.tsx
+++ b/apps/expo/src/app/(tabs)/search.tsx
@@ -7,7 +7,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useQuery } from "@tanstack/react-query";
-import { View } from "tamagui";
+import { View, XStack } from "tamagui";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
@@ -99,44 +99,46 @@ export default function SearchScreen() {
 
   return (
     <ScreenLayout>
-      <ScrollView
-        onScrollBeginDrag={handleScrollBegin}
-        onMomentumScrollEnd={handleScrollEnd}
-        scrollEnabled={searchResultsLoaded ? true : false}
-        keyboardDismissMode="on-drag"
-        keyboardShouldPersistTaps="handled"
-        contentContainerStyle={{ flexGrow: 1 }}
-      >
-        <View>
-          <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
-            <View flexDirection="row" flexWrap="wrap">
-              {data?.map((item, index) => (
-                <View
-                  key={index}
-                  paddingHorizontal={12}
-                  paddingBottom={12}
-                  width="50%"
-                >
-                  <Item data={item} />
-                </View>
-              ))}
-            </View>
-          </Animated.View>
-        </View>
-      </ScrollView>
-      <Animated.View
-        style={[
-          {
-            position: "relative",
-            bottom: 0,
-            left: 0,
-            right: 0,
-          },
-          animatedStyle,
-        ]}
-      >
-        <SearchBar onSearchChange={setQuery} />
-      </Animated.View>
+      <XStack flex={1}>
+        <ScrollView
+          onScrollBeginDrag={handleScrollBegin}
+          onMomentumScrollEnd={handleScrollEnd}
+          scrollEnabled={searchResultsLoaded ? true : false}
+          keyboardDismissMode="on-drag"
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={{ flexGrow: 1 }}
+        >
+          <View>
+            <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
+              <View flexDirection="row" flexWrap="wrap">
+                {data?.map((item, index) => (
+                  <View
+                    key={index}
+                    paddingHorizontal={12}
+                    paddingBottom={12}
+                    width="50%"
+                  >
+                    <Item data={item} />
+                  </View>
+                ))}
+              </View>
+            </Animated.View>
+          </View>
+        </ScrollView>
+        <Animated.View
+          style={[
+            {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+            },
+            animatedStyle,
+          ]}
+        >
+          <SearchBar onSearchChange={setQuery} />
+        </Animated.View>
+      </XStack>
     </ScreenLayout>
   );
 }