MENU


<SectionList>

A performant interface for rendering sectioned lists, supporting the handiest 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>.

Props(inherits ScrollView Props)renderItem requiredsections requiredextraDatainitialNumToRenderinvertedkeyExtractorrefreshingremoveClippedSubviewsrenderSectionFooterrenderSectionHeaderstickySectionHeadersEnabled Component PropsItemSeparatorComponentListEmptyComponentListFooterComponentListHeaderComponentsectionSeparatorComponent
Methods.flashScrollIndicators() iOS.recordInteraction().scrollToLocation() Event PropsonEndReachedonEndReachedThresholdonRefreshonViewableItemsChanged

RESETRUNFULL
import React from "react";import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from "react-native";const DATA = [{title: "Main dishes", data: ["Pizza", "Burger", "Risotto"] },
                      {title: "Sides", data: ["French Fries", "Onion Rings", "Fried Shrimps"]},
                      {title: "Drinks", data: ["Water", "Coke", "Beer"]},
                      {title: "Desserts", data: ["Cheese Cake", "Ice Cream"]}];const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>);const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
  sections={DATA} keyExtractor={(item, index) => item + index}
                        renderItem={({ item }) => <Item title={item} />}
                        renderSectionHeader={({ section: { title } }) => (
                             <Text style={styles.header}>{title}</Text>)} />
  </SafeAreaView>);const styles = StyleSheet.create({
  container: {flex: 1, paddingTop: StatusBar.currentHeight, marginHorizontal: 16},
  item: { backgroundColor: "#f9c2ff", padding: 20, marginVertical: 8},
  header: { fontSize: 32, backgroundColor: "#fff"},
  title: { fontSize: 24}});export default App;