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
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?
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!