@legendapp/list 2.0.0-next.1 → 2.0.0-next.2

package/example/package.json

@@ -0,0 +1,73 @@
+{
+    "name": "list-test",
+    "license": "MIT",
+    "main": "expo-router/entry",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "expo start",
+        "android": "expo run:android",
+        "android:release": "RELEASE=TRUE expo run:android --variant release",
+        "android-o": "OLD_ARCH=TRUE expo run:android",
+        "android-o:release": "RELEASE=TRUE OLD_ARCH=TRUE expo run:android --variant release",
+        "ios": "expo run:ios",
+        "ios-o": "OLD_ARCH=TRUE expo run:ios",
+        "web": "expo start --web",
+        "test": "jest --watchAll",
+        "lint": "expo lint",
+        "prebuild:clean": "rm -rf ios android && npx expo prebuild --clean && npx expo prebuild",
+        "prebuild-o:clean": "rm -rf ios android && OLD_ARCH=TRUE npx expo prebuild --clean && OLD_ARCH=TRUE npx expo prebuild"
+    },
+    "jest": {
+        "preset": "jest-expo"
+    },
+    "dependencies": {
+        "@expo/vector-icons": "^14.1.0",
+        "@legendapp/motion": "^2.4.0",
+        "@legendapp/state": "^3.0.0-beta.19",
+        "@react-navigation/bottom-tabs": "^7.3.10",
+        "@react-navigation/native": "^7.1.6",
+        "@shopify/flash-list": "1.7.6",
+        "babel-plugin-react-compiler": "^19.1.0-rc.2",
+        "countries-list": "^3.1.1",
+        "expo": "^53.0.11",
+        "expo-atlas": "^0.4.0",
+        "expo-blur": "~14.1.5",
+        "expo-constants": "~17.1.6",
+        "expo-dev-client": "~5.2.0",
+        "expo-font": "~13.3.1",
+        "expo-haptics": "~14.1.4",
+        "expo-linear-gradient": "~14.1.5",
+        "expo-linking": "~7.1.5",
+        "expo-router": "~5.1.0",
+        "expo-splash-screen": "~0.30.9",
+        "expo-status-bar": "~2.2.3",
+        "expo-symbols": "~0.4.5",
+        "expo-system-ui": "~5.0.8",
+        "expo-web-browser": "~14.1.6",
+        "react": "19.0.0",
+        "react-compiler-runtime": "^19.1.0-rc.2",
+        "react-dom": "19.0.0",
+        "react-native": "0.79.3",
+        "react-native-gesture-handler": "~2.24.0",
+        "react-native-keyboard-controller": "^1.17.4",
+        "react-native-reanimated": "~3.17.4",
+        "react-native-redash": "^18.1.3",
+        "react-native-safe-area-context": "5.4.0",
+        "react-native-screens": "~4.11.1",
+        "react-native-web": "^0.20.0",
+        "react-native-webview": "13.13.5"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.27.4",
+        "@react-native-community/cli": "latest",
+        "@types/expo__vector-icons": "^10.0.2",
+        "@types/jest": "^29.5.14",
+        "@types/react": "~19.0.10",
+        "@types/react-test-renderer": "^19.0.0",
+        "jest": "~29.7.0",
+        "jest-expo": "~53.0.7",
+        "react-test-renderer": "19.0.0",
+        "typescript": "~5.8.3"
+    },
+    "private": true
+}

