Getting Started (React Native)

Install

npm install @legendapp/list

Usage

Legend List is a drop-in replacement for FlatList or FlashList. It only renders the items that are in view, which significantly reduces render cost for long lists.

Quick Start

import { Text } from "react-native";
import { LegendList } from "@legendapp/list/react-native";

const items = [
  { id: "1", title: "Item 1" },
  { id: "2", title: "Item 2" },
  { id: "3", title: "Item 3" },
];

export function MyList() {
  return (
    <LegendList
      data={items}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={(item) => item.id}
      recycleItems
    />
  );
}

Switch from FlashList

If you're coming from FlashList, in most cases you can just rename the component and it will work as expected. Legend List does not recycle items by default, so to match FlashList's behavior you can enable recycleItems.

return (
-  <FlashList
+  <LegendList
      data={items}
      renderItem={({ item }) => <Text>{item.title}</Text>}
+     recycleItems
  />
)

Switch from FlatList

Legend List should immediately be much faster. But you may want to add the recycleItems prop for extra performance.

return (
-  <FlatList
+  <LegendList
      data={items}
      renderItem={({ item }) => <Text>{item.title}</Text>}
+     recycleItems
  />
)

See API Reference for all properties of LegendList.

Supported Platforms

• Android
• iOS
• React Native MacOS
• React Native Windows
• TV platforms
• Any React Native platform should work since there's no native code, but if not please let us know!

Community

Join us on Discord or Github to get involved with the Legend community.

Talk to Jay on Bluesky or Twitter.

Contributing

We welcome contributions! Please read our Contributing Guide on Github. And we welcome documentation PRs in our documentation repo.

Legend Kit

Legend Kit is our early but growing collection of high performance headless components, general purpose observables, transformer computeds, React hooks that don't re-render, and observable tools for popular frameworks. Check out Legend Kit to learn more.