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

package/example/app/cards-no-recycle/index.tsx

@@ -0,0 +1,110 @@
+import { type Item, renderItem } from "@/app/cards-renderItem";
+import { DO_SCROLL_TEST, DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH } from "@/constants/constants";
+import { useScrollTest } from "@/constants/useScrollTest";
+import { LegendList, type LegendListRef } from "@legendapp/list";
+import { useRef, useState } from "react";
+import { LogBox, Platform, StyleSheet, Text, View } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+interface CardsProps {
+    numColumns?: number;
+}
+
+export default function Cards({ numColumns = 1 }: CardsProps) {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 1000 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    if (DO_SCROLL_TEST) {
+        useScrollTest((offset) => {
+            listRef.current?.scrollToOffset({
+                offset: offset,
+                animated: true,
+            });
+        });
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
+            <LegendList
+                ref={listRef}
+                style={[StyleSheet.absoluteFill, styles.scrollContainer]}
+                contentContainerStyle={styles.listContainer}
+                data={data}
+                renderItem={renderItem}
+                keyExtractor={(item) => `id${item.id}`}
+                estimatedItemSize={ESTIMATED_ITEM_LENGTH}
+                drawDistance={DRAW_DISTANCE}
+                recycleItems={false}
+                numColumns={numColumns}
+                // initialScrollIndex={50}
+                // alignItemsAtEnd
+                // maintainScrollAtEnd
+                // onEndReached={({ distanceFromEnd }) => {
+                //     console.log("onEndReached", distanceFromEnd);
+                // }}
+                ListHeaderComponent={<View />}
+                ListHeaderComponentStyle={styles.listHeader}
+                ListFooterComponent={<View />}
+                ListFooterComponentStyle={styles.listHeader}
+                ListEmptyComponent={
+                    <View style={styles.listEmpty}>
+                        <Text style={{ color: "white" }}>Empty</Text>
+                    </View>
+                }
+                // viewabilityConfigCallbackPairs={[
+                //     {
+                //         viewabilityConfig: { id: "viewability", viewAreaCoveragePercentThreshold: 50 },
+                //         // onViewableItemsChanged: ({ viewableItems, changed }) => {
+                //         //     console.log(
+                //         //         'onViewableItems',
+                //         //         viewableItems.map((v) => v.key),
+                //         //     );
+                //         //     // console.log('onViewableChanged', changed);
+                //         // },
+                //     },
+                // ]}
+
+                // initialScrollOffset={20000}
+                // initialScrollIndex={500}
+                // inverted
+                // horizontal
+            />
+        </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",
+        bottom: Platform.OS === "ios" ? 82 : 0,
+    },
+    scrollContainer: {},
+    listContainer: {
+        width: 400,
+        maxWidth: "100%",
+        marginHorizontal: "auto",
+    },
+});

package/example/app/cards-renderItem.tsx