package/example/scripts/reset-project.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const root = process.cwd();
+const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
+const newDir = "app-example";
+const newAppDir = "app";
+const newDirPath = path.join(root, newDir);
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const moveDirectories = async () => {
+  try {
+    // Create the app-example directory
+    await fs.promises.mkdir(newDirPath, { recursive: true });
+    console.log(`📁 /${newDir} directory created.`);
+
+    // Move old directories to new app-example directory
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      const newDirPath = path.join(root, newDir, dir);
+      if (fs.existsSync(oldDirPath)) {
+        await fs.promises.rename(oldDirPath, newDirPath);
+        console.log(`➡️ /${dir} moved to /${newDir}/${dir}.`);
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log("\n📁 New /app directory created.");
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, "index.tsx");
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log("📄 app/index.tsx created.");
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log("📄 app/_layout.tsx created.");
+
+    console.log("\n✅ Project reset complete. Next steps:");
+    console.log(
+      "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it."
+    );
+  } catch (error) {
+    console.error(`Error during script execution: ${error}`);
+  }
+};
+
+moveDirectories();

package/example/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "extends": "expo/tsconfig.base",
+    "compilerOptions": {
+        "strict": true,
+        "paths": {
+            "@/*": [
+                "./*"
+            ],
+            "@legendapp/list": [
+                "../src/index"
+            ],
+            "@legendapp/list/keyboard-controller": [
+                "../src/keyboard-controller"
+            ],
+            "@legendapp/list/reanimated": [
+                "../src/reanimated"
+            ]
+        }
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+        ".expo/types/**/*.ts",
+        "expo-env.d.ts"
+    ],
+}

package/package.json

@@ -1,35 +1,89 @@
 {
-  "name": "@legendapp/list",
-  "version": "2.0.0-next.1",
-  "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
-  "sideEffects": false,
-  "private": false,
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "files": [
-    "**"
-  ],
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
-  "author": "Legend <contact@legendapp.com> (https://github.com/LegendApp)",
-  "keywords": [
-    "react",
-    "react-native",
-    "list"
-  ],
-  "repository": "github:LegendApp/legend-list",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/LegendApp/legend-list/issues"
-  },
-  "homepage": "https://github.com/LegendApp/legend-list#readme",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "use-sync-external-store": "^1.5.0"
-  }
-}
+    "name": "@legendapp/list",
+    "version": "2.0.0-next.2",
+    "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
+    "sideEffects": false,
+    "private": false,
+    "main": "./index.js",
+    "module": "./index.mjs",
+    "types": "./index.d.ts",
+    "files": [
+        "**"
+    ],
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./index.d.ts",
+            "import": "./index.mjs",
+            "require": "./index.js"
+        },
+        "./animated": {
+            "types": "./animated.d.ts",
+            "import": "./animated.mjs",
+            "require": "./animated.js"
+        },
+        "./reanimated": {
+            "types": "./reanimated.d.ts",
+            "import": "./reanimated.mjs",
+            "require": "./reanimated.js"
+        },
+        "./keyboard-controller": {
+            "types": "./keyboard-controller.d.ts",
+            "import": "./keyboard-controller.mjs",
+            "require": "./keyboard-controller.js"
+        }
+    },
+    "engines": {
+        "node": ">=16.6.0",
+        "npm": ">=8.11.0"
+    },
+    "scripts": {
+        "build": "tsup && bun run posttsup.ts",
+        "publish": "bun run build && cd dist && npm publish",
+        "publish:next": "bun run build && cd dist && npm publish --tag next",
+        "publish:beta": "bun run build && cd dist && npm publish --tag beta",
+        "lint": "bunx biome check ./src && bunx biome format ./src && bun run lint:example",
+        "lint:example": "bunx biome check ./example/app && bunx biome format ./example/app",
+        "lint:fix": "bunx biome lint --write ./src && bunx biome format --write ./src && bunx biome check --write ./src && bun run lint:fix:example",
+        "lint:fix:example": "bunx biome lint --write ./example/app && bunx biome format --write ./example/app && bunx biome check --write ./example/app"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^1.9.4",
+        "@types/bun": "^1.1.13",
+        "@types/react": "^18.3.12",
+        "@types/use-sync-external-store": "^1.5.0",
+        "react": "^18.3.1",
+        "react-native": "^0.76.2",
+        "react-native-keyboard-controller": "^1.17.0",
+        "react-native-reanimated": "^3.16.6",
+        "tsup": "^8.3.5",
+        "typescript": "^5.8.3"
+    },
+    "author": "Legend <contact@legendapp.com> (https://github.com/LegendApp)",
+    "keywords": [
+        "react",
+        "react-native",
+        "list"
+    ],
+    "repository": "github:LegendApp/legend-list",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/LegendApp/legend-list/issues"
+    },
+    "homepage": "https://github.com/LegendApp/legend-list#readme",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "commitlint": {
+        "extends": [
+            "@commitlint/config-conventional"
+        ]
+    },
+    "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+    }
+}

