diff --git a/releases/next/docs/sectionlist.html b/releases/next/docs/sectionlist.html index 5cb9b49d0aa..61928ac2ddd 100644 --- a/releases/next/docs/sectionlist.html +++ b/releases/next/docs/sectionlist.html @@ -1,19 +1,19 @@ SectionList
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

SectionList #

A performant interface for rendering sectioned lists, supporting the most handy features:

  • Fully cross-platform.
  • Configurable viewability callbacks.
  • List header support.
  • List footer support.
  • Item separator support.
  • Section header support.
  • Section separator support.
  • Heterogeneous data and item rendering support.
  • Pull to Refresh.
  • Scroll loading.

If you don't need section support and want a simpler interface, use <FlatList>.

Simple Examples:

<SectionList renderItem={({item}) => <ListItem title={item.title} />} - renderSectionHeader={({section}) => <H1 title={section.key} />} + renderSectionHeader={({section}) => <H1 title={section.title} />} sections={[ // homogenous rendering between sections - {data: [...], key: ...}, - {data: [...], key: ...}, - {data: [...], key: ...}, + {data: [...], title: ...}, + {data: [...], title: ...}, + {data: [...], title: ...}, ]} /> <SectionList sections={[ // heterogeneous rendering between sections - {data: [...], key: ..., renderItem: ...}, - {data: [...], key: ..., renderItem: ...}, - {data: [...], key: ..., renderItem: ...}, + {data: [...], title: ..., renderItem: ...}, + {data: [...], title: ..., renderItem: ...}, + {data: [...], title: ..., renderItem: ...}, ]} />

This is a convenience wrapper around <VirtualizedList>, and thus inherits it's props (as well as those of ScrollView) that aren't explicitly listed @@ -59,7 +59,6 @@ sure to also set the refreshing prop correctly.

#

Default renderer for every item in every section. Can be over-ridden on a per-section basis.

renderSectionFooter?: ?(info: {section: SectionT}) => ?React.Element<any> #

Rendered at the bottom of each section.

renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #

Rendered at the top of each section. These stick to the top of the ScrollView by default on iOS. See stickySectionHeadersEnabled.

sections: Array<SectionT> #

The actual data to render, akin to the data prop in <FlatList>.

General shape:

sections: Array<{ data: Array<SectionItem>, - key: string, renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>, ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>, }>

stickySectionHeadersEnabled?: boolean #

Makes section headers stick to the top of the screen until the next one pushes it off. Only