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

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

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

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

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

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

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

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

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

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