Skip to content

Instantly share code, notes, and snippets.

@chummypixels
Created November 27, 2019 11:37
Show Gist options
  • Save chummypixels/c46324a3674479c0a7a925ebcb59573c to your computer and use it in GitHub Desktop.
Save chummypixels/c46324a3674479c0a7a925ebcb59573c to your computer and use it in GitHub Desktop.
Complete source code for the demonstration of SectionList use i React Native
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>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 10,
paddingRight: 10,
fontSize: 22,
fontWeight: 'bold',
color: '#fff',
backgroundColor: '#F55145',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment