feat(dependencies): migrate to legend-list

.vscode/settings.json

@@ -24,7 +24,7 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "astro-build.astro-vscode"
   },
-  "cSpell.words": ["Flashlist", "Lato"],
+  "cSpell.words": ["Legendlist", "Lato"],
   "i18n-ally.localesPaths": ["src/translations/"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.disabled": false, // make sure to disable i18n-ally in your global setting and only enable it for such projects

README.md

@@ -93,7 +93,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 - [Expo](https://docs.expo.io/)
 - [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/v4/overview)
-- [Flash list](https://github.com/Shopify/flash-list)
+- [Legend list](https://github.com/LegendApp/legend-list)
 - [React Query](https://tanstack.com/query/v4)
 - [Axios](https://axios-http.com/docs/intro)
 - [React Hook Form](https://react-hook-form.com/)

cli/README.md

@@ -104,7 +104,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 - [Expo](https://docs.expo.io/)
 - [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/)
-- [Flash list](https://github.com/Shopify/flash-list)
+- [Legend List](https://github.com/LegendApp/legend-list)
 - [React Query](https://tanstack.com/query/v4)
 - [Axios](https://axios-http.com/docs/intro)
 - [React Hook Form](https://react-hook-form.com/)

docs/src/content/docs/overview.md

@@ -89,7 +89,7 @@ We value the feedback and contributions of our users, and we encourage you to le
 - [Expo](https://docs.expo.io/)
 - [Expo Router](https://docs.expo.dev/router/introduction/)
 - [Nativewind](https://www.nativewind.dev/v4/overview)
-- [Flash list](https://github.com/Shopify/flash-list)
+- [Legend List](https://github.com/LegendApp/legend-list)
 - [React Query](https://tanstack.com/query/v4)
 - [Axios](https://axios-http.com/docs/intro)
 - [React Hook Form](https://react-hook-form.com/)

package.json

@@ -44,7 +44,7 @@
     "@expo/metro-runtime": "^4.0.1",
     "@gorhom/bottom-sheet": "^5.0.5",
     "@hookform/resolvers": "^3.9.0",
-    "@shopify/flash-list": "1.7.3",
+    "@legendapp/list": "^2.0.0",
     "@tanstack/react-query": "^5.52.1",
     "app-icon-badge": "^0.1.2",
     "axios": "^1.7.5",

src/app/(app)/index.tsx

@@ -1,15 +1,21 @@
-import { FlashList } from '@shopify/flash-list';
+import { type LegendListRenderItemProps } from '@legendapp/list';
 import React from 'react';
 
 import type { Post } from '@/api';
 import { usePosts } from '@/api';
 import { Card } from '@/components/card';
-import { EmptyList, FocusAwareStatusBar, Text, View } from '@/components/ui';
+import {
+  EmptyList,
+  FocusAwareStatusBar,
+  List,
+  Text,
+  View,
+} from '@/components/ui';
 
 export default function Feed() {
   const { data, isPending, isError } = usePosts();
   const renderItem = React.useCallback(
-    ({ item }: { item: Post }) => <Card {...item} />,
+    ({ item }: LegendListRenderItemProps<Post>) => <Card {...item} />,
     []
   );
 
@@ -23,12 +29,16 @@ export default function Feed() {
   return (
     <View className="flex-1 ">
       <FocusAwareStatusBar />
-      <FlashList
-        data={data}
+      <List
+        data={data || []}
         renderItem={renderItem}
-        keyExtractor={(_, index) => `item-${index}`}
+        keyExtractor={(item: Post, index: number) =>
+          item.id?.toString() || `item-${index}`
+        }
         ListEmptyComponent={<EmptyList isLoading={isPending} />}
         estimatedItemSize={300}
+        recycleItems
+        maintainVisibleContentPosition
       />
     </View>
   );

src/components/ui/list.tsx

@@ -1,4 +1,4 @@
-import { FlashList as NFlashList } from '@shopify/flash-list';
+import { LegendList } from '@legendapp/list';
 import React from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
@@ -8,7 +8,7 @@ type Props = {
   isLoading: boolean;
 };
 
-export const List = NFlashList;
+export const List = LegendList;
 
 export const EmptyList = React.memo(({ isLoading }: Props) => {
   return (

src/components/ui/select.tsx

@@ -3,7 +3,7 @@ import {
   BottomSheetFlatList,
   type BottomSheetModal,
 } from '@gorhom/bottom-sheet';
-import { FlashList } from '@shopify/flash-list';
+import { LegendList } from '@legendapp/list';
 import { useColorScheme } from 'nativewind';
 import * as React from 'react';
 import type { FieldValues } from 'react-hook-form';
@@ -56,7 +56,7 @@ const selectTv = tv({
   },
 });
 
-const List = Platform.OS === 'web' ? FlashList : BottomSheetFlatList;
+const List = Platform.OS === 'web' ? LegendList : BottomSheetFlatList;
 
 export type OptionType = { label: string; value: string | number };