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

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

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