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

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

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

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

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