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

package/example/app/(tabs)/index.tsx

@@ -0,0 +1,205 @@
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { LegendList } from "@legendapp/list";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { Link, type LinkProps } from "expo-router";
+import { useCallback } from "react";
+import { type LayoutChangeEvent, Platform, Pressable, StyleSheet, View, useColorScheme } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+// @ts-expect-error nativeFabricUIManager is not defined in the global object types
+export const IsNewArchitecture = global.nativeFabricUIManager != null;
+
+type ListElement = {
+    id: number;
+    title: string;
+    url: LinkProps["href"];
+    index: number;
+};
+
+const data: ListElement[] = [
+    {
+        title: "Bidirectional Infinite List",
+        url: "/bidirectional-infinite-list",
+    },
+    {
+        title: "Chat example",
+        url: "/chat-example",
+    },
+    {
+        title: "AI Chat",
+        url: "/ai-chat",
+    },
+    {
+        title: "Infinite chat",
+        url: "/chat-infinite",
+    },
+    {
+        title: "Countries List",
+        url: "/countries",
+    },
+    {
+        title: "Lazy List",
+        url: "/lazy-list",
+    },
+    {
+        title: "Accurate scrollToIndex",
+        url: "/accurate-scrollto",
+    },
+    {
+        title: "Accurate scrollToIndex 2",
+        url: "/accurate-scrollto-2",
+    },
+    {
+        title: "Columns",
+        url: "/columns",
+    },
+
+    {
+        title: "Cards Columns",
+        url: "/cards-columns",
+    },
+    {
+        title: "Chat keyboard",
+        url: "/chat-keyboard",
+    },
+    {
+        title: "Movies FlashList",
+        url: "/movies-flashlist",
+    },
+    {
+        title: "Initial scroll index precise navigation",
+        url: "/initial-scroll-index",
+    },
+    {
+        title: "Initial scroll index(free element height)",
+        url: "/initial-scroll-index-free-height",
+    },
+    {
+        title: "Initial Scroll Index keyed",
+        url: "/initial-scroll-index-keyed",
+    },
+    {
+        title: "Mutable elements",
+        url: "/mutable-cells",
+    },
+    {
+        title: "Extra data",
+        url: "/extra-data",
+    },
+    {
+        title: "Countries List(FlashList)",
+        url: "/countries-flashlist",
+    },
+    {
+        title: "Filter elements",
+        url: "/filter-elements",
+    },
+    {
+        title: "Video feed",
+        url: "/video-feed",
+    },
+    {
+        title: "Countries Reorder",
+        url: "/countries-reorder",
+    },
+    {
+        title: "Cards FlashList",
+        url: "/cards-flashlist",
+    },
+    {
+        title: "Cards no recycle",
+        url: "/cards-no-recycle",
+    },
+    {
+        title: "Cards FlatList",
+        url: "/cards-flatlist",
+    },
+    {
+        title: "Add to the end",
+        url: "/add-to-end",
+    },
+    {
+        title: "Chat resize outer",
+        url: "/chat-resize-outer",
+    },
+    {
+        title: "Accurate scrollToHuge",
+        url: "/accurate-scrollto-huge",
+    },
+].map(
+    (v, i) =>
+        ({
+            ...v,
+            id: i + 1,
+        }) as ListElement,
+);
+
+const RightIcon = () => <ThemedText type="subtitle">›</ThemedText>;
+
+const ListItem = ({ title, url, index }: ListElement) => {
+    const theme = useColorScheme() ?? "light";
+
+    return (
+        <Link href={url} asChild>
+            <Pressable>
+                <ThemedView
+                    style={[
+                        styles.item,
+                        { borderColor: theme === "light" ? "#ccc" : "#666" },
+                        index === 0 && { borderTopWidth: 1 },
+                    ]}
+                >
+                    <ThemedText>{title}</ThemedText>
+                    <RightIcon />
+                </ThemedView>
+            </Pressable>
+        </Link>
+    );
+};
+
+const ListElements = () => {
+    const height = useBottomTabBarHeight();
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        console.log("onlayout", event.nativeEvent.layout);
+    }, []);
+    return (
+        <SafeAreaView style={styles.container}>
+            <LegendList
+                estimatedItemSize={60}
+                data={data}
+                renderItem={({ item, index }) => <ListItem {...item} index={index} />}
+                keyExtractor={(item) => item.id.toString()}
+                onItemSizeChanged={(info) => {
+                    console.log("item size changed", info);
+                }}
+                ListHeaderComponent={
+                    <View style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
+                        <ThemedText style={{ fontWeight: "bold" }}>
+                            {IsNewArchitecture ? "New" : "Old"} Architecture, {__DEV__ ? "DEV" : "PROD"}
+                        </ThemedText>
+                    </View>
+                }
+                ListFooterComponent={<View />}
+                ListFooterComponentStyle={{ height: Platform.OS === "ios" ? height : 0 }}
+                onLayout={onLayout}
+            />
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    item: {
+        padding: 16,
+        height: 60,
+        borderBottomWidth: 1,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});
+
+export default ListElements;

