Lists

Render a collection by mapping data to elements, just like React. A ScrollView gives you a scrollable region; each item is a <View>/<Text> subtree. Add an item and watch only the new row mount. Unchanged rows cost nothing.

Scaling to thousands of rows

For long or infinite lists, use <FlatList> with data, renderItem, and rowHeight (plus an optional keyExtractor). It windows a fixed pool of row widgets and recycles them as you scroll, so a 10,000-row list realizes only the rows on screen. See the flatlist-stress example and the Lists guide for details.

Grouped data and scrolling to an item

SectionList uses the same fixed-height recycling as FlatList, with section headers sharing the row pool. Press Jump to outputs to call scrollToLocation through its ref. Scroll through the inventory to see the grouped rows.

VirtualizedList is an alias for FlatList in Kog; it uses data and renderItem, without React Native's getItem/getItemCount interface.

Next: navigation →