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

package/example/app/ai-chat/index.tsx

@@ -0,0 +1,236 @@
+import { LegendList } from "@legendapp/list";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { useEffect, useState } from "react";
+import { Dimensions, KeyboardAvoidingView, Platform, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type Message = {
+    id: string;
+    text: string;
+    sender: "user" | "system";
+    timeStamp: number;
+    isPlaceholder?: boolean;
+};
+
+let idCounter = 0;
+
+const AIChat = () => {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 80;
+    const screenHeight = Dimensions.get("window").height;
+    const availableHeight = screenHeight - headerHeight; // Subtract header and some padding
+
+    useEffect(() => {
+        // After 1 second, add user message and system placeholder
+        const timer1 = setTimeout(() => {
+            setMessages([
+                {
+                    id: String(idCounter++),
+                    text: "Hey, can you help me understand how React Native virtualization works?",
+                    sender: "user",
+                    timeStamp: Date.now(),
+                },
+                {
+                    id: String(idCounter++),
+                    text: "",
+                    sender: "system",
+                    timeStamp: Date.now(),
+                    isPlaceholder: true,
+                },
+            ]);
+        }, 1000);
+
+        // After 3 seconds total (2 seconds after the first), replace placeholder with long message
+        const timer2 = setTimeout(() => {
+            setMessages((prevMessages) =>
+                prevMessages.map((msg) =>
+                    msg.isPlaceholder
+                        ? {
+                              id: String(idCounter++),
+                              sender: "system",
+                              timeStamp: Date.now(),
+                              text: `React Native virtualization is a performance optimization technique that's crucial for handling large lists efficiently. Here's how it works:
+
+1. **Rendering Only Visible Items**: Instead of rendering all items in a list at once, virtualization only renders the items that are currently visible on screen, plus a small buffer of items just outside the visible area.
+
+2. **Dynamic Item Creation/Destruction**: As you scroll, items that move out of view are removed from the DOM/native view hierarchy, and new items that come into view are created. This keeps memory usage constant regardless of list size.
+
+3. **View Recycling**: Advanced virtualization systems reuse view components rather than creating new ones, which reduces garbage collection and improves performance.
+
+4. **Estimated vs Actual Sizing**: The system uses estimated item sizes to calculate scroll positions and total content size, then adjusts as actual sizes are measured.
+
+5. **Legend List Implementation**: Legend List enhances this by providing better handling of dynamic item sizes, bidirectional scrolling, and maintains scroll position more accurately than FlatList.
+
+The key benefits are:
+- Constant memory usage regardless of data size
+- Smooth scrolling performance
+- Better handling of dynamic content
+- Reduced time to interactive
+
+This makes it possible to scroll through thousands of items without performance degradation, which is essential for modern mobile apps dealing with large datasets like social media feeds, chat histories, or product catalogs.`,
+                              isPlaceholder: false,
+                          }
+                        : msg,
+                ),
+            );
+        }, 3000);
+
+        return () => {
+            clearTimeout(timer1);
+            clearTimeout(timer2);
+        };
+    }, []);
+
+    return (
+        <SafeAreaView style={styles.container} edges={["bottom"]}>
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior="padding"
+                keyboardVerticalOffset={headerHeight}
+                contentContainerStyle={{ flex: 1 }}
+            >
+                <LegendList
+                    data={messages}
+                    contentContainerStyle={styles.contentContainer}
+                    keyExtractor={(item) => item.id}
+                    estimatedItemSize={60}
+                    maintainVisibleContentPosition
+                    maintainScrollAtEnd
+                    alignItemsAtEnd
+                    renderItem={({ item }) => (
+                        <>
+                            {item.isPlaceholder ? (
+                                <View
+                                    style={[
+                                        styles.systemMessageContainer,
+                                        styles.systemStyle,
+                                        { minHeight: availableHeight * 0.9 }, // Take up most of available space
+                                    ]}
+                                >
+                                    <View style={[styles.placeholderContainer, styles.messageContainer]}>
+                                        <View style={styles.typingIndicator}>
+                                            <View style={[styles.dot, styles.dot1]} />
+                                            <View style={[styles.dot, styles.dot2]} />
+                                            <View style={[styles.dot, styles.dot3]} />
+                                        </View>
+                                        <Text style={styles.placeholderText}>AI is thinking...</Text>
+                                    </View>
+                                </View>
+                            ) : (
+                                <View
+                                    style={[
+                                        styles.messageContainer,
+                                        item.sender === "system"
+                                            ? styles.systemMessageContainer
+                                            : styles.userMessageContainer,
+                                        item.sender === "system" ? styles.systemStyle : styles.userStyle,
+                                    ]}
+                                >
+                                    <Text
+                                        style={[styles.messageText, item.sender === "user" && styles.userMessageText]}
+                                    >
+                                        {item.text}
+                                    </Text>
+                                    <View
+                                        style={[
+                                            styles.timeStamp,
+                                            item.sender === "system" ? styles.systemStyle : styles.userStyle,
+                                        ]}
+                                    >
+                                        <Text style={styles.timeStampText}>
+                                            {new Date(item.timeStamp).toLocaleTimeString()}
+                                        </Text>
+                                    </View>
+                                </View>
+                            )}
+                        </>
+                    )}
+                />
+            </KeyboardAvoidingView>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    contentContainer: {
+        paddingHorizontal: 16,
+    },
+    messageContainer: {
+        padding: 16,
+        borderRadius: 16,
+        marginVertical: 4,
+    },
+    messageText: {
+        fontSize: 16,
+        lineHeight: 22,
+    },
+    userMessageText: {
+        color: "white",
+    },
+    systemMessageContainer: {},
+    userMessageContainer: {
+        backgroundColor: "#007AFF",
+    },
+    systemStyle: {
+        maxWidth: "85%",
+        alignSelf: "flex-start",
+    },
+    userStyle: {
+        maxWidth: "75%",
+        alignSelf: "flex-end",
+        alignItems: "flex-end",
+    },
+    timeStamp: {
+        marginVertical: 5,
+    },
+    timeStampText: {
+        fontSize: 12,
+        color: "#888",
+    },
+    placeholderContainer: {
+        backgroundColor: "#f8f9fa",
+        borderWidth: 1,
+        borderColor: "#e9ecef",
+    },
+    typingIndicator: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: "#007AFF",
+        marginHorizontal: 2,
+    },
+    dot1: {
+        animationName: "typing",
+        animationDuration: "1.4s",
+        animationIterationCount: "infinite",
+        animationDelay: "0s",
+    },
+    dot2: {
+        animationName: "typing",
+        animationDuration: "1.4s",
+        animationIterationCount: "infinite",
+        animationDelay: "0.2s",
+    },
+    dot3: {
+        animationName: "typing",
+        animationDuration: "1.4s",
+        animationIterationCount: "infinite",
+        animationDelay: "0.4s",
+    },
+    placeholderText: {
+        fontSize: 14,
+        color: "#666",
+        fontStyle: "italic",
+    },
+});
+
+export default AIChat;

