# Getting Started (React Native)

Getting Started (React Native) — Legend List documentation.

Source: https://legend.so/list/v3/react-native/getting-started/

Legend List v3 documentation. Current documentation version.

## [Install](https://legend.so/list/v3/react-native/getting-started/#install)

```bash
npm install @legendapp/list
```

## [Usage](https://legend.so/list/v3/react-native/getting-started/#usage)

Legend List is a drop-in replacement for FlatList or FlashList, with better performance now more features for your apps. It only renders the items that are in view, which significantly reduces render cost for long lists.

### [Quick Start](https://legend.so/list/v3/react-native/getting-started/#quick-start)

```jsx
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](https://legend.so/list/v3/react-native/getting-started/#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](https://legend.so/list/v3/api#recycleitems) by default, so to match FlashList's behavior you can enable `recycleItems`.

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

### [Switch from FlatList](https://legend.so/list/v3/react-native/getting-started/#switch-from-flatlist)

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

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

See [API Reference](https://legend.so/list/v3/api) for all properties of LegendList.

## [Supported Platforms](https://legend.so/list/v3/react-native/getting-started/#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](https://legend.so/list/v3/react-native/getting-started/#community)

Join us on [Discord](https://discord.gg/5CBaNtADNX) or [Github](https://github.com/LegendApp/legend-list) to get involved with the Legend community.

Follow Jay on [Twitter](https://twitter.com/jmeistrich) for updates or send a message if you need help.

## [Contributing](https://legend.so/list/v3/react-native/getting-started/#contributing)

We welcome contributions! Please read our [Contributing Guide](https://github.com/LegendApp/legend-list) on Github. And we welcome documentation PRs in our [documentation repo](https://github.com/LegendApp/legend-docs).

## [Legend Kit](https://legend.so/list/v3/react-native/getting-started/#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](https://www.legendapp.com/kit) to learn more.

[View Markdown](https://legend.so/list/v3/react-native/getting-started.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Getting+Started+%28React+Native%29&body=Page%3A+https%3A%2F%2Flegend.so%2Flist%2Fv3%2Freact-native%2Fgetting-started%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)