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

package/example/package.json

@@ -1,73 +0,0 @@
-{
-    "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

@@ -1,84 +0,0 @@
-#!/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

@@ -1,26 +0,0 @@
-{
-    "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/posttsup.ts

@@ -1,24 +0,0 @@
-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

@@ -1,176 +0,0 @@
-// 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

@@ -1,85 +0,0 @@
-// 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>;
-});

package/src/ContextContainer.ts

@@ -1,145 +0,0 @@
-import {
-    type Dispatch,
-    type SetStateAction,
-    createContext,
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from "react";
-import { isFunction } from "./helpers";
-import { useArr$, useSelector$, useStateContext } from "./state";
-import type { LegendListRecyclingState, ViewabilityAmountCallback, ViewabilityCallback } from "./types";
-import { useInit } from "./useInit";
-
-export interface ContextContainerType {
-    containerId: number;
-    itemKey: string;
-    index: number;
-    value: any;
-    triggerLayout: () => void;
-}
-
-export const ContextContainer = createContext<ContextContainerType>(null as any);
-
-export function useViewability(callback: ViewabilityCallback, configId?: string) {
-    const ctx = useStateContext();
-    const { containerId } = useContext(ContextContainer);
-
-    const key = containerId + (configId ?? "");
-
-    useInit(() => {
-        const value = ctx.mapViewabilityValues.get(key);
-        if (value) {
-            callback(value);
-        }
-    });
-
-    ctx.mapViewabilityCallbacks.set(key, callback);
-
-    useEffect(
-        () => () => {
-            ctx.mapViewabilityCallbacks.delete(key);
-        },
-        [],
-    );
-}
-
-export function useViewabilityAmount(callback: ViewabilityAmountCallback) {
-    const ctx = useStateContext();
-    const { containerId } = useContext(ContextContainer);
-
-    useInit(() => {
-        const value = ctx.mapViewabilityAmountValues.get(containerId);
-        if (value) {
-            callback(value);
-        }
-    });
-
-    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-
-    useEffect(
-        () => () => {
-            ctx.mapViewabilityAmountCallbacks.delete(containerId);
-        },
-        [],
-    );
-}
-
-export function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)) {
-    const { index, value } = useContext(ContextContainer);
-    const prevValues = useRef<{ prevIndex: number | undefined; prevItem: any }>({
-        prevIndex: undefined,
-        prevItem: undefined,
-    });
-
-    useEffect(() => {
-        let ret: void | (() => void) = undefined;
-        // Only run effect if there's a previous value
-        if (prevValues.current.prevIndex !== undefined && prevValues.current.prevItem !== undefined) {
-            ret = effect({
-                index,
-                item: value,
-                prevIndex: prevValues.current.prevIndex,
-                prevItem: prevValues.current.prevItem,
-            });
-        }
-
-        // Update refs for next render
-        prevValues.current = {
-            prevIndex: index,
-            prevItem: value,
-        };
-
-        return ret;
-    }, [index, value]);
-}
-
-export function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT) {
-    const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
-    const refState = useRef<{ itemKey: string | null; value: ItemT | null }>({
-        itemKey: null,
-        value: null,
-    });
-    const [_, setRenderNum] = useState(0);
-    const state = refState.current;
-
-    if (state.itemKey !== itemKey) {
-        state.itemKey = itemKey;
-        // Reset local state in ref
-        state.value = isFunction(valueOrFun)
-            ? valueOrFun({
-                  index,
-                  item: value,
-                  prevIndex: undefined,
-                  prevItem: undefined,
-              })
-            : valueOrFun;
-    }
-
-    const setState: Dispatch<SetStateAction<ItemT>> = useCallback(
-        (newState: SetStateAction<ItemT>) => {
-            // Update local state in ref
-            state.value = isFunction(newState) ? (newState as (prevState: ItemT) => ItemT)(state.value!) : newState;
-            // Trigger item to re-render
-            setRenderNum((v) => v + 1);
-            // Trigger container to re-render to update item size
-            triggerLayout();
-        },
-        [triggerLayout, state],
-    );
-
-    return [state.value, setState] as const;
-}
-
-export function useIsLastItem(): boolean {
-    const { itemKey } = useContext(ContextContainer);
-    const isLast = useSelector$("lastItemKeys", (lastItemKeys) => lastItemKeys?.includes(itemKey) || false);
-    return isLast;
-}
-
-export function useListScrollSize(): { width: number; height: number } {
-    const [scrollSize] = useArr$(["scrollSize"]);
-    return scrollSize;
-}