Merge 1ab4b7cec5 into a3f184979e

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Keyboard, ScrollView } from "react-native";
+import { Keyboard } 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, XStack } from "tamagui";
+import { View, ZStack } from "tamagui";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
@@ -98,9 +98,8 @@ export default function SearchScreen() {
   };
 
   return (
-    <ScreenLayout>
-      <XStack flex={1}>
-        <ScrollView
+    <ZStack flex={1}>
+      <ScreenLayout
         onScrollBeginDrag={handleScrollBegin}
         onMomentumScrollEnd={handleScrollEnd}
         scrollEnabled={searchResultsLoaded ? true : false}
@@ -124,12 +123,12 @@ export default function SearchScreen() {
             </View>
           </Animated.View>
         </View>
-        </ScrollView>
+      </ScreenLayout>
       <Animated.View
         style={[
           {
             position: "absolute",
-              bottom: 0,
+            bottom: 5,
             left: 0,
             right: 0,
           },
@@ -138,8 +137,7 @@ export default function SearchScreen() {
       >
         <SearchBar onSearchChange={setQuery} />
       </Animated.View>
-      </XStack>
-    </ScreenLayout>
+    </ZStack>
   );
 }
 

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

@@ -5,9 +5,23 @@ 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({ children }: Props) {
+export default function ScreenLayout({
+  children,
+  onScrollBeginDrag,
+  onMomentumScrollEnd,
+  scrollEnabled,
+  keyboardDismissMode,
+  keyboardShouldPersistTaps,
+  contentContainerStyle,
+}: Props) {
   return (
     <LinearGradient
       flex={1}
@@ -27,6 +41,12 @@ export default function ScreenLayout({ children }: Props) {
     >
       <Header />
       <ScrollView
+        onScrollBeginDrag={onScrollBeginDrag}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        scrollEnabled={scrollEnabled}
+        keyboardDismissMode={keyboardDismissMode}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        contentContainerStyle={contentContainerStyle}
         marginTop="$4"
         flexGrow={1}
         showsVerticalScrollIndicator={false}