react-native-vision-list/README.md

The fastest React Native List component.

<h1 align="center">Vision List</h1>

<div align="center">
  <!-- TODO: Add a cool image. -->
  <!-- <img src="docs/static/img/11.png" width="50%">
  <br />
  <br /> -->
  <blockquote><b>📜 The fastest React Native list component.</b></blockquote>
  <pre align="center">yarn add <a href="https://www.npmjs.com/package/react-native-vision-list">react-native-vision-list</a><br/>npx pod-install                  </pre>
</div>

<!-- TODO: Add a cool image to the right. -->
<!-- <br/>
<br/>

<div>
  <img align="right" width="35%" src="docs/static/img/example.png">
</div> -->

### Documentation

> TODO: Add documentation

<!--
* [Guides](https://mrousavy.github.io/react-native-vision-camera/docs/guides)
* [API](https://mrousavy.github.io/react-native-vision-camera/docs/api)
* [Example](./example/) -->

### Features

* Fully native cell virtualization
* Synchronous cell rendering and reparenting powered by Fabric and JSI
* Drop-in replacement for FlatList
* Fast mount, re-render and scrolling

> See the [example](./example/) app

### Example

```tsx
function ContactCell(props) {
  return (
    <View style={styles.cell}>
      <Image source={props.contact.image} />
      <Text>{props.contact.displayName}</Text>
    </View>
  )
}

function App() {
  const contacts = useContactBook()

  return (
    <VisionList
      items={contacts}
      renderItem={(c) => <ContactCell contact={c} />}
    />
  )
}
```

### Sponsored by

VisionList is powered by [Margelo](https://margelo.io).