@@ -0,0 +1,354 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import { LegendList, type LegendListRenderItemProps, useRecyclingState } from "@legendapp/list";
+import { memo, useRef, useState } from "react";
+import { Animated, Image, Platform, Pressable, StyleSheet, Text, UIManager, View } from "react-native";
+import { RectButton } from "react-native-gesture-handler";
+import Swipeable, { type SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable";
+
+export interface Item {
+    id: string;
+}
+const demoNestedList = false;
+
+// Generate random metadata
+const randomAvatars = Array.from({ length: 20 }, (_, i) => `https://i.pravatar.cc/150?img=${i + 1}`);
+
+export const randomNames = [
+    "Alex Thompson",
+    "Jordan Lee",
+    "Sam Parker",
+    "Taylor Kim",
+    "Morgan Chen",
+    "Riley Zhang",
+    "Casey Williams",
+    "Quinn Anderson",
+    "Blake Martinez",
+    "Avery Rodriguez",
+    "Drew Campbell",
+    "Jamie Foster",
+    "Skylar Patel",
+    "Charlie Wright",
+    "Sage Mitchell",
+    "River Johnson",
+    "Phoenix Garcia",
+    "Jordan Taylor",
+    "Reese Cooper",
+    "Morgan Bailey",
+];
+
+// Array of lorem ipsum sentences to randomly choose from
+export const loremSentences = [
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+    "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
+    "Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
+    "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.",
+    "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.",
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+    "Duis aute irure dolor in reprehenderit in voluptate velit esse.",
+    "Excepteur sint occaecat cupidatat non proident, sunt in culpa.",
+    "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.",
+    "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.",
+];
+
+if (Platform.OS === "android") {
+    if (UIManager.setLayoutAnimationEnabledExperimental) {
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+}
+
+const renderRightActions = () => {
+    return (
+        <RectButton
+            style={{
+                width: 80,
+                height: "100%",
+                backgroundColor: "#4CAF50",
+                justifyContent: "center",
+                alignItems: "center",
+                borderTopRightRadius: 12,
+                borderBottomRightRadius: 12,
+                shadowColor: "#000",
+                shadowOffset: { width: 2, height: 0 },
+                shadowOpacity: 0.1,
+                shadowRadius: 4,
+            }}
+            onPress={() => {
+                console.log("Marked as complete");
+            }}
+        >
+            <MaterialIcons name="check-circle" size={24} color="white" />
+            <Text
+                style={{
+                    color: "white",
+                    fontSize: 12,
+                    marginTop: 4,
+                    fontWeight: "600",
+                }}
+            >
+                Complete
+            </Text>
+        </RectButton>
+    );
+};
+
+// Inline Separator makes containers rerender each data change
+const Separator = () => <View style={{ height: 10 }} />;
+
+export const ItemCard = memo(
+    ({
+        item,
+        index,
+        extraData,
+        numSentences: numSentencesProp,
+    }: LegendListRenderItemProps<Item> & { numSentences: number | ((index: number) => number) }) => {
+        const refSwipeable = useRef<SwipeableMethods>();
+
+        // A useState that resets when the item is recycled
+        const [isExpanded, setIsExpanded] = extraData?.recycleState ? useRecyclingState(() => false) : useState(false);
+
+        const swipeableState = useRef(false);
+
+        // console.log(Math.round(performance.now()), "renderItem", index);
+
+        // A callback when the item is recycled
+        // useRecyclingEffect?.(({ item, prevItem, index, prevIndex }) => {
+        //     if (swipeableState.current) {
+        //         // this is expensive operation, run .close() only if the swipeable is open
+        //         refSwipeable?.current?.close();
+        //     }
+        // });
+
+        // A callback when the item viewability (from viewabilityConfig) changes
+        // useViewability?.("viewability", ({ item, isViewable, index }) => {
+        //     // console.log('viewable', viewToken.index, viewToken.isViewable);
+        // });
+
+        // @ts-ignore
+        // const opacity = useViewabilityAmount ? useAnimatedValue(1) : 1;
+        // useViewabilityAmount?.(({ sizeVisible, size, percentOfScroller }) => {
+        //     // @ts-ignore
+        //     // opacity.setValue(Math.max(0, Math.min(1, sizeVisible / Math.min(400, size || 400)) ** 1.5));
+        //     // console.log('viewable', sizeVisible, size, percentOfScroller);
+        // });
+
+        // Math.abs needed for negative indices
+        const indexForData = Math.abs(item.id.includes("new") ? 100 + +item.id.replace("new", "") : +item.id);
+
+        // Generate 1-5 random sentences
+        const numSentences = numSentencesProp
+            ? typeof numSentencesProp === "function"
+                ? numSentencesProp(indexForData)
+                : numSentencesProp
+            : ((indexForData * 7919) % 4) + 1; // Using prime number 7919 for better distribution
+        //   const indexForData =
+        //     item.id === "0" ? 0 : item.id === "1" ? 1 : item.id === "new0" ? 2 : 3;
+        //   const numSentences =
+        //     item.id === "0" ? 1 : item.id === "1" ? 2 : item.id === "new0" ? 4 : 8;
+        const randomText = Array.from(
+            { length: numSentences },
+            (_, i) => loremSentences[i % loremSentences.length],
+        ).join(" ");
+
+        // Use randomIndex to deterministically select random data
+        const avatarUrl = randomAvatars[indexForData % randomAvatars.length];
+        const authorName = randomNames[indexForData % randomNames.length];
+        const timestamp = `${Math.max(1, indexForData % 24)}h ago`;
+
+        if (index === 1 && demoNestedList) {
+            return (
+                <Animated.View style={[styles.nestedListContainer]}>
+                    <LegendList
+                        showsHorizontalScrollIndicator={false}
+                        horizontal
+                        estimatedItemSize={400}
+                        keyExtractor={(item) => item.text}
+                        data={[
+                            {
+                                id: "1",
+                                text: "List Item 1",
+                            },
+                            {
+                                id: "2",
+                                text: "List Item 2",
+                            },
+                            {
+                                id: "3",
+                                text: "List Item 3",
+                            },
+                        ]}
+                        ItemSeparatorComponent={Separator}
+                        renderItem={({ item }) => (
+                            <View style={styles.nestedListItem}>
+                                <Text>{item.text}</Text>
+                            </View>
+                        )}
+                    />
+                </Animated.View>
+            );
+        }
+
+        return (
+            <View style={{ ...styles.itemOuterContainer }}>
+                <Swipeable
+                    renderRightActions={renderRightActions}
+                    overshootRight={true}
+                    containerStyle={styles.swipeableContainer}
+                    ref={refSwipeable as any}
+                    onSwipeableWillOpen={() => {
+                        swipeableState.current = true;
+                    }}
+                    onSwipeableWillClose={() => {
+                        swipeableState.current = false;
+                    }}
+                >
+                    <Pressable
+                        onPress={(e) => {
+                            //   LinearTransition.easing(Easing.ease);
+
+                            e.stopPropagation();
+                            setIsExpanded(!isExpanded);
+                        }}
+                    >
+                        <View
+                            style={[
+                                styles.itemContainer,
+                                {
+                                    // padding: 16,
+                                    backgroundColor: "#ffffff",
+                                    borderRadius: 12,
+                                    shadowColor: "#000",
+                                    shadowOffset: { width: 0, height: 2 },
+                                    shadowOpacity: 0.1,
+                                    shadowRadius: 4,
+                                    // marginVertical: 8,
+                                    overflow: "hidden",
+                                },
+                            ]}
+                        >
+                            <View style={styles.headerContainer}>
+                                <Image source={{ uri: avatarUrl }} style={styles.avatar} />
+                                <View style={styles.headerText}>
+                                    <Text style={styles.authorName}>
+                                        {authorName} {item.id}
+                                    </Text>
+                                    <Text style={styles.timestamp}>{timestamp}</Text>
+                                </View>
+                            </View>
+
+                            <Text style={styles.itemTitle}>Item #{item.id}</Text>
+                            <Text
+                                style={styles.itemBody}
+                                //   numberOfLines={isExpanded ? undefined : 10}
+                            >
+                                {randomText}
+                                {isExpanded ? randomText : null}
+                            </Text>
+                            <View style={styles.itemFooter}>
+                                <Text style={styles.footerText}>❤️ 42</Text>
+                                <Text style={styles.footerText}>💬 12</Text>
+                                <Text style={styles.footerText}>🔄 8</Text>
+                            </View>
+                        </View>
+                        {/* <Breathe /> */}
+                    </Pressable>
+                </Swipeable>
+            </View>
+        );
+    },
+);
+
+export const renderItem = (props: LegendListRenderItemProps<Item>) => <ItemCard {...props} />;
+
+const styles = StyleSheet.create({
+    nestedListContainer: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        height: 200,
+    },
+    nestedListItem: {
+        backgroundColor: "white",
+        height: 200,
+        width: 200,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    itemOuterContainer: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        //width: 380,
+        //marginLeft: 6,
+    },
+    itemContainer: {
+        padding: 16,
+        // borderBottomWidth: 1,
+        // borderBottomColor: "#ccc",
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+    },
+    listContainer: {
+        paddingHorizontal: 16,
+    },
+    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",
+    },
+    headerContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    avatar: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        marginRight: 12,
+    },
+    headerText: {
+        flex: 1,
+    },
+    authorName: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: "#1a1a1a",
+    },
+    timestamp: {
+        fontSize: 12,
+        color: "#888888",
+        marginTop: 2,
+    },
+    swipeableContainer: { backgroundColor: "#4CAF50", borderRadius: 12 },
+});
+
+export default renderItem;

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

