renderSectionHeader in React Native

renderSectionHeader.js

import React from 'react';
import {StyleSheet, ScrollView, View, Text, SectionList} from 'react-native';

export default class SectionListBasics extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {
              title: 'Top Google Seaches in 2018',
              data: [
                'World Cup',
                'Avicii',
                'Mac Miller',
                'Stan Lee',
                'Black Panther',
              ],
            },
            {
              title: 'Top News Trends of 2018',
              data: [
                'World Cup',
                'Hurricane Florence',
                'Mega Millions Result',
                'Royal Wedding',
                'Election Results',
              ],
            },
            {
              title: 'Top Searched Movies of 2018',
              data: [
                'Black Panther',
                'Dead Pool 2',
                'Venom',
                'Avengers: Infinity War',
                'Bohemian Rhapsody',
              ],
            },
            {
              title: 'Top Searched Athletes of 2018',
              data: [
                'Tristan Thompson',
                'Alexis Sánchez',
                'Lindsey Vonn',
                'Shaun White',
                'Khabib Nurmagomedov',
              ],
            },
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => (
            <Text style={styles.sectionHeader}>{section.title}</Text>
          )}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }