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

package/example/app/initial-scroll-index/renderFixedItem.tsx

@@ -0,0 +1,215 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";
+
+import { Image, Platform, Pressable, StyleSheet, Text, UIManager, View } from "react-native";
+
+import { loremSentences, randomNames } from "@/app/cards-renderItem";
+import { RectButton } from "react-native-gesture-handler";
+
+export interface Item {
+    id: string;
+}
+
+// Generate random metadata
+const randomAvatars = Array.from({ length: 20 }, (_, i) => `https://i.pravatar.cc/150?img=${i + 1}`);
+
+interface ItemCardProps {
+    item: Item;
+    index: number;
+    height: number;
+}
+
+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>
+    );
+};
+
+export const ItemCard = ({ item, height }: ItemCardProps) => {
+    const indexForData = item.id.includes("new") ? 100 + +item.id.replace("new", "") : +item.id;
+
+    // Generate 1-5 random sentences
+    const numSentences = 5;
+    //   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]).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`;
+
+    return (
+        <View style={[styles.itemOuterContainer, { height }]}>
+            <Swipeable
+                renderRightActions={renderRightActions}
+                overshootRight={true}
+                containerStyle={{ backgroundColor: "#4CAF50", borderRadius: 12 }}
+            >
+                <Pressable
+                    onPress={() => {
+                        //   LinearTransition.easing(Easing.ease);
+                    }}
+                >
+                    <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}
+                        </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>
+                </Pressable>
+            </Swipeable>
+        </View>
+    );
+};
+
+export const renderItem = ({ item, index, height }: ItemCardProps) => (
+    <ItemCard item={item} index={index} height={height} />
+);
+
+const styles = StyleSheet.create({
+    itemOuterContainer: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        // marginTop: 16,
+        //  maxWidth: 360,
+    },
+    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,
+    },
+});
+
+export default renderItem;

package/example/app/initial-scroll-index-free-height/index.tsx

@@ -0,0 +1,70 @@
+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 { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+//** Purpose of this component is to show that LegendList with initialScrollIndex can correctly scroll to the begginning
+// and the end of the list even if element height is unknown and calculated dynamically */
+export default function IntialScrollIndexFreeHeight() {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 100 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    const { top, bottom } = useSafeAreaInsets();
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
+            <LegendList
+                ref={listRef}
+                initialScrollIndex={50}
+                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}
+                //ListHeaderComponent={<View style={{ height: top }} />}
+                ListFooterComponent={<View style={{ height: bottom }} />}
+                numColumns={1}
+            />
+        </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: "100%",
+        maxWidth: "100%",
+        marginHorizontal: "auto",
+    },
+});

package/example/app/initial-scroll-index-keyed/index.tsx

@@ -0,0 +1,62 @@
+import { LegendList } from "@legendapp/list";
+import { useCallback, useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+// Dummy data: 50 items
+const DATA = Array.from({ length: 70 }, (_, i) => ({ label: `Item ${i}`, height: ((i * 7919) % 100) + 10 }));
+
+export default function App() {
+    const [scrollToIdx, setScrollToIdx] = useState(0);
+
+    console.log("keyed");
+
+    const renderItem = useCallback(
+        ({ item }) => (
+            <View style={[styles.item, { height: item.height }]}>
+                <Text>{item.label}</Text>
+            </View>
+        ),
+        [],
+    );
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.buttons}>
+                <Button title="Scroll to 10" onPress={() => setScrollToIdx(10)} />
+                <Button title="Scroll to 20" onPress={() => setScrollToIdx(20)} />
+                <Button title="Scroll to 30" onPress={() => setScrollToIdx(30)} />
+                <Button title="Scroll to 40" onPress={() => setScrollToIdx(40)} />
+            </View>
+
+            <View key={scrollToIdx} style={styles.list}>
+                <LegendList
+                    data={DATA}
+                    renderItem={renderItem}
+                    keyExtractor={(item) => item.label}
+                    estimatedItemSize={60}
+                    style={styles.list}
+                    initialScrollIndex={scrollToIdx}
+                    maintainVisibleContentPosition
+                />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    buttons: {
+        flexDirection: "row",
+        justifyContent: "space-around",
+        marginBottom: 10,
+    },
+    list: { flex: 1 },
+    item: {
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#fafafa",
+        marginVertical: 4,
+        marginHorizontal: 16,
+        borderRadius: 8,
+    },
+});

