LegendApp · mbilenko-florio · Jan 9, 2025 · Jan 10, 2025 · Jan 10, 2025 · Jan 12, 2025
diff --git a/example/app.json b/example/app.json
@@ -40,6 +40,10 @@
         "experiments": {
             "typedRoutes": true,
             "reactCompiler": false
-        }
+        },
+        "autolinking": {
+            "searchPaths": ["../packages"]
+          }
+
     }
 }
diff --git a/example/app/(tabs)/_layout.tsx b/example/app/(tabs)/_layout.tsx
@@ -40,6 +40,24 @@ export default function TabLayout() {
                         <IconSymbol size={28} name="chevron.left.forwardslash.chevron.right" color={color} />
                     ),
                 }}
+            />
+             <Tabs.Screen
+                name="cards-fc"
+                options={{
+                    title: "Cards FL",
+                    tabBarIcon: ({ color }) => (
+                        <IconSymbol size={28} name="chevron.left.forwardslash.chevron.right" color={color} />
+                    ),
+                }}
+            />
+             <Tabs.Screen
+                name="cards-fc-skel"
+                options={{
+                    title: "Cards SKEL",
+                    tabBarIcon: ({ color }) => (
+                        <IconSymbol size={28} name="chevron.left.forwardslash.chevron.right" color={color} />
+                    ),
+                }}
             />
             <Tabs.Screen
                 name="moviesL"

