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) => }