[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73759":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},73759,"legend-list","LegendApp\u002Flegend-list","LegendApp","A high-performance list component for React Native and React","https:\u002F\u002Fwww.legendapp.com\u002Fopen-source\u002Flist",null,"TypeScript",3146,124,20,30,0,8,23,74,24,28.29,"MIT License",false,"main",[],"2026-06-12 02:03:17","# Legend List\n\n**Legend List** is a high-performance list component for **React Native**, written purely in Typescript with no native dependencies. It is a drop-in replacement for `FlatList` and `FlashList` with better performance, especially when handling dynamically sized items.\n\n\u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8641e305-ab06-4fb3-a96a-fd220df84985\">\u003C\u002Fvideo>\n\n---\n\n## 🤔 Why Legend List?\n\n*   **Performance:** Designed from the ground up and heavily optimized for performance, it is faster than FlatList and other list libraries in most scenarios.\n*   **Dynamic Item Sizes:** Natively supports items with varying heights without performance hits.\n*   **Drop-in Replacement:** API compatibility with `FlatList` and `FlashList` for easier migration.\n*   **100% JS:** No native module linking required, ensuring easy integration and compatibility across platforms.\n*   **Lightweight:** Our goal is to keep LegendList as small of a dependency as possible. For more advanced use cases, we plan on supporting optional plugins. This ensures that we keep the package size as small as possible.\n*   **Bidirectional infinite lists:** Supports infinite scrolling in both directions with no flashes or scroll jumping\n*   **Chat UIs without inverted:** Chat UIs can align their content to the bottom and maintain scroll at end, so that the list doesn't need to be inverted, which causes weird behavior (in animations, etc...)\n\nFor more information, listen to the Legend List episode of the [React Native Radio Podcast](https:\u002F\u002Finfinite.red\u002Freact-native-radio\u002Frnr-325-legend-list-with-jay-meistrich) and the [livestream with Expo](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=XpZMveUCke8).\n\n---\n## ✨ Additional Features\n\nBeyond standard `FlatList` capabilities:\n\n*   `recycleItems`: (boolean) Toggles item component recycling.\n    *   `true`: Reuses item components for optimal performance. Be cautious if your item components contain local state, as it might be reused unexpectedly.\n    *   `false` (default): Creates new item components every time. Less performant but safer if items have complex internal state.\n*   `maintainScrollAtEnd`: Keeps the list pinned to the tail when the user is already near the end (within `maintainScrollAtEndThreshold * screen height`). Pass `true` for all triggers, or `{ animated?: boolean, on?: { dataChange?: boolean, layout?: boolean, itemLayout?: boolean } }`; if `on` is omitted, the object form also enables all triggers.\n*   `maintainVisibleContentPosition`: Keeps visible content steady during size\u002Flayout changes while scrolling up or when items resize above the viewport (default). Pass `true` or `{ data: true }` to also anchor during data updates; pass `false` to disable; pass `{ size: false }` to opt out of scroll-time stabilization.\n*   `alignItemsAtEnd`: (boolean) Useful for chat UIs, content smaller than the View will be aligned to the bottom of the list.\n\n---\n\n## 📚 Documentation\n\nFor comprehensive documentation, guides, and the full API reference, please visit:\n\n➡️ **[Legend List Documentation Site](https:\u002F\u002Fwww.legendapp.com\u002Fopen-source\u002Flist)**\n\n---\n\n## 💻 Usage\n\n### Installation\n\n```bash\n# Using Bun\nbun add @legendapp\u002Flist\n\n# Using npm\nnpm install @legendapp\u002Flist\n\n# Using Yarn\nyarn add @legendapp\u002Flist\n```\n\n### Typed Imports\n\n- React Native: `@legendapp\u002Flist\u002Freact-native`\n- React: `@legendapp\u002Flist\u002Freact`\n- Root `@legendapp\u002Flist` remains supported, but uses looser typings for broad compatibility.\n\n### Example\n```tsx\nimport React, { useRef } from \"react\"\nimport { View, Image, Text, StyleSheet } from \"react-native\"\nimport { LegendList, LegendListRef, LegendListRenderItemProps } from \"@legendapp\u002Flist\u002Freact-native\"\n\n\u002F\u002F Define the type for your data items\ninterface UserData {\n    id: string;\n    name: string;\n    photoUri: string;\n}\n\nconst LegendListExample = () => {\n    \u002F\u002F Optional: Ref for accessing list methods (e.g., scrollTo)\n    const listRef = useRef\u003CLegendListRef | null>(null)\n\n    const data = []\n\n    const renderItem = ({ item }: LegendListRenderItemProps\u003CUserData>) => {\n        return (\n            \u003CView>\n                \u003CImage source={{ uri: item.photoUri }} \u002F>\n                \u003CText>{item.name}\u003C\u002FText>\n            \u003C\u002FView>\n        )\n    }\n\n    return (\n        \u003CLegendList\n            \u002F\u002F Required Props\n            data={data}\n            renderItem={renderItem}\n\n            \u002F\u002F Recommended props (Improves performance)\n            keyExtractor={(item) => item.id}\n            recycleItems={true}\n\n            \u002F\u002F Recommended if data can change\n            maintainVisibleContentPosition\n\n            ref={listRef}\n        \u002F>\n    )\n}\n\nexport default LegendListExample\n\n```\n\n---\n\n## How to Build\n\n1. `bun i`\n2. `bun run build` will build the package to the `dist` folder.\n\n## Running the Example\n\n1. `cd example`\n2. `bun i`\n3. `bun run ios`\n\n## PRs gladly accepted!\n\nThere's not a ton of code so hopefully it's easy to contribute. If you want to add a missing feature or fix a bug please post an issue to see if development is already in progress so we can make sure to not duplicate work 😀.\n\n## Upcoming Roadmap\n\n- [] Column spans\n- [] overrideItemLayout\n- [] Sticky headers\n- [] Masonry layout\n- [] getItemType\n- [] React DOM implementation\n\n## Community\n\nJoin us on [Discord](https:\u002F\u002Fdiscord.gg\u002FtuW2pAffjA) to get involved with the Legend community.\n\n## 👩‍⚖️ License\n\n[MIT](LICENSE)\n","Legend List 是一个为 React Native 设计的高性能列表组件。它完全使用 TypeScript 编写，不依赖任何原生模块，可以作为 FlatList 和 FlashList 的替代品，尤其擅长处理动态尺寸的项目，同时保持优秀的性能表现。其核心功能包括支持双向无限滚动、动态项大小调整时无闪烁或跳动现象以及聊天界面无需倒置即可实现底部对齐等特性。此外，通过提供如 recycleItems、maintainScrollAtEnd 等高级配置选项，进一步增强了开发者对列表行为的控制能力。适用于需要高性能列表渲染的各种场景，特别是即时通讯应用中复杂多变的消息展示需求。",2,"2026-06-11 03:47:15","high_star"]