magic starSummarize by Aili

FlatList · React Native


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
Shared by Ganbatte ·
© 2024 NewMotor Inc.