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

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

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

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

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

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

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

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

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

@@ -1,125 +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 { 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

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

@@ -1,128 +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 { 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

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