VirtualizedList
Base implementation for the more convenient <FlatList>
and <SectionList>
components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList
provides, e.g. for use with immutable data instead of plain arrays.
Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.
Exampleβ
- TypeScript
- JavaScript
Some caveats:
- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
- This is a
PureComponent
which means that it will not re-render ifprops
are shallow-equal. Make sure that everything yourrenderItem
function depends on is passed as a prop (e.g.extraData
) that is not===
after updates, otherwise your UI may not update on changes. This includes thedata
prop and parent component state. - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
- By default, the list looks for a
key
prop on each item and uses that for the React key. Alternatively, you can provide a customkeyExtractor
prop.
Reference
Propsβ
ScrollView Propsβ
Inherits ScrollView Props.
data
β
Opaque data type passed to getItem
and getItemCount
to retrieve items.
Type |
---|
any |
Required getItem
β
(data: any, index: number) => any;
A generic accessor for extracting an item from any sort of data blob.
Type |
---|
function |
Required getItemCount
β
(data: any) => number;
Determines how many items are in the data blob.
Type |
---|
function |
Required renderItem
β
(info: any) => ?React.Element<any>
Takes an item from data
and renders it into the list
Type |
---|
function |
CellRendererComponent
β
Each cell is rendered using this element. Can be a React Component Class, or a render function. Defaults to using View
.
Type |
---|
component, function |
ItemSeparatorComponent
β
Rendered in between each item, but not at the top or bottom. By default, highlighted
and leadingItem
props are provided. renderItem
provides separators.highlight
/unhighlight
which will update the highlighted
prop, but you can also add custom props with separators.updateProps
. Can be a React Component (e.g. SomeComponent
), or a React element (e.g. <SomeComponent />
).
Type |
---|
component, function, element |
ListEmptyComponent
β
Rendered when the list is empty. Can be a React Component (e.g. SomeComponent
), or a React element (e.g. <SomeComponent />
).
Type |
---|
component, element |
ListItemComponent
β
Each data item is rendered using this element. Can be a React Component Class, or a render function.
Type |
---|
component, function |
ListFooterComponent
β
Rendered at the bottom of all the items. Can be a React Component (e.g. SomeComponent
), or a React element (e.g. <SomeComponent />
).
Type |
---|
component, element |
ListFooterComponentStyle
β
Styling for internal View for ListFooterComponent
.
Type | Required |
---|---|
ViewStyleProp | No |
ListHeaderComponent
β
Rendered at the top of all the items. Can be a React Component (e.g. SomeComponent
), or a React element (e.g. <SomeComponent />
).
Type |
---|
component, element |
ListHeaderComponentStyle
β
Styling for internal View for ListHeaderComponent
.
Type |
---|
View Style |
debug
β
debug
will turn on extra logging and visual overlays to aid with debugging both usage and implementation, but with a significant perf hit.
Type |
---|
boolean |
disableVirtualization
β
Deprecated. Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.
Type |
---|
boolean |
extraData
β
A marker property for telling the list to re-render (since it implements PureComponent
). If any of your renderItem
, Header, Footer, etc. functions depend on anything outside of the data
prop, stick it here and treat it immutably.
Type |
---|
any |
getItemLayout
β
(
data: any,
index: number,
) => {length: number, offset: number, index: number}
Type |
---|
function |