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

feat: horizontal scroll for ItemListSection

Browse Source
This commit is contained in:
Adrian Castro
2024-03-08 09:14:39 +01:00
parent eb9589b0f7
commit 17b343f889
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,7 +107,7 @@ export default function HomeScreenContent() {
<ScrollView <ScrollView
onScrollBeginDrag={handleScrollBegin} onScrollBeginDrag={handleScrollBegin}
onMomentumScrollEnd={handleScrollEnd} onMomentumScrollEnd={handleScrollEnd}
scrollEnabled={data && data.length > 0 ? true : false} scrollEnabled={searchResultsLoaded ? true : false}
keyboardDismissMode="on-drag" keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled" keyboardShouldPersistTaps="handled"
> >
@@ -134,8 +134,14 @@ export default function HomeScreenContent() {
bookmarks.length > 0 || watching.length > 0 ? true : false bookmarks.length > 0 || watching.length > 0 ? true : false
} }
> >
<ItemListSection title="Bookmarks" items={bookmarks} /> <ItemListSection
<ItemListSection title="Continue Watching" items={watching} /> title="Bookmarks"
items={bookmarks.concat(watching)}
/>
<ItemListSection
title="Continue Watching"
items={watching.concat(bookmarks)}
/>
</ScrollView> </ScrollView>
)} )}
</ScreenLayout> </ScreenLayout>

23
apps/expo/src/components/item/ItemListSection.tsx
View File

@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Text, View } from "react-native"; import { Dimensions, ScrollView, Text, View } from "react-native";
import type { ItemData } from "~/components/item/item"; import type { ItemData } from "~/components/item/item";
import Item from "~/components/item/item"; import Item from "~/components/item/item";
@@ -42,6 +42,10 @@ export const watching: ItemData[] = [
}, },
]; ];
const padding = 20;
const screenWidth = Dimensions.get("window").width;
const itemWidth = screenWidth / 2.3 - padding;
export const ItemListSection = ({ export const ItemListSection = ({
title, title,
items, items,
@@ -54,13 +58,24 @@ export const ItemListSection = ({
<Text className="mb-2 mt-4 text-xl font-semibold text-white"> <Text className="mb-2 mt-4 text-xl font-semibold text-white">
{title} {title}
</Text> </Text>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start"> <ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 3 }}
>
{items.map((item, index) => ( {items.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3"> <View
key={index}
style={{
width: itemWidth,
paddingHorizontal: padding / 2,
paddingBottom: padding,
}}
>
<Item data={item} /> <Item data={item} />
</View> </View>
))} ))}
</View> </ScrollView>
</View> </View>
); );
}; };