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

fix: use zstack to keep searchbar visible on search screen

Browse Source
This commit is contained in:
Adrian Castro
2024-04-02 01:25:59 +02:00
parent 6a4a19a41c
commit 07b9f7cd4b
1 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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