@@ -0,0 +1,167 @@
+import { LegendList } from "@legendapp/list";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { useState } from "react";
+import { Button, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type Message = {
+    id: string;
+    text: string;
+    sender: "user" | "bot";
+    timeStamp: number;
+};
+
+let idCounter = 0;
+const MS_PER_SECOND = 1000;
+
+const defaultChatMessages: Message[] = [
+    {
+        id: String(idCounter++),
+        text: "Hi, I have a question",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 5,
+    },
+    { id: String(idCounter++), text: "Hello", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 4 },
+    { id: String(idCounter++), text: "How can I help you?", sender: "bot", timeStamp: Date.now() - MS_PER_SECOND * 3 },
+];
+
+const ChatExample = () => {
+    const [messages, setMessages] = useState<Message[]>(defaultChatMessages);
+    const [inputText, setInputText] = useState("");
+    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 80;
+
+    const sendMessage = () => {
+        const text = inputText || "Empty message";
+        if (text.trim()) {
+            setMessages((messages) => [
+                ...messages,
+                { id: String(idCounter++), text: text, sender: "user", timeStamp: Date.now() },
+            ]);
+            setInputText("");
+            setTimeout(() => {
+                setMessages((messages) => [
+                    ...messages,
+                    {
+                        id: String(idCounter++),
+                        text: `Answer: ${text.toUpperCase()}`,
+                        sender: "bot",
+                        timeStamp: Date.now(),
+                    },
+                ]);
+            }, 300);
+        }
+    };
+
+    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={10} // A size that's way too small to check the behavior is correct
+                    initialScrollIndex={messages.length - 1}
+                    maintainVisibleContentPosition
+                    maintainScrollAtEnd
+                    alignItemsAtEnd
+                    renderItem={({ item }) => (
+                        <>
+                            <View
+                                style={[
+                                    styles.messageContainer,
+                                    item.sender === "bot" ? styles.botMessageContainer : styles.userMessageContainer,
+                                    item.sender === "bot" ? styles.botStyle : styles.userStyle,
+                                ]}
+                            >
+                                <Text style={[styles.messageText, item.sender === "user" && styles.userMessageText]}>
+                                    {item.text}
+                                </Text>
+                            </View>
+                            <View
+                                style={[styles.timeStamp, item.sender === "bot" ? styles.botStyle : styles.userStyle]}
+                            >
+                                <Text style={styles.timeStampText}>
+                                    {new Date(item.timeStamp).toLocaleTimeString()}
+                                </Text>
+                            </View>
+                        </>
+                    )}
+                />
+                <View style={styles.inputContainer}>
+                    <TextInput
+                        style={styles.input}
+                        value={inputText}
+                        onChangeText={setInputText}
+                        placeholder="Type a message"
+                    />
+                    <Button title="Send" onPress={sendMessage} />
+                </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,
+    },
+    userMessageText: {
+        color: "white",
+    },
+    inputContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 10,
+        borderTopWidth: 1,
+        borderColor: "#ccc",
+    },
+    botMessageContainer: {
+        backgroundColor: "#f1f1f1",
+    },
+    userMessageContainer: {
+        backgroundColor: "#007AFF",
+    },
+    botStyle: {
+        maxWidth: "75%",
+        alignSelf: "flex-start",
+    },
+    userStyle: {
+        maxWidth: "75%",
+        alignSelf: "flex-end",
+        alignItems: "flex-end",
+    },
+    input: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: "#ccc",
+        borderRadius: 5,
+        padding: 10,
+        marginRight: 10,
+    },
+    timeStamp: {
+        marginVertical: 5,
+    },
+    timeStampText: {
+        fontSize: 12,
+        color: "#888",
+    },
+});
+
+export default ChatExample;