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

package/example/app/chat-resize-outer/index.tsx

@@ -0,0 +1,247 @@
+import { LegendList } from "@legendapp/list";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { Fragment, useState } from "react";
+import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, 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 about your product",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 5,
+    },
+    {
+        id: String(idCounter++),
+        text: "Hello there! How can I assist you today?",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "I'm looking for information about pricing plans",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "We offer several pricing tiers based on your needs",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Our basic plan starts at $9.99 per month",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Do you offer any discounts for annual billing?",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Yes! You can save 20% with our annual billing option",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "That sounds great. What features are included?",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "The basic plan includes all core features plus 10GB storage",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Premium plans include priority support and additional tools",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "I think the basic plan would work for my needs",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Perfect! I can help you get set up with that",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "Thanks for your help so far",
+        sender: "user",
+        timeStamp: Date.now() - MS_PER_SECOND * 4,
+    },
+    {
+        id: String(idCounter++),
+        text: "You're welcome! Is there anything else I can assist with today?",
+        sender: "bot",
+        timeStamp: Date.now() - MS_PER_SECOND * 3,
+    },
+];
+
+const ChatResizeOuter = () => {
+    const [messages, setMessages] = useState<Message[]>(defaultChatMessages);
+    const [inputText, setInputText] = useState("");
+    const headerHeight = Platform.OS === "ios" ? useHeaderHeight() : 80;
+    const [buttonHeight, setButtonHeight] = useState(40);
+
+    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
+                    maintainScrollAtEndThreshold={0.1}
+                    alignItemsAtEnd
+                    renderItem={renderItem}
+                />
+            </KeyboardAvoidingView>
+            <Pressable
+                style={{
+                    height: buttonHeight,
+                    backgroundColor: "rgba(0, 0, 0, 0.1)",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+                onPress={() => {
+                    setButtonHeight(buttonHeight === 40 ? 300 : 40);
+                }}
+            >
+                <Text style={{ fontSize: 16, fontWeight: "medium" }}>Resize</Text>
+            </Pressable>
+        </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 ChatResizeOuter;
+
+const renderItem = ({ item }: { item: Message }) => {
+    return (
+        <Fragment>
+            <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>
+        </Fragment>
+    );
+};

package/example/app/columns/index.tsx

@@ -0,0 +1,78 @@
+import { LegendList } from "@legendapp/list";
+import { useState } from "react";
+import { useEffect } from "react";
+import { LogBox, StyleSheet, Text, View } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+const initialData = Array.from({ length: 8 }, (_, index) => ({ id: index.toString() }));
+
+export default function Columns() {
+    const [data, setData] = useState(initialData);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setData(Array.from({ length: 20 }, (_, index) => ({ id: index.toString() })));
+        }, 1000);
+    });
+
+    return (
+        <View style={styles.container}>
+            <LegendList
+                data={data}
+                renderItem={Item}
+                keyExtractor={(item) => item.id}
+                numColumns={3}
+                columnWrapperStyle={{
+                    columnGap: 16,
+                    rowGap: 16,
+                }}
+            />
+        </View>
+    );
+}
+
+function Item({ item }: { item: { id: string } }) {
+    return (
+        <View style={styles.redRectangle}>
+            <View style={styles.redRectangleInner} />
+            <Text>Item {item.id}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    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,
+    },
+});

package/example/app/countries/index.tsx

