Support nested infinite lists on android

front/apps/mobile/app/(app)/index.tsx

@@ -18,7 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-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" },
+});

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 = <Data, Props, _>({
 	headerProps,
 	getItemType,
 	fetchMore = true,
+	nested = false,
 	contentContainerStyle,
 	...props
 }: {
@@ -82,6 +83,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 	headerProps?: Props;
 	getItemType?: (item: WithLoading<Data>, 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 = <Data, Props, _>({
 		(_, 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 = <Header {...headerProps} />;
 	return (
-		<FlashList
+		<List
 			contentContainerStyle={{
 				paddingHorizontal: layout.layout !== "vertical" ? gap : 0,
 				...contentContainerStyle,
@@ -126,6 +130,8 @@ export const InfiniteFetchList = <Data, Props, _>({
 			ItemSeparatorComponent={divider === true ? HR : divider || null}
 			ListHeaderComponent={Header}
 			getItemType={getItemType}
+			nestedScrollEnabled={nested}
+			scrollEnabled={!nested}
 			{...props}
 		/>
 	);

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

front/packages/ui/src/home/vertical.tsx

@@ -18,8 +18,8 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-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) => <ItemList key={x.id ?? i} {...itemMap(x)} />}
 			</InfiniteFetch>