Getting Started

Legend List is a high performance virtualized ScrollView library for React Native. Compared to FlatList and FlashList it’s faster, simpler, and has useful features they don’t support.

• ✨ Extremely fast
• ✨ Dynamic item sizes
• ✨ Optional recycling
• ✨ Bidirectional infinite lists
• ✨ Chat list without inverting
• ✨ Maintain content view position
• ✨ Recycling hooks

For more information, listen to Jay’s conversation on React Native Radio here.

Install

Usage

Legend List is a virtualized ScrollView component for React Native with optional recycling, that can massively increase performance of rendering long lists. Rather than rendering every item in the list, it only renders the items that are in view, which significantly reduces the amount of items that need to render.

Legend List is a drop-in replacement for FlatList or FlashList. So since you’re likely coming from one of those, we’ll start with a guide on how to switch.

Switch from FlashList

If you’re coming from FlashList, in most cases you can just rename the component and it will work as expected. But note that Legend List does not recycle items by default, so to match FlashList’s behavior you can enable recycleItems. See Recycling Items for more details of recycling behavior.

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

Switch from FlatList

If you’re coming from FlatList, Legend List should immediately be much faster. But you may want to add the recycleItems prop to add extra performance.

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

See Props for all properties of LegendList.

1.0

Legend List recently reached 1.0. So while we are confident that it’s stable for use in production, the documentation still needs more work.

Supported Platforms

• Android
• iOS
• React Native Web
• React Native MacOS
• React Native Windows (likely but untested)
• 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.