@@ -0,0 +1,182 @@
+import { LegendList } from "@legendapp/list";
+import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
+import { useMemo, useState } from "react";
+import { Pressable, StatusBar, StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+
+export const unstable_settings = {
+    initialRouteName: "index",
+};
+
+export const createTitle = () => "Countries";
+
+type Country = {
+    id: string;
+    name: string;
+    flag: string;
+};
+
+// Convert countries object to array and add an id
+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));
+
+type ItemProps = {
+    item: Country;
+    onPress: () => void;
+    isSelected: boolean;
+};
+
+const Item = ({ item, onPress, isSelected }: ItemProps) => (
+    <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [styles.item, isSelected && styles.selectedItem, pressed && styles.pressedItem]}
+    >
+        <View style={styles.flagContainer}>
+            <Text style={styles.flag}>{item.flag}</Text>
+        </View>
+        <View style={styles.contentContainer}>
+            <Text style={[styles.title, isSelected && styles.selectedText]}>
+                {item.name}
+                <Text style={styles.countryCode}> ({item.id})</Text>
+            </Text>
+        </View>
+    </Pressable>
+);
+
+const App = () => {
+    const [selectedId, setSelectedId] = useState<string>();
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const filteredData = useMemo(() => {
+        const query = searchQuery.toLowerCase();
+        return DATA.filter(
+            (country) => country.name.toLowerCase().includes(query) || country.id.toLowerCase().includes(query),
+        );
+    }, [searchQuery]);
+
+    const renderItem = ({ item }: { item: Country }) => {
+        const isSelected = item.id === selectedId;
+        return <Item item={item} onPress={() => setSelectedId(item.id)} isSelected={isSelected} />;
+    };
+
+    return (
+        <SafeAreaProvider>
+            <SafeAreaView style={styles.container}>
+                <View style={styles.searchContainer}>
+                    <TextInput
+                        style={styles.searchInput}
+                        placeholder="Search country or code..."
+                        value={searchQuery}
+                        onChangeText={setSearchQuery}
+                        clearButtonMode="while-editing"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                    />
+                </View>
+                <LegendList
+                    data={filteredData}
+                    renderItem={renderItem}
+                    keyExtractor={(item) => item.id}
+                    extraData={selectedId}
+                    estimatedItemSize={70}
+                    recycleItems
+                    onStartReachedThreshold={0.1}
+                    onStartReached={({ distanceFromStart }) => {
+                        console.log("onStartReached", distanceFromStart);
+                    }}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={({ distanceFromEnd }) => {
+                        console.log("onEndReached", distanceFromEnd);
+                    }}
+                    // ListHeaderComponent={<View style={{ height: 200, backgroundColor: "red" }} />}
+                    // ListFooterComponent={<View style={{ height: 200, backgroundColor: "blue" }} />}
+                    // ItemSeparatorComponent={Separator}
+                />
+            </SafeAreaView>
+        </SafeAreaProvider>
+    );
+};
+
+const Separator = () => <View style={{ height: 40, backgroundColor: "green" }} />;
+
+export default App;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+    searchContainer: {
+        padding: 8,
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+    },
+    searchInput: {
+        height: 40,
+        backgroundColor: "#f5f5f5",
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+    },
+    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/countries-flashlist/index.tsx

@@ -0,0 +1,163 @@
+import { FlashList } from "@shopify/flash-list";
+import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
+import { useMemo, useState } from "react";
+import { Pressable, StatusBar, StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+
+export const unstable_settings = {
+    initialRouteName: "index",
+};
+
+export const createTitle = () => "Countries";
+
+type Country = {
+    id: string;
+    name: string;
+    flag: string;
+};
+
+// Convert countries object to array and add an id
+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));
+
+type ItemProps = {
+    item: Country;
+    onPress: () => void;
+    isSelected: boolean;
+};
+
+const Item = ({ item, onPress, isSelected }: ItemProps) => (
+    <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [styles.item, isSelected && styles.selectedItem, pressed && styles.pressedItem]}
+    >
+        <View style={styles.flagContainer}>
+            <Text style={styles.flag}>{item.flag}</Text>
+        </View>
+        <View style={styles.contentContainer}>
+            <Text style={[styles.title, isSelected && styles.selectedText]}>
+                {item.name}
+                <Text style={styles.countryCode}> ({item.id})</Text>
+            </Text>
+        </View>
+    </Pressable>
+);
+
+const App = () => {
+    const [selectedId, setSelectedId] = useState<string>();
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const filteredData = useMemo(() => {
+        const query = searchQuery.toLowerCase();
+        return DATA.filter(
+            (country) => country.name.toLowerCase().includes(query) || country.id.toLowerCase().includes(query),
+        );
+    }, [searchQuery]);
+
+    const renderItem = ({ item }: { item: Country }) => {
+        const isSelected = item.id === selectedId;
+        return <Item item={item} onPress={() => setSelectedId(item.id)} isSelected={isSelected} />;
+    };
+
+    return (
+        <SafeAreaProvider>
+            <SafeAreaView style={styles.container}>
+                <View style={styles.searchContainer}>
+                    <TextInput
+                        style={styles.searchInput}
+                        placeholder="Search country or code..."
+                        value={searchQuery}
+                        onChangeText={setSearchQuery}
+                        clearButtonMode="while-editing"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                    />
+                </View>
+                <FlashList
+                    data={filteredData}
+                    renderItem={renderItem}
+                    keyExtractor={(item) => item.id}
+                    extraData={selectedId}
+                    estimatedItemSize={70}
+                    //scrollEventThrottle={200}
+                    disableAutoLayout
+                />
+            </SafeAreaView>
+        </SafeAreaProvider>
+    );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+    searchContainer: {
+        padding: 8,
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+    },
+    searchInput: {
+        height: 40,
+        backgroundColor: "#f5f5f5",
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        fontSize: 16,
+    },
+    item: {
+        paddingHorizontal: 16,
+        paddingVertical: 6,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        // 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",
+    },
+});