package/posttsup.ts

@@ -0,0 +1,24 @@
+import pkg from './package.json';
+
+async function copy(...files: string[]) {
+    return files.map((file) => Bun.write('dist/' + file.replace('src/', ''), Bun.file(file), { createPath: true }));
+}
+
+copy('LICENSE', 'CHANGELOG.md', 'README.md');
+
+const exports: Record<string, string | { import?: string; require?: string; types: string }> = {
+    './package.json': './package.json',
+};
+
+const pkgOut = pkg as Record<string, any>;
+
+pkg.private = false;
+pkgOut.exports = exports;
+delete pkgOut.devDependencies;
+delete pkgOut.overrides;
+delete pkgOut.scripts;
+delete pkgOut.engines;
+delete pkgOut.exports;
+delete pkgOut.commitlint;
+
+Bun.write('dist/package.json', JSON.stringify(pkg, undefined, 2));

package/src/Container.tsx

@@ -0,0 +1,176 @@
+// biome-ignore lint/style/useImportType: Leaving this out makes it crash in some environments
+import * as React from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { DimensionValue, LayoutChangeEvent, StyleProp, View, ViewStyle } from "react-native";
+import { ContextContainer, type ContextContainerType } from "./ContextContainer";
+import { LeanView } from "./LeanView";
+import { Separator } from "./Separator";
+import { IsNewArchitecture, POSITION_OUT_OF_VIEW } from "./constants";
+import { isNullOrUndefined } from "./helpers";
+import { useArr$, useStateContext } from "./state";
+import type { GetRenderedItem } from "./types";
+
+export const Container = <ItemT,>({
+    id,
+    recycleItems,
+    horizontal,
+    getRenderedItem,
+    updateItemSize,
+    ItemSeparatorComponent,
+}: {
+    id: number;
+    recycleItems?: boolean;
+    horizontal: boolean;
+    getRenderedItem: GetRenderedItem;
+    updateItemSize: (itemKey: string, size: { width: number; height: number }) => void;
+    ItemSeparatorComponent?: React.ComponentType<{ leadingItem: ItemT }>;
+}) => {
+    const ctx = useStateContext();
+    const columnWrapperStyle = ctx.columnWrapperStyle;
+
+    const [column = 0, data, itemKey, position = POSITION_OUT_OF_VIEW, numColumns, extraData] = useArr$([
+        `containerColumn${id}`,
+        `containerItemData${id}`,
+        `containerItemKey${id}`,
+        `containerPosition${id}`,
+        "numColumns",
+        "extraData",
+    ]);
+
+    const refLastSize = useRef<{ width: number; height: number }>();
+    const ref = useRef<View>(null);
+    const [layoutRenderCount, forceLayoutRender] = useState(0);
+
+    const otherAxisPos: DimensionValue | undefined = numColumns > 1 ? `${((column - 1) / numColumns) * 100}%` : 0;
+    const otherAxisSize: DimensionValue | undefined = numColumns > 1 ? `${(1 / numColumns) * 100}%` : undefined;
+    let didLayout = false;
+
+    let paddingStyles: ViewStyle | undefined;
+    if (columnWrapperStyle) {
+        // Extract gap properties from columnWrapperStyle if available
+        const { columnGap, rowGap, gap } = columnWrapperStyle;
+
+        // Create padding styles for both horizontal and vertical layouts with multiple columns
+        if (horizontal) {
+            paddingStyles = {
+                paddingRight: columnGap || gap || undefined,
+                paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : undefined,
+            };
+        } else {
+            paddingStyles = {
+                paddingBottom: rowGap || gap || undefined,
+                paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : undefined,
+            };
+        }
+    }
+
+    const style: StyleProp<ViewStyle> = horizontal
+        ? {
+              flexDirection: ItemSeparatorComponent ? "row" : undefined,
+              position: "absolute",
+              top: otherAxisPos,
+              height: otherAxisSize,
+              left: position,
+              ...(paddingStyles || {}),
+          }
+        : {
+              position: "absolute",
+              left: otherAxisPos,
+              right: numColumns > 1 ? null : 0,
+              width: otherAxisSize,
+              top: position,
+              ...(paddingStyles || {}),
+          };
+
+    const renderedItemInfo = useMemo(
+        () => (itemKey !== undefined ? getRenderedItem(itemKey) : null),
+        [itemKey, data, extraData],
+    );
+    const { index, renderedItem } = renderedItemInfo || {};
+
+    const triggerLayout = useCallback(() => {
+        forceLayoutRender((v) => v + 1);
+    }, []);
+
+    const contextValue = useMemo<ContextContainerType>(() => {
+        ctx.viewRefs.set(id, ref);
+        return { containerId: id, itemKey, index: index!, value: data, triggerLayout };
+    }, [id, itemKey, index, data]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+        if (!isNullOrUndefined(itemKey)) {
+            didLayout = true;
+            let layout: { width: number; height: number } = event.nativeEvent.layout;
+            const size = layout[horizontal ? "width" : "height"];
+
+            const doUpdate = () => {
+                refLastSize.current = { width: layout.width, height: layout.height };
+                updateItemSize(itemKey, layout);
+            };
+
+            if (IsNewArchitecture || size > 0) {
+                doUpdate();
+            } else {
+                // On old architecture, the size can be 0 sometimes, maybe when not fully rendered?
+                // So we need to make sure it's actually rendered and measure it to make sure it's actually 0.
+                ref.current?.measure?.((x, y, width, height) => {
+                    layout = { width, height };
+                    doUpdate();
+                });
+            }
+        }
+    };
+
+    if (IsNewArchitecture) {
+        // New architecture supports unstable_getBoundingClientRect for getting layout synchronously
+        useLayoutEffect(() => {
+            if (!isNullOrUndefined(itemKey)) {
+                // @ts-expect-error unstable_getBoundingClientRect is unstable and only on Fabric
+                const measured = ref.current?.unstable_getBoundingClientRect?.();
+                if (measured) {
+                    const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
+
+                    if (size) {
+                        updateItemSize(itemKey, measured);
+                    }
+                }
+            }
+        }, [itemKey, layoutRenderCount]);
+    } else {
+        // Since old architecture cannot use unstable_getBoundingClientRect it needs to ensure that
+        // all containers updateItemSize even if the container did not resize.
+        useEffect(() => {
+            // Catch a bug where a container is reused and is the exact same size as the previous item
+            // so it does not fire an onLayout, so we need to trigger it manually.
+            // TODO: There must be a better way to do this?
+            if (!isNullOrUndefined(itemKey)) {
+                const timeout = setTimeout(() => {
+                    if (!didLayout && refLastSize.current) {
+                        updateItemSize(itemKey, refLastSize.current);
+                    }
+                }, 16);
+                return () => {
+                    clearTimeout(timeout);
+                };
+            }
+        }, [itemKey]);
+    }
+
+    // Use a reactive View to ensure the container element itself
+    // is not rendered when style changes, only the style prop.
+    // This is a big perf boost to do less work rendering.
+    return (
+        <LeanView style={style} onLayout={onLayout} ref={ref} key={recycleItems ? undefined : itemKey}>
+            <ContextContainer.Provider value={contextValue}>
+                {renderedItem}
+                {renderedItemInfo && ItemSeparatorComponent && (
+                    <Separator
+                        itemKey={itemKey}
+                        ItemSeparatorComponent={ItemSeparatorComponent}
+                        leadingItem={renderedItemInfo.item}
+                    />
+                )}
+            </ContextContainer.Provider>
+        </LeanView>
+    );
+};

