Created
November 27, 2019 11:37
-
-
Save chummypixels/c46324a3674479c0a7a925ebcb59573c to your computer and use it in GitHub Desktop.
Complete source code for the demonstration of SectionList use i React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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