React Native - SectionList - Mobile Application Development
Felicitations! You are standing in the right place! Today, we engender a SectionList with title and data. The section prop is utilized to engender the list of title and data values. The renderSectionHeader exhibits the header section of the list view.
Our screen will look like this −
Implementation
First, You must set up your local development environment. Follow the below link to set up your local environment.
After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.
Import SectionList, StyleSheet, Text, and View component in our project.
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
Engender a Root View in render’s return block.
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{ title: 'Java Framework', data: ['Spring', 'Struts', 'Hibernate', 'Spark', 'Vaadin'] },
{ title: 'Javascript Framework', data: ['NodeJS', 'Angular',
'ReactJS', 'VueJS', 'jQuery'] },
{ title: 'PHP Framework', data: ['Laravel', 'Sympfony',
'CodeIgniter', 'Cake PHP', 'Fuel PHP'] },
{ title: 'Python Framework', data: ['Django', 'Flask'] },
]}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={styles.
sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}Engender Style
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "purple"
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 22,
fontWeight: 'bold',
color: "#fff",
backgroundColor: 'green',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
color: "#fff"
}
})Complete source code for App.js File
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{ title: 'Java Framework', data: ['Spring', 'Struts',
'Hibernate', 'Spark', 'Vaadin'] },
{ title: 'Javascript Framework', data: ['NodeJS', 'Angular',
'ReactJS', 'VueJS', 'jQuery'] },
{ title: 'PHP Framework', data: ['Laravel', 'Sympfony',
'CodeIgniter', 'Cake PHP', 'Fuel PHP'] },
{ title: 'Python Framework', data: ['Django', 'Flask'] },
]}
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,
backgroundColor: "purple"
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 22,
fontWeight: 'bold',
color: "#fff",
backgroundColor: 'green',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
color: "#fff"
}
})Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android