package/example/app/(tabs)/moviesL.tsx

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

package/example/app/(tabs)/moviesLR.tsx

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

package/example/app/+not-found.tsx

@@ -0,0 +1,32 @@
+import { Link, Stack } from "expo-router";
+import { StyleSheet } from "react-native";
+
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+
+export default function NotFoundScreen() {
+    return (
+        <>
+            <Stack.Screen options={{ title: "Oops!" }} />
+            <ThemedView style={styles.container}>
+                <ThemedText type="title">This screen doesn't exist.</ThemedText>
+                <Link href="/" style={styles.link}>
+                    <ThemedText type="link">Go to home screen!</ThemedText>
+                </Link>
+            </ThemedView>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+    },
+    link: {
+        marginTop: 15,
+        paddingVertical: 15,
+    },
+});

package/example/app/_layout.tsx

@@ -0,0 +1,34 @@
+import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import "react-native-reanimated";
+import { useColorScheme } from "@/hooks/useColorScheme";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { ReanimatedLogLevel } from "react-native-reanimated";
+import { configureReanimatedLogger } from "react-native-reanimated";
+import { enableFreeze } from "react-native-screens";
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+enableFreeze(); // freeze inactive tabs in the tabbar, to improve benchmarking accuracy
+
+configureReanimatedLogger({
+    level: ReanimatedLogLevel.warn,
+    strict: false, // Reanimated runs in strict mode by default
+});
+
+export default function RootLayout() {
+    const colorScheme = useColorScheme();
+    console.log("starting in", __DEV__ ? "dev" : "prod");
+
+    return (
+        <GestureHandlerRootView style={{ flex: 1 }}>
+            <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+                <Stack>
+                    <Stack.Screen name="(tabs)" options={{ headerShown: false, title: "Examples" }} />
+                    <Stack.Screen name="+not-found" />
+                </Stack>
+                <StatusBar style="auto" />
+            </ThemeProvider>
+        </GestureHandlerRootView>
+    );
+}

package/example/app/accurate-scrollto/index.tsx

@@ -0,0 +1,125 @@
+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 { Button, Platform, StatusBar, StyleSheet, Text, View } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+
+interface CardsProps {
+    numColumns?: number;
+}
+
+export default function AccurateScrollTo({ numColumns = 1 }: CardsProps) {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 1000 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    const buttonText = useRef<string>("");
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.searchContainer}>
+                <TextInput
+                    style={styles.searchInput}
+                    placeholder="Select item to scroll to"
+                    clearButtonMode="while-editing"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    onChangeText={(text) => {
+                        buttonText.current = text;
+                    }}
+                />
+                <Button
+                    title="Scroll to item"
+                    onPress={() => {
+                        const index = Number(buttonText.current) || 0;
+                        console.log("scrolling to index", index);
+                        if (index !== -1) {
+                            listRef.current?.scrollToIndex({ index, animated: true });
+                        }
+                    }}
+                />
+                <Button
+                    title="Scroll to end"
+                    onPress={() => {
+                        console.log("scrolling to end");
+                        listRef.current?.scrollToEnd({ animated: true });
+                    }}
+                />
+            </View>
+            <LegendList
+                ref={listRef}
+                contentContainerStyle={styles.listContainer}
+                data={data}
+                renderItem={renderItem}
+                keyExtractor={(item) => `id${item.id}`}
+                estimatedItemSize={ESTIMATED_ITEM_LENGTH + 120}
+                drawDistance={DRAW_DISTANCE}
+                maintainVisibleContentPosition
+                recycleItems={true}
+                numColumns={numColumns}
+                ListEmptyComponent={
+                    <View style={styles.listEmpty}>
+                        <Text style={{ color: "white" }}>Empty</Text>
+                    </View>
+                }
+            />
+        </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",
+        paddingBottom: 200,
+    },
+    searchContainer: {
+        padding: 8,
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    searchInput: {
+        height: 40,
+        backgroundColor: "#f5f5f5",
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+        flexGrow: 1,
+    },
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+});

package/example/app/accurate-scrollto-2/index.tsx

@@ -0,0 +1,52 @@
+import { LegendList, type LegendListRef, type LegendListRenderItemProps } from "@legendapp/list";
+import { useEffect, useRef } from "react";
+import { Text, View } from "react-native";
+const App = () => {
+    const dummyData = Array.from({ length: 100 }, (_, index) => ({
+        id: index,
+        name: `Item ${index}`,
+        value: Math.floor(Math.random() * 1000),
+        isActive: Math.random() > 0.5,
+        height: Math.floor(Math.random() * 200) + 50, // Random height between 50 and 250
+        createdAt: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString(),
+    }));
+    const renderItem = (props: LegendListRenderItemProps<any>) => {
+        return (
+            <View
+                style={{
+                    padding: 10,
+                    backgroundColor: "#fff",
+                    borderColor: "#ddd",
+                    height: props.item.height,
+                    borderWidth: 1,
+                    borderRadius: 12,
+                }}
+            >
+                <Text style={{ fontWeight: "bold" }}>{props.item.name}</Text>
+            </View>
+        );
+    };
+    const listRef = useRef<LegendListRef>(null);
+    useEffect(() => {
+        setTimeout(() => {
+            listRef.current?.scrollToIndex({
+                index: 80,
+                animated: true,
+            });
+        }, 1000);
+    }, []);
+    return (
+        <View style={{ flex: 1, padding: 20, backgroundColor: "gray" }}>
+            <LegendList
+                ref={listRef}
+                data={dummyData}
+                maintainVisibleContentPosition
+                keyExtractor={(item) => `id${item.id}`}
+                renderItem={renderItem}
+                estimatedItemSize={25}
+                recycleItems
+            />
+        </View>
+    );
+};
+export default App;

