AI prompts
base on A high-performance list component for React Native # Legend List
**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.
<video src="https://github.com/user-attachments/assets/8641e305-ab06-4fb3-a96a-fd220df84985"></video>
---
## š¤ Why Legend List?
* **Performance:** Designed from the ground up and heavily optimized for performance, it is faster than FlatList and other list libraries in most scenarios.
* **Dynamic Item Sizes:** Natively supports items with varying heights without performance hits.
* **Drop-in Replacement:** API compatibility with `FlatList` and `FlashList` for easier migration.
* **100% JS:** No native module linking required, ensuring easy integration and compatibility across platforms.
* **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.
* **Bidirectional infinite lists:** Supports infinite scrolling in both directions with no flashes or scroll jumping
* **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...)
For more information, listen to the Legend List episode of the [React Native Radio Podcast](https://infinite.red/react-native-radio/rnr-325-legend-list-with-jay-meistrich) and the [livestream with Expo](https://www.youtube.com/watch?v=XpZMveUCke8).
---
## āØ Additional Features
Beyond standard `FlatList` capabilities:
* `recycleItems`: (boolean) Toggles item component recycling.
* `true`: Reuses item components for optimal performance. Be cautious if your item components contain local state, as it might be reused unexpectedly.
* `false` (default): Creates new item components every time. Less performant but safer if items have complex internal state.
* `maintainScrollAtEnd`: (boolean) If `true` and the user is scrolled near the bottom (within `maintainScrollAtEndThreshold * screen height`), the list automatically scrolls to the end when items are added or heights change. Useful for chat interfaces.
* `alignItemsAtEnd`: (boolean) Useful for chat UIs, content smaller than the View will be aligned to the bottom of the list.
---
## š Documentation
For comprehensive documentation, guides, and the full API reference, please visit:
ā”ļø **[Legend List Documentation Site](https://www.legendapp.com/open-source/list)**
---
## š» Usage
### Installation
```bash
# Using Bun
bun add @legendapp/list
# Using npm
npm install @legendapp/list
# Using Yarn
yarn add @legendapp/list
```
### Example
```tsx
import React, { useRef } from "react"
import { View, Image, Text, StyleSheet } from "react-native"
import { LegendList, LegendListRef, LegendListRenderItemProps } from "@legendapp/list"
// Define the type for your data items
interface UserData {
id: string;
name: string;
photoUri: string;
}
const LegendListExample = () => {
// Optional: Ref for accessing list methods (e.g., scrollTo)
const listRef = useRef<LegendListRef | null>(null)
const data = []
const renderItem = ({ item }: LegendListRenderItemProps<UserData>) => {
return (
<View>
<Image source={{ uri: item.photoUri }} />
<Text>{item.name}</Text>
</View>
)
}
return (
<LegendList
// Required Props
data={data}
renderItem={renderItem}
// Recommended props (Improves performance)
keyExtractor={(item) => item.id}
recycleItems={true}
// Recommended if data can change
maintainVisibleContentPosition
ref={listRef}
/>
)
}
export default LegendListExample
```
---
## How to Build
1. `bun i`
2. `bun run build` will build the package to the `dist` folder.
## Running the Example
1. `cd example`
2. `bun i`
3. `bun run ios`
## PRs gladly accepted!
There'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 š.
## Upcoming Roadmap
- [] Column spans
- [] overrideItemLayout
- [] Sticky headers
- [] Masonry layout
- [] getItemType
- [] React DOM implementation
## Community
Join us on [Discord](https://discord.gg/tuW2pAffjA) to get involved with the Legend community.
## š©āāļø License
[MIT](LICENSE)
", Assign "at most 3 tags" to the expected json: {"id":"13580","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"