SectionList REACT NATIVE

SectionList

A performant interface for rendering separated records, supporting the foremost helpful features:ated records, supporting the foremost helpful 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.

Example:

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,

    borderRadius:5

  },

  header: {

    fontSize: 32,

    backgroundColor: "#fff"

  },

  title: {

    fontSize: 24

  }

});

export default App;