diff --git a/example/app/(tabs)/cards-fc-skel.tsx b/example/app/(tabs)/cards-fc-skel.tsx
@@ -0,0 +1,115 @@
+import { CardSkeleton, type Item, renderItem } from "@/app/cards-renderItem";
+import { DO_SCROLL_TEST, DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH } from "@/constants/constants";
+import { useScrollTest } from "@/constants/useScrollTest";
+import { LegendList, type LegendListRef } from "@legendapp/list";
+import { useRef, useState } from "react";
+import { LogBox, Platform, StyleSheet, Text, View } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+interface CardsProps {
+    numColumns?: number;
+}
+
+export default function Cards({ numColumns = 1 }: CardsProps) {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 1000 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    if (DO_SCROLL_TEST) {
+        useScrollTest((offset) => {
+            listRef.current?.scrollToOffset({
+                offset: offset,
+                animated: true,
+            });
+        });
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
+            <LegendList
+                ref={listRef}
+                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}
+                numColumns={numColumns}
+                // initialScrollIndex={50}
+                // alignItemsAtEnd
+                // maintainScrollAtEnd
+                // onEndReached={({ distanceFromEnd }) => {
+                //     console.log("onEndReached", distanceFromEnd);
+                // }}
+                ListHeaderComponent={<View />}
+                ListHeaderComponentStyle={styles.listHeader}
+                ListFooterComponent={<View />}
+                ListFooterComponentStyle={styles.listHeader}
+                ListEmptyComponentStyle={{ flex: 1 }}
+                ListEmptyComponent={
+                    <View style={styles.listEmpty}>
+                        <Text style={{ color: "white" }}>Empty</Text>
+                    </View>
+                }
+                useFlashListContainers={true}
+                SkeletonComponent={CardSkeleton}
+                waitForInitialLayout={false}
+                // viewabilityConfigCallbackPairs={[
+                //     {
+                //         viewabilityConfig: { id: "viewability", viewAreaCoveragePercentThreshold: 50 },
+                //         // onViewableItemsChanged: ({ viewableItems, changed }) => {
+                //         //     console.log(
+                //         //         'onViewableItems',
+                //         //         viewableItems.map((v) => v.key),
+                //         //     );
+                //         //     // console.log('onViewableChanged', changed);
+                //         // },
+                //     },
+                // ]}
+
+                // initialScrollOffset={20000}
+                // initialScrollIndex={500}
+                // inverted
+                // horizontal
+            />
+        </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",
+    },
+});
diff --git a/example/app/(tabs)/cards-fc.tsx b/example/app/(tabs)/cards-fc.tsx
@@ -0,0 +1,114 @@
+import { type Item, renderItem } from "@/app/cards-renderItem";
+import { DO_SCROLL_TEST, DRAW_DISTANCE, ESTIMATED_ITEM_LENGTH } from "@/constants/constants";
+import { useScrollTest } from "@/constants/useScrollTest";
+import { LegendList, type LegendListRef } from "@legendapp/list";
+import { useRef, useState } from "react";
+import { LogBox, Platform, StyleSheet, Text, View } from "react-native";
+
+LogBox.ignoreLogs(["Open debugger"]);
+
+interface CardsProps {
+    numColumns?: number;
+}
+
+export default function Cards({ numColumns = 1 }: CardsProps) {
+    const listRef = useRef<LegendListRef>(null);
+
+    const [data, setData] = useState<Item[]>(
+        () =>
+            Array.from({ length: 1000 }, (_, i) => ({
+                id: i.toString(),
+            })) as any[],
+    );
+
+    if (DO_SCROLL_TEST) {
+        useScrollTest((offset) => {
+            listRef.current?.scrollToOffset({
+                offset: offset,
+                animated: true,
+            });
+        });
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, styles.outerContainer]} key="legendlist">
+            <LegendList
+                ref={listRef}
+                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}
+                numColumns={numColumns}
+                // initialScrollIndex={50}
+                // alignItemsAtEnd
+                // maintainScrollAtEnd
+                // onEndReached={({ distanceFromEnd }) => {
+                //     console.log("onEndReached", distanceFromEnd);
+                // }}
+                ListHeaderComponent={<View />}
+                ListHeaderComponentStyle={styles.listHeader}
+                ListFooterComponent={<View />}
+                ListFooterComponentStyle={styles.listHeader}
+                ListEmptyComponentStyle={{ flex: 1 }}
+                ListEmptyComponent={
+                    <View style={styles.listEmpty}>
+                        <Text style={{ color: "white" }}>Empty</Text>
+                    </View>
+                }
+                useFlashListContainers={true}
+                waitForInitialLayout={false}
+                // viewabilityConfigCallbackPairs={[
+                //     {
+                //         viewabilityConfig: { id: "viewability", viewAreaCoveragePercentThreshold: 50 },
+                //         // onViewableItemsChanged: ({ viewableItems, changed }) => {
+                //         //     console.log(
+                //         //         'onViewableItems',
+                //         //         viewableItems.map((v) => v.key),
+                //         //     );
+                //         //     // console.log('onViewableChanged', changed);
+                //         // },
+                //     },
+                // ]}
+
+                // initialScrollOffset={20000}
+                // initialScrollIndex={500}
+                // inverted
+                // horizontal
+            />
+        </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",
+    },
+});
diff --git a/example/app/(tabs)/cards.tsx b/example/app/(tabs)/cards.tsx
@@ -41,7 +41,7 @@ export default function Cards({ numColumns = 1 }: CardsProps) {
                 keyExtractor={(item) => `id${item.id}`}
                 estimatedItemSize={ESTIMATED_ITEM_LENGTH}
                 drawDistance={DRAW_DISTANCE}
-                maintainVisibleContentPosition
+                //maintainVisibleContentPosition
                 recycleItems={true}
                 numColumns={numColumns}
                 // initialScrollIndex={50}

diff --git a/example/app/(tabs)/index.tsx b/example/app/(tabs)/index.tsx
@@ -78,13 +78,15 @@ const ListItem = ({ title, url }: ListElement) => (
 );
 
 const ListElements = () => {
+    console.info("App started")
     return (
         <SafeAreaView style={styles.container}>
             <LegendList
                 estimatedItemSize={60}
                 data={data}
                 renderItem={({ item }) => <ListItem {...item} />}
                 keyExtractor={(item) => item.id.toString()}
+                useFlashListContainers
                 onItemSizeChanged={(info) => {
                     console.log("item size changed", info);
                 }}

diff --git a/example/app/cards-flashlist/index.tsx b/example/app/cards-flashlist/index.tsx
@@ -93,8 +93,9 @@ const styles = StyleSheet.create({
         // borderBottomColor: "#ccc",
     },
     listContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 48,
+        width: 400,
+        maxWidth: "100%",
+        marginHorizontal: "auto",
     },
     itemTitle: {
         fontSize: 18,

diff --git a/example/app/cards-renderItem.tsx b/example/app/cards-renderItem.tsx
@@ -119,7 +119,7 @@ export const ItemCard = ({
     const refSwipeable = useRef<SwipeableMethods>();
 
     // A useState that resets when the item is recycled
-    const [isExpanded, setIsExpanded] = useRecyclingState ? useRecyclingState(() => false) : useState(() => false);
+    const [isExpanded, setIsExpanded] = useState(() => false);
 
     const swipeableState = useRef(false);
 
@@ -262,6 +262,39 @@ export const ItemCard = ({
     );
 };
 
+export const CardSkeletonBlur = () => {
+    return <Image style={{ height: 310, width: '100%', backgroundColor: 'blue', resizeMode: 'stretch' }} source={require('./moblur.png')} />;
+}
+export const CardSkeleton = () => {
+    return (
+        <View style={{ height: 300, borderRadius: 10, backgroundColor: "white", margin: 10, padding: 10 }}>
+            <View style={{ flexDirection: "row" }}>
+                <View
+                    style={{
+                        width: 40,
+                        height: 40,
+                        borderRadius: 20,
+                        marginRight: 12,
+                        backgroundColor: "grey",
+                        paddingBottom: 10,
+                        marginBottom: 15,
+                    }}
+                />
+                <View style={{ height: 10, backgroundColor: "#8a8a8a", margin: 5, marginBottom: 8, width: 120,borderRadius:5 }} />
+            </View>
+            <View style={{ height: 8, backgroundColor: "#8a8a8a", margin: 5, marginBottom: 8, width: 120 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5, borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5,borderRadius:5 }} />
+            <View style={{ height: 10, backgroundColor: "lightgrey", margin: 5, borderRadius:5 }} />
+        </View>
+    );
+};
+
 export const renderItem = (props: LegendListRenderItemProps<Item>) => <ItemCard {...props} />;
 
 const styles = StyleSheet.create({

diff --git a/example/app/moblur.png b/example/app/moblur.png
diff --git a/example/app/movies-flashlist/index.tsx b/example/app/movies-flashlist/index.tsx
@@ -1,7 +1,7 @@
 import Movies from "@/components/Movies";
 
 const App = () => {
-    return <Movies isLegend={false} />;
+    return <Movies isLegend={false} recycleItems={false}/>;
 };
 
 export default App;