movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 12:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: searchbar actually shows up again

Browse Source
This commit is contained in:
Adrian Castro
2024-04-07 19:35:26 +02:00
parent 8f5d0247bb
commit 1ab4b7cec5
2 changed files with 63 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
apps/expo/src/app/(tabs)/search.tsx
View File

@@ -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,48 +98,46 @@ export default function SearchScreen() {
};
return (
<ScreenLayout>
<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>
<ZStack flex={1}>
<ScreenLayout
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>
</ScreenLayout>
<Animated.View
style={[
{
position: "absolute",
bottom: 5,
left: 0,
right: 0,
},
animatedStyle,
]}
>
<SearchBar onSearchChange={setQuery} />
</Animated.View>
</ZStack>
);
}

22
apps/expo/src/components/layout/ScreenLayout.tsx
View File

@@ -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}