diff --git a/front/apps/mobile/app/(app)/index.tsx b/front/apps/mobile/app/(app)/index.tsx index 21c1f3b6..a70766eb 100644 --- a/front/apps/mobile/app/(app)/index.tsx +++ b/front/apps/mobile/app/(app)/index.tsx @@ -18,7 +18,10 @@ * along with Kyoo. If not, see . */ -import { HomePage, BrowsePage } from "@kyoo/ui"; +import { HomePage } from "@kyoo/ui"; import { withRoute } from "../utils"; -export default withRoute(BrowsePage); +export default withRoute(HomePage, { + options: { headerTransparent: true, headerStyle: { backgroundColor: "transparent" } }, + statusBar: { barStyle: "light-content" }, +}); diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx index cdb4da9b..adfe2804 100644 --- a/front/packages/ui/src/fetch-infinite.tsx +++ b/front/packages/ui/src/fetch-infinite.tsx @@ -23,7 +23,7 @@ import { useBreakpointMap, HR } from "@kyoo/primitives"; import { ContentStyle, FlashList } from "@shopify/flash-list"; import { ComponentProps, ComponentType, isValidElement, ReactElement, useRef } from "react"; import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch"; -import { View, ViewStyle } from "react-native"; +import { FlatList, View, ViewStyle } from "react-native"; const emulateGap = ( layout: "grid" | "vertical" | "horizontal", @@ -64,6 +64,7 @@ export const InfiniteFetchList = ({ headerProps, getItemType, fetchMore = true, + nested = false, contentContainerStyle, ...props }: { @@ -82,6 +83,7 @@ export const InfiniteFetchList = ({ headerProps?: Props; getItemType?: (item: WithLoading, index: number) => string | number; fetchMore?: boolean; + nested?: boolean; contentContainerStyle?: ContentStyle; }): JSX.Element | null => { const { numColumns, size, gap } = useBreakpointMap(layout); @@ -101,10 +103,12 @@ export const InfiniteFetchList = ({ (_, i) => ({ id: `gen${i}`, isLoading: true }) as Data, ); + const List = nested ? FlatList as unknown as typeof FlashList : FlashList; + // @ts-ignore if (headerProps && !isValidElement(Header)) Header =
; return ( - ({ ItemSeparatorComponent={divider === true ? HR : divider || null} ListHeaderComponent={Header} getItemType={getItemType} + nestedScrollEnabled={nested} + scrollEnabled={!nested} {...props} /> ); diff --git a/front/packages/ui/src/home/recommanded.tsx b/front/packages/ui/src/home/recommanded.tsx index c4b31e85..7488a10a 100644 --- a/front/packages/ui/src/home/recommanded.tsx +++ b/front/packages/ui/src/home/recommanded.tsx @@ -226,6 +226,7 @@ export const Recommanded = () => { layout={ItemDetails.layout} placeholderCount={6} fetchMore={false} + nested contentContainerStyle={{ padding: 0, paddingHorizontal: 0 }} > {(x) => ( diff --git a/front/packages/ui/src/home/vertical.tsx b/front/packages/ui/src/home/vertical.tsx index f0fcf2ac..b8a7b526 100644 --- a/front/packages/ui/src/home/vertical.tsx +++ b/front/packages/ui/src/home/vertical.tsx @@ -18,8 +18,8 @@ * along with Kyoo. If not, see . */ -import { ItemKind, LibraryItem, LibraryItemP, QueryIdentifier, getDisplayDate } from "@kyoo/models"; -import { H3, ts } from "@kyoo/primitives"; +import { LibraryItem, LibraryItemP, QueryIdentifier } from "@kyoo/models"; +import { H3 } from "@kyoo/primitives"; import { View } from "react-native"; import { useYoshiki } from "yoshiki/native"; import { InfiniteFetch } from "../fetch-infinite"; @@ -40,6 +40,7 @@ export const VerticalRecommanded = () => { placeholderCount={3} layout={{ ...ItemList.layout, layout: "vertical" }} fetchMore={false} + nested > {(x, i) => }