How to implement SectionList in react native
1. Import StyleSheet,Text,View,SectionList, SafeAreaView Component in your class as below.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
} from 'react-native';
import Constants from 'expo-constants';
import {SearchBar} from 'react-native-elements';
2. Declare an array of list to display on SectionList
const DATA = [
{
title: 'Main dishes',
data: ['Pizza', 'Burger', 'Risotto'],
},
{
title: 'Sides',
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
];
3. Set some style to your UI Elements
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
marginHorizontal: 16,
},
item: {
padding: 10,
borderRadius:5,
borderWidth:1,
borderColor:"black",
marginVertical: 5,
},
header: {
fontSize: 20,
fontWeight:'bold'
},
title: {
fontSize: 16,
},
});
4. Create SectionList component inside your render function as below
return (
<SafeAreaView style={styles.container}>
<SectionList
stickySectionHeadersEnabled
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
);
In the above code snippet , sections holds the data to display in list . stickySectionHeadersEnabled is for sticky header section of the list.
5. Complete source code of component will as below
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
} from 'react-native';
import Constants from 'expo-constants';
import {SearchBar} from 'react-native-elements';
const DATA = [
{
title: 'Main dishes',
data: ['Pizza', 'Burger', 'Risotto'],
},
{
title: 'Sides',
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
];
function Item({ title }) {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
export default class SectionListScreen extends Component{
render(){
return (
<SafeAreaView style={styles.container}>
<SectionList
stickySectionHeadersEnabled
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
marginHorizontal: 16,
},
item: {
padding: 10,
borderRadius:5,
borderWidth:1,
borderColor:"black",
marginVertical: 5,
},
header: {
fontSize: 20,
fontWeight:'bold'
},
title: {
fontSize: 16,
},
});
Sahebul Islam
0 Comments
Leave a reply
Your email address will be private. Required fields are marked with *
Name *
Email *
Website