package/example/app/bidirectional-infinite-list/index.tsx

@@ -0,0 +1,133 @@
+import { type Item, renderItem } from "@/app/cards-renderItem";
+import { DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH } from "@/constants/constants";
+import { LegendList, type LegendListRef } from "@legendapp/list";
+import { useRef, useState } from "react";
+import { RefreshControl, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+let last = performance.now();
+
+export default function BidirectionalInfiniteList() {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 20 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    const [refreshing, setRefreshing] = useState(false);
+
+    const onRefresh = () => {
+        console.log("onRefresh");
+        setRefreshing(true);
+        setTimeout(() => {
+            setData((prevData) => {
+                const initialIndex = Number.parseInt(prevData[0].id);
+                const newData = [
+                    ...Array.from({ length: 5 }, (_, i) => ({
+                        id: (initialIndex - i - 1).toString(),
+                    })).reverse(),
+                    ...prevData,
+                ];
+                return newData;
+            });
+            setRefreshing(false);
+        }, 500);
+    };
+
+    // useEffect(() => {
+    //     setTimeout(() => {
+    //         setData((prevData) => {
+    //             const initialIndex = Number.parseInt(prevData[0].id);
+    //             const newData = [
+    //                 ...Array.from({ length: 1 }, (_, i) => ({
+    //                     id: (initialIndex - i - 1).toString(),
+    //                 })).reverse(),
+    //                 ...prevData,
+    //             ];
+    //             return newData;
+    //         });
+    //     }, 2000);
+    // }, []);
+
+    const { bottom } = useSafeAreaInsets();
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
+            <LegendList
+                refreshControl={
+                    <RefreshControl
+                        refreshing={refreshing}
+                        //onRefresh={onRefresh}
+                        tintColor={"#ffffff"}
+                        progressViewOffset={40}
+                    />
+                }
+                ref={listRef}
+                initialScrollIndex={10}
+                style={[StyleSheet.absoluteFill, styles.scrollContainer]}
+                contentContainerStyle={styles.listContainer}
+                data={data}
+                renderItem={renderItem}
+                keyExtractor={(item) => `id${item.id}`}
+                estimatedItemSize={ESTIMATED_ITEM_LENGTH}
+                drawDistance={DRAW_DISTANCE}
+                maintainVisibleContentPosition
+                recycleItems={true}
+                ListFooterComponent={<View style={{ height: bottom }} />}
+                onStartReached={(props) => {
+                    const time = performance.now();
+                    console.log("onStartReached", props, last - time);
+                    last = time;
+                    onRefresh();
+                }}
+                onEndReached={({ distanceFromEnd }) => {
+                    console.log("onEndReached", distanceFromEnd);
+                    if (distanceFromEnd > 0) {
+                        setTimeout(() => {
+                            setData((prevData) => {
+                                const newData = [
+                                    ...prevData,
+                                    ...Array.from({ length: 10 }, (_, i) => ({
+                                        id: (Number.parseInt(prevData[prevData.length - 1].id) + i + 1).toString(),
+                                    })),
+                                ];
+                                return newData;
+                            });
+                        }, 500);
+                    }
+                }}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    listHeader: {
+        alignSelf: "center",
+        height: 100,
+        width: 100,
+        backgroundColor: "#456AAA",
+        borderRadius: 12,
+        marginHorizontal: 8,
+        marginVertical: 8,
+    },
+    listEmpty: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#6789AB",
+        paddingVertical: 16,
+    },
+    outerContainer: {
+        backgroundColor: "#456",
+    },
+    scrollContainer: {},
+    listContainer: {
+        width: 360,
+        maxWidth: "100%",
+        marginHorizontal: "auto",
+    },
+});

