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, withTiming,
} from "react-native-reanimated"; } from "react-native-reanimated";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { View } from "tamagui"; import { View, XStack } from "tamagui";
import { getMediaPoster, searchTitle } from "@movie-web/tmdb"; import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
@@ -99,44 +99,46 @@ export default function SearchScreen() {
return ( return (
<ScreenLayout> <ScreenLayout>
<ScrollView <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>
</ScrollView> </View>
<Animated.View </ScrollView>
style={[ <Animated.View
{ style={[
position: "relative", {
bottom: 0, position: "absolute",
left: 0, bottom: 0,
right: 0, left: 0,
}, right: 0,
animatedStyle, },
]} animatedStyle,
> ]}
<SearchBar onSearchChange={setQuery} /> >
</Animated.View> <SearchBar onSearchChange={setQuery} />
</Animated.View>
</XStack>
</ScreenLayout> </ScreenLayout>
); );
} }