FlatLists are used for large quantities of scrollable content. They expose the underlying ScrollView, but add performance improvements: only rendering the content on screen (clipping offscreen content), and only updating rows that have changed. Like ScrollViews, they can scroll horizontally or vertically.

    Instead of rendering their children prop, FlatLists render each item in their input data using the renderItem prop. The renderItem prop is a function which takes an item from the data array and maps it to a React Element. Each item in data should be an object with a unique id, so that React can determine when items are rearranged. The unique id is looked up as item.key by default, but you can specify another way to find/build the id by passing a keyExtractor function prop.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!