React Native SectionList

A performant interface for delivering separated records, supporting the most convenient elements:

React Native SectionList

• 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 

Example

import React, { Component } 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>
);

class App extends Component {
  render() {
    return (
      <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;

This is a comfort covering around <VirtualizedList>, and subsequently acquires its props (as well as those of <ScrollView>) that aren't expressly recorded here, alongside the accompanying provisos:

Interior state isn't safeguarded when content looks out of the render window. Ensure every one of your information is caught in the thing information or outside stores like Transition, Revival, or Transfer.

This is a PureComponent which implies that it will not re-render assuming that props stay shallow-equivalent. Ensure that all that your renderItem capability relies upon is passed as a prop (for example extraData) that isn't === after refreshes, generally your UI may not refresh on changes. This incorporates the information prop and parent part state.

To oblige memory and empower smooth looking over, satisfied is delivered nonconcurrently offscreen. This implies it's feasible to scroll quicker than the fill rate and immediately see clear satisfied. This is a tradeoff that can be changed in accordance with suit the necessities of every application, and we are chipping away at further developing it in the background.

Of course, the rundown searches for a vital prop on every thing and uses that for the Respond key. On the other hand, you can give a custom keyExtractor prop.

Props

renderItem​

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

sections​

The actual data to render, akin to the data prop in Flatlist

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.

initialNumToRender​

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.