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

fix: update state properly

Browse Source
This commit is contained in:
Adrian Castro
2024-03-05 18:37:32 +01:00
parent c61522c222
commit 7d1d8ce84d
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,8 @@ export default function SearchScreen() {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const translateY = useSharedValue(0); const translateY = useSharedValue(0);
const fadeAnim = useSharedValue(1); const fadeAnim = useSharedValue(1);
const searchResultsOpacity = useSharedValue(0);
const searchResultsScale = useSharedValue(0.95);
const [searchResultsLoaded, setSearchResultsLoaded] = useState(false); const [searchResultsLoaded, setSearchResultsLoaded] = useState(false);
const { data, isSuccess } = useQuery({ const { data, isSuccess } = useQuery({
@@ -34,11 +36,15 @@ export default function SearchScreen() {
useEffect(() => { useEffect(() => {
if (isSuccess && data && data.length > 0) { if (isSuccess && data && data.length > 0) {
searchResultsOpacity.value = withTiming(1, { duration: 500 });
searchResultsScale.value = withTiming(1, { duration: 500 });
setSearchResultsLoaded(true); setSearchResultsLoaded(true);
} else { } else if (!query) {
searchResultsOpacity.value = 0;
searchResultsScale.value = 0.95;
setSearchResultsLoaded(false); setSearchResultsLoaded(false);
} }
}, [data, isSuccess]); }, [data, isSuccess, query, searchResultsOpacity, searchResultsScale]);
useEffect(() => { useEffect(() => {
const keyboardWillShowListener = Keyboard.addListener( const keyboardWillShowListener = Keyboard.addListener(
@@ -77,6 +83,13 @@ export default function SearchScreen() {
}; };
}); });
const searchResultsStyle = useAnimatedStyle(() => {
return {
opacity: searchResultsOpacity.value,
transform: [{ scale: searchResultsScale.value }],
};
});
const handleScrollBegin = () => { const handleScrollBegin = () => {
fadeAnim.value = withTiming(0, { fadeAnim.value = withTiming(0, {
duration: 100, duration: 100,
@@ -106,13 +119,15 @@ export default function SearchScreen() {
} }
> >
{searchResultsLoaded ? ( {searchResultsLoaded ? (
<View className="flex w-full flex-1 flex-row flex-wrap justify-start"> <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
{data?.map((item, index) => ( <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
<View key={index} className="basis-1/2 px-3 pb-3"> {data?.map((item, index) => (
<Item data={item} /> <View key={index} className="basis-1/2 px-3 pb-3">
</View> <Item data={item} />
))} </View>
</View> ))}
</View>
</Animated.View>
) : ( ) : (
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<ItemListSection title="Bookmarks" items={bookmarks} /> <ItemListSection title="Bookmarks" items={bookmarks} />