FlatList · React Native

FlatList

Section Summary

Performant interface for rendering basic, flat lists

• Fully cross-platform
• Optional horizontal mode
• Configurable viewability callbacks
• Header support
• Footer support
• Separator support
• Pull to Refresh
• Scroll loading
• ScrollToIndex support
• Multiple column support

Differences from VirtualizedList

• Internal state is not preserved when content scrolls out of the render window
• It is a PureComponent, so it will not re-render if props remain shallow-equal
• Content is rendered asynchronously offscreen, which can lead to blank content when scrolling quickly

Key insights

• FlatList is a convenience wrapper around VirtualizedList, inheriting its props and features
• It provides a performant interface for rendering basic, flat lists with many useful features
• Developers need to be aware of certain caveats, such as the preservation of internal state and the asynchronous rendering of content