React Native SectionList

To create a list view in React Native using SectionList, first import the SectionList component in code from the React Native library.
  1. import { SectionList } from 'react-native';  
Properties
  1. Sections: Contain actual data to render on the screen.
  2. renderItem: To display the items inside the SectionList.
  3. renderSectionHeader: To show the section header title on each section.
  4. keyExtractor: To extract the unique key for a given item when SectionList render.     
Code
  1. import React, { Component } from "react";  
  2. import { SectionList, Text, StyleSheet, View } from 'react-native';  
  3.   
  4. const Regions = [  
  5.   { title: 'Asia', data: ['India''Bangladesh''Bhutan''China''Japan'] },  
  6.   { title: 'Europe', data: ['Denmark''France''Germany''Italy'] },  
  7.   { title: 'North America', data: ['Canada''Mexico''The United States of America'] }  
  8. ];  
  9.   
  10. class App extends Component {  
  11.   render() {  
  12.     return (  
  13.       <View >  
  14.         <SectionList  
  15.           sections={Regions}  
  16.           renderItem={({ item }) => <Text style={styles.ItemStyle}>{item}</Text>}  
  17.           renderSectionHeader={({ section }) => <Text style={styles.HeaderStyle}>{section.title}</Text>}  
  18.           keyExtractor={(item, index) => index}  
  19.         />  
  20.       </View>  
  21.     );  
  22.   }  
  23. }  
  24.   
  25. const styles = StyleSheet.create({  
  26.   HeaderStyle: {  
  27.     backgroundColor: '#1A237E',  
  28.     fontSize: 20,  
  29.     padding: 5,  
  30.     color: "yellow",  
  31.     borderRadius: 10,  
  32.     textAlign: 'center',  
  33.   },  
  34.   ItemStyle: {  
  35.     padding: 5,  
  36.     color: '#fff',  
  37.     backgroundColor: '#B08395',  
  38.     fontStyle: 'italic',  
  39.     fontFamily: "French Script MT",  
  40.     borderWidth: 1,  
  41.     borderColor: '#d6d7da',  
  42.     fontSize: 20,  
  43.     paddingLeft: 20  
  44.   }  
  45. });  
  46.   
  47. export default App;  
Output
 
    
 
Summary
 
The SectionList component is very easy to use in React Native to create a list view. In my next blog, I will talk more about the SectionList component. Hopefully this helped!