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';
  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. ];
  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. }
  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. });
  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!