package/example/app/cards-columns/index.tsx

@@ -0,0 +1,37 @@
+import Cards from "@/app/(tabs)/cards";
+import { LogBox, Platform, StyleSheet } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+export default function CardsColumns() {
+    return <Cards numColumns={2} />;
+}
+
+const styles = StyleSheet.create({
+    listHeader: {
+        alignSelf: "center",
+        height: 100,
+        width: 100,
+        backgroundColor: "#456AAA",
+        borderRadius: 12,
+        marginHorizontal: 8,
+        marginVertical: 8,
+    },
+    listEmpty: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#6789AB",
+        paddingVertical: 16,
+    },
+    outerContainer: {
+        backgroundColor: "#456",
+        bottom: Platform.OS === "ios" ? 82 : 0,
+    },
+    scrollContainer: {},
+    listContainer: {
+        width: 400,
+        maxWidth: "100%",
+        marginHorizontal: "auto",
+    },
+});

package/example/app/cards-flashlist/index.tsx

@@ -0,0 +1,122 @@
+import renderItem from "@/app/cards-renderItem";
+import { DO_SCROLL_TEST, DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH, RECYCLE_ITEMS } from "@/constants/constants";
+import { useScrollTest } from "@/constants/useScrollTest";
+import { FlashList, type ListRenderItemInfo } from "@shopify/flash-list";
+import { Fragment, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+
+export default function HomeScreen() {
+    const data = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString() }));
+
+    const scrollRef = useRef<FlashList<any>>(null);
+
+    //   useEffect(() => {
+    //     let amtPerInterval = 4;
+    //     let index = amtPerInterval;
+    //     const interval = setInterval(() => {
+    //       scrollRef.current?.scrollToIndex({
+    //         index,
+    //       });
+    //       index += amtPerInterval;
+    //     }, 100);
+
+    //     return () => clearInterval(interval);
+    //   });
+
+    const renderItemFn = (info: ListRenderItemInfo<any>) => {
+        return RECYCLE_ITEMS ? renderItem(info) : <Fragment key={info.item.id}>{renderItem(info)}</Fragment>;
+    };
+
+    if (DO_SCROLL_TEST) {
+        useScrollTest((offset) => {
+            scrollRef.current?.scrollToOffset({
+                offset,
+                animated: true,
+            });
+        });
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="flashlist">
+            <FlashList
+                data={data}
+                renderItem={renderItemFn}
+                keyExtractor={(item) => item.id}
+                contentContainerStyle={styles.listContainer}
+                estimatedItemSize={ESTIMATED_ITEM_LENGTH}
+                drawDistance={DRAW_DISTANCE}
+                ref={scrollRef}
+                ListHeaderComponent={<View />}
+                ListHeaderComponentStyle={styles.listHeader}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    listHeader: {
+        alignSelf: "center",
+        height: 100,
+        width: 100,
+        backgroundColor: "#456AAA",
+        borderRadius: 12,
+        marginHorizontal: 8,
+        marginTop: 8,
+    },
+    outerContainer: {
+        backgroundColor: "#456",
+    },
+    scrollContainer: {
+        // paddingHorizontal: 8,
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+    },
+    itemContainer: {
+        // padding: 4,
+        // borderBottomWidth: 1,
+        // borderBottomColor: "#ccc",
+    },
+    listContainer: {
+        //paddingHorizontal: 16,
+        //paddingTop: 48,
+    },
+    itemTitle: {
+        fontSize: 18,
+        fontWeight: "bold",
+        marginBottom: 8,
+        color: "#1a1a1a",
+    },
+    itemBody: {
+        fontSize: 14,
+        color: "#666666",
+        lineHeight: 20,
+        flex: 1,
+    },
+    itemFooter: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        gap: 16,
+        marginTop: 12,
+        paddingTop: 12,
+        borderTopWidth: 1,
+        borderTopColor: "#f0f0f0",
+    },
+    footerText: {
+        fontSize: 14,
+        color: "#888888",
+    },
+});

