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

fix home title fontSize

Browse Source
This commit is contained in:
Jorrin
2024-03-24 20:54:29 +01:00
parent 5c18ff934c
commit 7160d3c137
2 changed files with 2 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/expo/src/app/(tabs)/index.tsx
View File

@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Text, View } from "tamagui"; import { View } from "tamagui";
import { import {
bookmarks, bookmarks,
@@ -11,15 +11,7 @@ import ScreenLayout from "~/components/layout/ScreenLayout";
export default function HomeScreen() { export default function HomeScreen() {
return ( return (
<View style={{ flex: 1 }} flex={1}> <View style={{ flex: 1 }} flex={1}>
<ScreenLayout <ScreenLayout title="Home">
title={
<View flexDirection="row" alignItems="center">
<Text fontWeight="bold" fontSize={20}>
Home
</Text>
</View>
}
>
<ItemListSection title="Bookmarks" items={bookmarks.concat(watching)} /> <ItemListSection title="Bookmarks" items={bookmarks.concat(watching)} />
<ItemListSection <ItemListSection
title="Continue Watching" title="Continue Watching"

180
apps/expo/src/components/HomeScreenContent.tsx
View File

@@ -1,180 +0,0 @@
import React, { useEffect, useState } from "react";
import { Keyboard } from "react-native";
import Animated, {
Easing,
useAnimatedStyle,
useSharedValue,
withTiming,
} from "react-native-reanimated";
import { useQuery } from "@tanstack/react-query";
import { ScrollView, Text, View } from "tamagui";
import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
import type { ItemData } from "~/components/item/item";
import Item from "~/components/item/item";
import {
bookmarks,
ItemListSection,
watching,
} from "~/components/item/ItemListSection";
import ScreenLayout from "~/components/layout/ScreenLayout";
import { SearchBar } from "~/components/ui/Searchbar";
export default function HomeScreenContent() {
const [query, setQuery] = useState("");
const translateY = useSharedValue(0);
const fadeAnim = useSharedValue(1);
const searchResultsOpacity = useSharedValue(0);
const searchResultsScale = useSharedValue(0.95);
const [searchResultsLoaded, setSearchResultsLoaded] = useState(false);
const { data } = useQuery({
queryKey: ["searchResults", query],
queryFn: () => fetchSearchResults(query),
});
useEffect(() => {
if (data && data.length > 0 && query) {
searchResultsOpacity.value = withTiming(1, { duration: 500 });
searchResultsScale.value = withTiming(1, { duration: 500 });
setSearchResultsLoaded(true);
} else if (!query) {
searchResultsOpacity.value = withTiming(0, { duration: 500 });
searchResultsScale.value = withTiming(0.95, { duration: 500 });
setSearchResultsLoaded(false);
}
}, [data, query, searchResultsOpacity, searchResultsScale]);
useEffect(() => {
const keyboardWillShowListener = Keyboard.addListener(
"keyboardWillShow",
(e) => {
translateY.value = withTiming(
-(e.endCoordinates.height - 110), // determines the height of the Searchbar above keyboard, use Platform.select to adjust value if needed
{
duration: e.duration ?? 250, // duration always returns 0 on Android, adjust value if needed
easing: Easing.out(Easing.ease),
},
);
},
);
const keyboardWillHideListener = Keyboard.addListener(
"keyboardWillHide",
() => {
translateY.value = withTiming(0, {
duration: 250,
easing: Easing.out(Easing.ease),
});
},
);
return () => {
keyboardWillShowListener.remove();
keyboardWillHideListener.remove();
};
}, [translateY]);
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ translateY: translateY.value }],
opacity: fadeAnim.value,
};
});
const searchResultsStyle = useAnimatedStyle(() => {
return {
opacity: searchResultsOpacity.value,
transform: [{ scale: searchResultsScale.value }],
};
});
const handleScrollBegin = () => {
fadeAnim.value = withTiming(0, {
duration: 100,
});
};
const handleScrollEnd = () => {
fadeAnim.value = withTiming(1, {
duration: 100,
});
};
return (
<View flex={1}>
<ScrollView
onScrollBeginDrag={handleScrollBegin}
onMomentumScrollEnd={handleScrollEnd}
scrollEnabled={searchResultsLoaded ? true : false}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled"
>
<ScreenLayout
title={
<View flexDirection="row" alignItems="center">
<Text fontWeight="bold" fontSize={20}>
Home
</Text>
</View>
}
>
{searchResultsLoaded ? (
<Animated.View style={[searchResultsStyle, { flex: 1 }]}>
<View
width="100%"
flexWrap="wrap"
justifyContent="flex-start"
flexDirection="row"
>
{data?.map((item, index) => (
<View key={index} flexBasis={1 / 2} paddingHorizontal={12}>
<Item data={item} />
</View>
))}
</View>
</Animated.View>
) : (
<ScrollView
scrollEnabled={
bookmarks.length > 0 || watching.length > 0 ? true : false
}
>
<ItemListSection
title="Bookmarks"
items={bookmarks.concat(watching)}
/>
<ItemListSection
title="Continue Watching"
items={watching.concat(bookmarks)}
/>
</ScrollView>
)}
</ScreenLayout>
</ScrollView>
<Animated.View
style={[
{ position: "absolute", left: 0, right: 0, bottom: 0 },
animatedStyle,
]}
>
<SearchBar onSearchChange={setQuery} />
</Animated.View>
</View>
);
}
async function fetchSearchResults(query: string): Promise<ItemData[]> {
const results = await searchTitle(query);
return results.map((result) => ({
id: result.id.toString(),
title: result.media_type === "tv" ? result.name : result.title,
posterUrl: getMediaPoster(result.poster_path),
year: new Date(
result.media_type === "tv" ? result.first_air_date : result.release_date,
).getFullYear(),
type: result.media_type,
}));
}