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

feat: searchbar UX

Browse Source
This commit is contained in:
Adrian Castro
2024-02-15 22:13:48 +01:00
parent 4f86d44f35
commit 37360c4277
2 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ export default function Searchbar({
}; };
return ( return (
<View className="mb-6 mt-4 flex-row items-center rounded-full border border-primary-400 focus-within:border-primary-300"> <View className="mb-6 mt-4 flex-row items-center rounded-full border border-primary-400 bg-black focus-within:border-primary-300">
<View className="ml-1 w-12 items-center justify-center"> <View className="ml-1 w-12 items-center justify-center">
<FontAwesome5 name="search" size={18} color={Colors.secondary[200]} /> <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
</View> </View>

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

@@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { ScrollView, View } from "react-native"; import { Animated, ScrollView, View } from "react-native";
import { getMediaPoster, searchTitle } from "@movie-web/tmdb"; import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
@@ -11,6 +11,7 @@ import Searchbar from "./Searchbar";
export default function SearchScreen() { export default function SearchScreen() {
const [searchResults, setSearchResults] = useState<ItemData[]>([]); const [searchResults, setSearchResults] = useState<ItemData[]>([]);
const fadeAnim = useRef(new Animated.Value(1)).current;
const handleSearchChange = async (query: string) => { const handleSearchChange = async (query: string) => {
if (query.length > 0) { if (query.length > 0) {
@@ -21,28 +22,58 @@ export default function SearchScreen() {
} }
}; };
const handleScrollBegin = () => {
Animated.timing(fadeAnim, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start();
};
const handleScrollEnd = () => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
};
return ( return (
<ScrollView <View style={{ flex: 1 }}>
keyboardDismissMode="on-drag" <ScrollView
keyboardShouldPersistTaps="handled" onScrollBeginDrag={handleScrollBegin}
> onMomentumScrollEnd={handleScrollEnd}
<ScreenLayout keyboardDismissMode="on-drag"
title={ keyboardShouldPersistTaps="handled"
<View className="flex-row items-center"> >
<Text className="text-2xl font-bold">Search</Text> <ScreenLayout
title={
<View className="flex-row items-center">
<Text className="text-2xl font-bold">Search</Text>
</View>
}
>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{searchResults.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View> </View>
} </ScreenLayout>
</ScrollView>
<Animated.View
style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
opacity: fadeAnim,
}}
> >
<Searchbar onSearchChange={handleSearchChange} /> <Searchbar onSearchChange={handleSearchChange} />
<View className="flex w-full flex-1 flex-row flex-wrap justify-start"> </Animated.View>
{searchResults.map((item, index) => ( </View>
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
</ScreenLayout>
</ScrollView>
); );
} }