package/example/app/cards-flatlist/index.tsx

@@ -0,0 +1,94 @@
+import renderItem from "@/app/cards-renderItem";
+import { FlatList, StyleSheet, View } from "react-native";
+
+export default function CardsFlatList() {
+    const data = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString() }));
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="flatlist">
+            <FlatList
+                style={[StyleSheet.absoluteFill, styles.scrollContainer]}
+                data={data}
+                renderItem={renderItem as any}
+                keyExtractor={(item) => item.id}
+                contentContainerStyle={styles.listContainer}
+                ListHeaderComponent={<View />}
+                ListHeaderComponentStyle={styles.listHeader}
+                // Performance optimizations
+                windowSize={3} // Reduced window size for better performance
+                maxToRenderPerBatch={5} // Reduced batch size for smoother scrolling
+                initialNumToRender={8} // Initial render amount
+                removeClippedSubviews={true} // Detach views outside of the viewport
+                updateCellsBatchingPeriod={50} // Batching period for updates
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    listHeader: {
+        alignSelf: "center",
+        height: 100,
+        width: 100,
+        backgroundColor: "#456AAA",
+        borderRadius: 12,
+        marginHorizontal: 8,
+        marginTop: 8,
+    },
+    outerContainer: {
+        backgroundColor: "#456",
+    },
+    scrollContainer: {
+        // paddingHorizontal: 16,
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+    },
+    itemContainer: {
+        // padding: 4,
+        // borderBottomWidth: 1,
+        // borderBottomColor: "#ccc",
+    },
+    listContainer: {
+        paddingHorizontal: 16,
+        // paddingTop: 48,
+    },
+    itemTitle: {
+        fontSize: 18,
+        fontWeight: "bold",
+        marginBottom: 8,
+        color: "#1a1a1a",
+    },
+    itemBody: {
+        fontSize: 14,
+        color: "#666666",
+        lineHeight: 20,
+        flex: 1,
+    },
+    itemFooter: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        gap: 16,
+        marginTop: 12,
+        paddingTop: 12,
+        borderTopWidth: 1,
+        borderTopColor: "#f0f0f0",
+    },
+    footerText: {
+        fontSize: 14,
+        color: "#888888",
+    },
+});