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

export default class SectionListComponent extends Component{



    render(){
        return (<View>
            <SectionList
                sections={[
                    {title:'J',data:['Jackson','James','Jillian','Jimmy','Joe']},
                    {title:'D',data:['Nick']},
                ]}
                renderItem={({item})=><Text style={styles.item}>{item}</Text>}
                renderSectionHeader={({section})=><Text style={styles.sectionHeader}>{section.title}</Text>}
            />
        </View>)
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        paddingTop:22
    },
    sectionHeader:{
        paddingTop:2,
        paddingLeft:10,
        paddingRight:10,
        paddingBottom:2,
        fontSize:14,
        fontWeight:'bold',
        backgroundColor:'rgba(247,247,247,1.0)',
    },
    item:{
        padding:10,
        fontSize:18,
        height:44,
    }
});