Merge 8f5d0247bb into a3f184979e

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Keyboard } from "react-native";
+import { Keyboard, ScrollView } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -7,7 +7,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useQuery } from "@tanstack/react-query";
-import { View, ZStack } from "tamagui";
+import { View, XStack } from "tamagui";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
@@ -98,46 +98,48 @@ export default function SearchScreen() {
   };
 
   return (
-    <ZStack flex={1}>
+    <ScreenLayout>
-      <ScreenLayout
+      <XStack flex={1}>
-        onScrollBeginDrag={handleScrollBegin}
+        <ScrollView
-        onMomentumScrollEnd={handleScrollEnd}
+          onScrollBeginDrag={handleScrollBegin}
-        scrollEnabled={searchResultsLoaded ? true : false}
+          onMomentumScrollEnd={handleScrollEnd}
-        keyboardDismissMode="on-drag"
+          scrollEnabled={searchResultsLoaded ? true : false}
-        keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag"
-        contentContainerStyle={{ flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
-      >
+          contentContainerStyle={{ flexGrow: 1 }}
-        <View>
+        >
-          <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
+          <View>
-            <View flexDirection="row" flexWrap="wrap">
+            <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
-              {data?.map((item, index) => (
+              <View flexDirection="row" flexWrap="wrap">
-                <View
+                {data?.map((item, index) => (
-                  key={index}
+                  <View
-                  paddingHorizontal={12}
+                    key={index}
-                  paddingBottom={12}
+                    paddingHorizontal={12}
-                  width="50%"
+                    paddingBottom={12}
-                >
+                    width="50%"
-                  <Item data={item} />
+                  >
-                </View>
+                    <Item data={item} />
-              ))}
+                  </View>
-            </View>
+                ))}
-          </Animated.View>
+              </View>
-        </View>
+            </Animated.View>
-      </ScreenLayout>
+          </View>
-      <Animated.View
+        </ScrollView>
-        style={[
+        <Animated.View
-          {
+          style={[
-            position: "absolute",
+            {
-            bottom: 5,
+              position: "absolute",
-            left: 0,
+              bottom: 0,
-            right: 0,
+              left: 0,
-          },
+              right: 0,
-          animatedStyle,
+            },
-        ]}
+            animatedStyle,
-      >
+          ]}
-        <SearchBar onSearchChange={setQuery} />
+        >
-      </Animated.View>
+          <SearchBar onSearchChange={setQuery} />
-    </ZStack>
+        </Animated.View>
+      </XStack>
+    </ScreenLayout>
   );
 }
 

apps/expo/src/components/layout/ScreenLayout.tsx

@@ -5,23 +5,9 @@ import { Header } from "./Header";
 
 interface Props {
   children?: React.ReactNode;
-  onScrollBeginDrag?: () => void;
-  onMomentumScrollEnd?: () => void;
-  scrollEnabled?: boolean;
-  keyboardDismissMode?: "none" | "on-drag" | "interactive";
-  keyboardShouldPersistTaps?: "always" | "never" | "handled";
-  contentContainerStyle?: Record<string, unknown>;
 }
 
-export default function ScreenLayout({
+export default function ScreenLayout({ children }: Props) {
-  children,
-  onScrollBeginDrag,
-  onMomentumScrollEnd,
-  scrollEnabled,
-  keyboardDismissMode,
-  keyboardShouldPersistTaps,
-  contentContainerStyle,
-}: Props) {
   return (
     <LinearGradient
       flex={1}
@@ -41,12 +27,6 @@ export default function ScreenLayout({
     >
       <Header />
       <ScrollView
-        onScrollBeginDrag={onScrollBeginDrag}
-        onMomentumScrollEnd={onMomentumScrollEnd}
-        scrollEnabled={scrollEnabled}
-        keyboardDismissMode={keyboardDismissMode}
-        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-        contentContainerStyle={contentContainerStyle}
         marginTop="$4"
         flexGrow={1}
         showsVerticalScrollIndicator={false}