package/src/Containers.tsx

@@ -0,0 +1,85 @@
+// biome-ignore lint/style/useImportType: Leaving this out makes it crash in some environments
+import * as React from "react";
+import { Animated, type StyleProp, type ViewStyle } from "react-native";
+import { Container } from "./Container";
+import { IsNewArchitecture } from "./constants";
+import { useArr$, useStateContext } from "./state";
+import { type GetRenderedItem, typedMemo } from "./types";
+import { useValue$ } from "./useValue$";
+
+interface ContainersProps<ItemT> {
+    horizontal: boolean;
+    recycleItems: boolean;
+    ItemSeparatorComponent?: React.ComponentType<{ leadingItem: ItemT }>;
+    waitForInitialLayout: boolean | undefined;
+    updateItemSize: (itemKey: string, size: { width: number; height: number }) => void;
+    getRenderedItem: GetRenderedItem;
+}
+
+export const Containers = typedMemo(function Containers<ItemT>({
+    horizontal,
+    recycleItems,
+    ItemSeparatorComponent,
+    waitForInitialLayout,
+    updateItemSize,
+    getRenderedItem,
+}: ContainersProps<ItemT>) {
+    const ctx = useStateContext();
+    const columnWrapperStyle = ctx.columnWrapperStyle;
+    const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
+    const animSize = useValue$("totalSize", {
+        // Use a microtask if increasing the size significantly, otherwise use a timeout
+        delay: (value, prevValue) => (!prevValue || value - prevValue > 20 ? 0 : 200),
+    });
+    const animOpacity =
+        waitForInitialLayout && !IsNewArchitecture
+            ? useValue$("containersDidLayout", { getValue: (value) => (value ? 1 : 0) })
+            : undefined;
+    const otherAxisSize = useValue$("otherAxisSize", { delay: 0 });
+
+    const containers: React.ReactNode[] = [];
+    for (let i = 0; i < numContainers; i++) {
+        containers.push(
+            <Container
+                id={i}
+                key={i}
+                recycleItems={recycleItems}
+                horizontal={horizontal}
+                getRenderedItem={getRenderedItem}
+                updateItemSize={updateItemSize}
+                // specifying inline separator makes Containers rerender on each data change
+                // should we do memo of ItemSeparatorComponent?
+                ItemSeparatorComponent={ItemSeparatorComponent}
+            />,
+        );
+    }
+
+    const style: StyleProp<ViewStyle> = horizontal
+        ? { width: animSize, opacity: animOpacity, minHeight: otherAxisSize }
+        : { height: animSize, opacity: animOpacity, minWidth: otherAxisSize };
+
+    if (columnWrapperStyle && numColumns > 1) {
+        // Extract gap properties from columnWrapperStyle if available
+        const { columnGap, rowGap, gap } = columnWrapperStyle;
+
+        const gapX = columnGap || gap || 0;
+        const gapY = rowGap || gap || 0;
+        if (horizontal) {
+            if (gapY) {
+                style.marginVertical = -gapY / 2;
+            }
+            if (gapX) {
+                style.marginRight = -gapX;
+            }
+        } else {
+            if (gapX) {
+                style.marginHorizontal = -gapX;
+            }
+            if (gapY) {
+                style.marginBottom = -gapY;
+            }
+        }
+    }
+
+    return <Animated.View style={style}>{containers}</Animated.View>;
+});