package/example/app/lazy-list/index.tsx

@@ -0,0 +1,123 @@
+import { LazyLegendList, type LegendListRef } from "@legendapp/list";
+import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
+import { useRef, useState } from "react";
+import { Pressable, StatusBar, StyleSheet, Text, View } from "react-native";
+
+type Country = {
+    id: string;
+    name: string;
+    flag: string;
+};
+
+const DATA: Country[] = Object.entries(countries)
+    .map(([code, country]) => ({
+        id: code,
+        name: country.name,
+        flag: getEmojiFlag(code as TCountryCode),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+export default function LazyList() {
+    const listRef = useRef<LegendListRef>(null);
+    const [selectedId, setSelectedId] = useState<string>();
+
+    return (
+        <View style={styles.container}>
+            <LazyLegendList ref={listRef} maintainVisibleContentPosition recycleItems>
+                <View style={styles.heading}>
+                    <Text style={styles.headingText}>Countries lazy scrollview</Text>
+                </View>
+                {DATA.map((country) => (
+                    <Pressable
+                        key={country.id}
+                        onPress={() => setSelectedId(country.id)}
+                        style={({ pressed }) => [
+                            styles.item,
+                            selectedId === country.id && styles.selectedItem,
+                            pressed && styles.pressedItem,
+                        ]}
+                    >
+                        <View style={styles.flagContainer}>
+                            <Text style={styles.flag}>{country.flag}</Text>
+                        </View>
+                        <View style={styles.contentContainer}>
+                            <Text style={[styles.title, selectedId === country.id && styles.selectedText]}>
+                                {country.name}
+                                <Text style={styles.countryCode}> ({country.id})</Text>
+                            </Text>
+                        </View>
+                    </Pressable>
+                ))}
+            </LazyLegendList>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+    heading: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+    },
+    headingText: {
+        fontWeight: "bold",
+    },
+    item: {
+        paddingHorizontal: 16,
+        paddingVertical: 6,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        //     shadowColor: "#000",
+        //     shadowOffset: {
+        //         width: 0,
+        //         height: 2,
+        //     },
+        //     shadowOpacity: 0.1,
+        //     shadowRadius: 3,
+        //     elevation: 3,
+    },
+    selectedItem: {
+        // backgroundColor: "#e3f2fd",
+        // borderColor: "#1976d2",
+        // borderWidth: 1,
+    },
+    pressedItem: {
+        // backgroundColor: "#f0f0f0",
+    },
+    flagContainer: {
+        marginRight: 16,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: "#f8f9fa",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    flag: {
+        fontSize: 28,
+    },
+    contentContainer: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    title: {
+        fontSize: 16,
+        color: "#333",
+        fontWeight: "500",
+    },
+    selectedText: {
+        color: "#1976d2",
+        fontWeight: "600",
+    },
+    countryCode: {
+        fontSize: 14,
+        color: "#666",
+        fontWeight: "400",
+    },
+});

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

@@ -0,0 +1,7 @@
+import Movies from "@/components/Movies";
+
+const App = () => {
+    return <Movies isLegend={false} />;
+};
+
+export default App;

package/example/app/mutable-cells/index.tsx

@@ -0,0 +1,104 @@
+import { LegendList, type LegendListRenderItemProps } from "@legendapp/list";
+import type React from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+const fakeData = Array.from({ length: 100 }, (_, index) => ({
+    id: index,
+    title: `Item ${index + 1}`,
+    score: 0,
+}));
+
+type Item = (typeof fakeData)[number];
+
+const DataContext = createContext({
+    data: fakeData,
+    increment: (id: number) => {},
+});
+
+export const DataProvider = ({ initialData, children }: { initialData: Item[]; children: React.ReactNode }) => {
+    const [data, setData] = useState(initialData);
+
+    const increment = useCallback((id: number) => {
+        setData((prevData) => {
+            return prevData.map((item) => {
+                if (item.id === id) {
+                    return { ...item, score: item.score + 1 };
+                }
+                return item;
+            });
+        });
+    }, []);
+
+    return <DataContext.Provider value={{ data, increment }}>{children}</DataContext.Provider>;
+};
+
+export const useData = () => useContext(DataContext);
+
+const Item = ({ item }: { item: Item }) => {
+    const { increment } = useData();
+    return (
+        <View
+            style={{
+                height: 100,
+                backgroundColor: "#fefefe",
+                justifyContent: "center",
+                paddingHorizontal: 24,
+                borderRadius: 16,
+            }}
+        >
+            <Text style={{ fontSize: 24, fontWeight: "bold" }}>{`${item.title} - Score:${item.score}`}</Text>
+            <Button
+                title="Increment"
+                onPress={() => {
+                    increment(item.id);
+                }}
+            />
+        </View>
+    );
+};
+
+const ItemSeparatorComponent = () => <View style={{ height: 16 }} />;
+
+export const List = () => {
+    const { data } = useData();
+    const renderItem = ({ item }: LegendListRenderItemProps<Item>) => <Item item={item} />;
+    return (
+        <View style={{ flex: 1, paddingHorizontal: 16, marginTop: 70 }}>
+            <LegendList
+                data={data}
+                estimatedItemSize={116}
+                ItemSeparatorComponent={ItemSeparatorComponent}
+                renderItem={renderItem}
+                keyExtractor={(item) => String(item.id)}
+            />
+        </View>
+    );
+};
+
+export default function HomeScreen() {
+    return (
+        <DataProvider initialData={fakeData}>
+            <List />
+        </DataProvider>
+    );
+}
+
+const styles = StyleSheet.create({
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+    },
+});

package/example/app/video-feed/index.tsx

@@ -0,0 +1,119 @@
+import { LegendList } from "@legendapp/list";
+import { useState } from "react";
+import { useEffect } from "react";
+import { Dimensions, LogBox, StyleSheet, Text, View } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+const WINDOW_HEIGHT = Dimensions.get("window").height;
+const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5", "#9B59B6", "#3498DB"];
+
+const initialData = Array.from({ length: 8 }, (_, index) => ({
+    id: index.toString(),
+    color: colors[index % colors.length],
+}));
+
+export default function VideoFeed() {
+    const [data, setData] = useState(initialData);
+    const [height, setHeight] = useState(0);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setData(
+                Array.from({ length: 10 }, (_, index) => ({
+                    id: index.toString(),
+                    color: colors[index % colors.length],
+                })),
+            );
+        }, 1000);
+    }, []);
+
+    return (
+        <View style={styles.container} onLayout={(e) => setHeight(e.nativeEvent.layout.height)}>
+            {!!height && (
+                <LegendList
+                    data={data}
+                    renderItem={Item}
+                    keyExtractor={(item) => item.id}
+                    decelerationRate="fast"
+                    showsVerticalScrollIndicator={false}
+                    estimatedItemSize={height}
+                    pagingEnabled
+                    drawDistance={1}
+                    extraData={height}
+                    onEndReached={() => {
+                        setData([
+                            ...data,
+                            ...Array.from({ length: 10 }, (_, index) => ({
+                                id: (data.length + index).toString(),
+                                color: colors[index % colors.length],
+                            })),
+                        ]);
+                    }}
+                />
+            )}
+        </View>
+    );
+}
+
+function Item({ item, extraData }: { item: { id: string; color: string }; extraData: number }) {
+    return (
+        <View style={[styles.rectangle, { height: extraData }]}>
+            <View style={[styles.rectangleInner, { backgroundColor: item.color }]} />
+            <Text style={styles.itemText}>Item {item.id}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    rectangle: {
+        height: WINDOW_HEIGHT,
+        width: "100%",
+        position: "relative",
+    },
+    rectangleInner: {
+        height: "100%",
+        width: "100%",
+    },
+    itemText: {
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        color: "#fff",
+        fontSize: 18,
+        fontWeight: "bold",
+    },
+    redRectangle: {
+        aspectRatio: 1,
+    },
+    redRectangleInner: {
+        height: "100%",
+        width: "100%",
+        backgroundColor: "red",
+        borderRadius: 8,
+    },
+    columnWrapper: {
+        justifyContent: "space-between",
+    },
+    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,
+        height: 100,
+    },
+});