package/example/app/accurate-scrollto-huge/index.tsx

@@ -0,0 +1,128 @@
+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 { Button, Platform, StatusBar, StyleSheet, Text, View } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+
+interface CardsProps {
+    numColumns?: number;
+}
+
+export default function AccurateScrollToHuge({ numColumns = 1 }: CardsProps) {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 1000 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    const buttonText = useRef<string>("");
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.searchContainer}>
+                <TextInput
+                    style={styles.searchInput}
+                    placeholder="Select item to scroll to"
+                    clearButtonMode="while-editing"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    onChangeText={(text) => {
+                        buttonText.current = text;
+                    }}
+                />
+                <Button
+                    title="Scroll to item"
+                    onPress={() => {
+                        const index = Number(buttonText.current) || 0;
+                        console.log("scrolling to index", index);
+                        if (index !== -1) {
+                            listRef.current?.scrollToIndex({ index, animated: true });
+                        }
+                    }}
+                />
+                <Button
+                    title="Scroll to end"
+                    onPress={() => {
+                        console.log("scrolling to end");
+                        listRef.current?.scrollToEnd({ animated: true });
+                    }}
+                />
+            </View>
+            <LegendList
+                ref={listRef}
+                contentContainerStyle={styles.listContainer}
+                data={data}
+                // @ts-ignore
+                renderItem={({ item, index }) =>
+                    // @ts-ignore
+                    renderItem({ item, index, numSentences: (indexForData) => ((indexForData * 7919) % 40) + 40 })
+                }
+                keyExtractor={(item) => `id${item.id}`}
+                estimatedItemSize={ESTIMATED_ITEM_LENGTH + 120}
+                drawDistance={DRAW_DISTANCE}
+                maintainVisibleContentPosition
+                recycleItems={true}
+                numColumns={numColumns}
+                ListEmptyComponent={
+                    <View style={styles.listEmpty}>
+                        <Text style={{ color: "white" }}>Empty</Text>
+                    </View>
+                }
+            />
+        </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",
+    },
+    searchContainer: {
+        padding: 8,
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    searchInput: {
+        height: 40,
+        backgroundColor: "#f5f5f5",
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+        flexGrow: 1,
+    },
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+});

package/example/app/add-to-end/index.tsx

@@ -0,0 +1,82 @@
+import { LegendList } from "@legendapp/list";
+import { useState } from "react";
+import { Button, SafeAreaView, StyleSheet, Text, View } from "react-native";
+
+const ListComponent = () => {
+    const [items, setItems] = useState<{ id: string; title: string }[]>([]);
+    const [counter, setCounter] = useState(0);
+
+    const addSixtyItems = () => {
+        const newItems = [];
+        const startIndex = counter;
+
+        for (let i = 0; i < 60; i++) {
+            newItems.push({
+                id: `item-${startIndex + i}`,
+
+                title: `Item ${startIndex + i}`,
+            });
+        }
+
+        setItems([...items, ...newItems]);
+        setCounter((prev) => prev + 60);
+    };
+
+    const renderItem = ({ item }: { item: { id: string; title: string } }) => (
+        <View style={styles.itemContainer}>
+            <Text style={styles.itemText}>{item.title}</Text>
+        </View>
+    );
+
+    return (
+        <SafeAreaView style={styles.safeArea}>
+            <View style={styles.container}>
+                <Button title="Add 60 Items" onPress={addSixtyItems} color="#4285F4" />
+
+                <LegendList
+                    data={items}
+                    renderItem={renderItem}
+                    keyExtractor={(item) => item.id}
+                    style={styles.list}
+                    contentContainerStyle={styles.listContent}
+                    maintainScrollAtEnd
+                />
+            </View>
+        </SafeAreaView>
+    );
+};
+
+const styles = StyleSheet.create({
+    safeArea: {
+        flex: 1,
+        backgroundColor: "#f5f5f5",
+    },
+    container: {
+        flex: 1,
+        padding: 16,
+        backgroundColor: "#f5f5f5",
+    },
+    list: {
+        flex: 1,
+        marginTop: 16,
+    },
+    listContent: {
+        paddingBottom: 16,
+    },
+    itemContainer: {
+        backgroundColor: "white",
+        padding: 16,
+        marginVertical: 8,
+        borderRadius: 8,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1,
+        elevation: 2,
+    },
+    itemText: {
+        fontSize: 16,
+    },
+});
+
+export default ListComponent;