SectionList View component is used to show multiple type of data into broken sets. Each data has its unique header and it will automatically call into multiple sets. User can define both header data and section data items. So in this tutorial we would going to create a simple SectionList Component for both iOS Android applications. So let’s get started .
Contents in this project Simple SectionList Component iOS Android Example Tutorial in React Native App:
1. Import StyleSheet, View, SectionList, Text, Platform and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, SectionList, Text, Platform, Alert } from ‘react-native’;
|
2. Create a function named as GetSectionListItem() with item parameter. This function is used to show the SectionList component item click value using Alert message.
|
1
2
3
4
5
|
GetSectionListItem=(item)=>{
Alert.alert(item)
}
|
3. Create 3 array sets in render’s block using Var. We would simply adding the Fruits names from A, B and C and storing them inside Var array.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
var A = [‘Apple’, ‘Apricot’, ‘Avocado’] ;
var B = [‘Banana’, ‘Blackberry’, ‘Blackcurrant’, ‘Blueberry’, ‘Boysenberry’] ;
var C = [‘Cherry’, ‘Coconut’] ;
return (
);
}
|
4. Create a Root view in render’s return block. This View is our main view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
var A = [‘Apple’, ‘Apricot’, ‘Avocado’] ;
var B = [‘Banana’, ‘Blackberry’, ‘Blackcurrant’, ‘Blueberry’, ‘Boysenberry’] ;
var C = [‘Cherry’, ‘Coconut’] ;
return (
<View style={{ marginTop : (Platform.OS) == ‘ios’ ? 20 : 0 }}>
</View>
);
}
|
5. Create the SectionList component in Root View.
sections : Is used to set Title of Each SectionList view and we would also call the var array in it.
renderSectionHeader : This would show the Section Header Title above each part.
renderItem : It is used to show the Items inside the SectionList.
keyExtractor : Gives us the Unique key when the SectionList renders.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
render() {
var A = [‘Apple’, ‘Apricot’, ‘Avocado’] ;
var B = [‘Banana’, ‘Blackberry’, ‘Blackcurrant’, ‘Blueberry’, ‘Boysenberry’] ;
var C = [‘Cherry’, ‘Coconut’] ;
return (
<View style={{ marginTop : (Platform.OS) == ‘ios’ ? 20 : 0 }}>
<SectionList
sections={[
{ title: ‘Fruits Name From A’, data: A },
{ title: ‘Fruits Name From B’, data: B },
{ title: ‘Fruits Name From C’, data: C },
]}
renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }
renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
keyExtractor={ (item, index) => index }
/>
</View>
);
}
|
6. Create Style for Section List Header Title and Section List Items.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
SectionHeaderStyle:{
backgroundColor : ‘#CDDC39’,
fontSize : 20,
padding: 5,
color: ‘#fff’,
},
SectionListItemStyle:{
fontSize : 15,
padding: 5,
color: ‘#000’,
backgroundColor : ‘#F5F5F5’
}
});
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import React, { Component } from ‘react’;
import { StyleSheet, View, SectionList, Text, Platform, Alert } from ‘react-native’;
export default class App extends Component<{}> {
GetSectionListItem=(item)=>{
Alert.alert(item)
}
render() {
var A = [‘Apple’, ‘Apricot’, ‘Avocado’] ;
var B = [‘Banana’, ‘Blackberry’, ‘Blackcurrant’, ‘Blueberry’, ‘Boysenberry’] ;
var C = [‘Cherry’, ‘Coconut’] ;
return (
<View style={{ marginTop : (Platform.OS) == ‘ios’ ? 20 : 0 }}>
<SectionList
sections={[
{ title: ‘Fruits Name From A’, data: A },
{ title: ‘Fruits Name From B’, data: B },
{ title: ‘Fruits Name From C’, data: C },
]}
renderSectionHeader={ ({section}) => <Text style={styles.SectionHeaderStyle}> { section.title } </Text> }
renderItem={ ({item}) => <Text style={styles.SectionListItemStyle} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
keyExtractor={ (item, index) => index }
/>
</View>
);
}
}
const styles = StyleSheet.create({
SectionHeaderStyle:{
backgroundColor : ‘#CDDC39’,
fontSize : 20,
padding: 5,
color: ‘#fff’,
},
SectionListItemStyle:{
fontSize : 15,
padding: 5,
color: ‘#000’,
backgroundColor : ‘#F5F5F5’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
Add Fixed Sticky Header on FlatList in React Native iOS Android Tutorial
React Native Add Items To FlatList Dynamically using TextInput on Button Click
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
Add Header Footer to ListView Component in React Native iOS Android
React Native Add Show Header Footer on FlatList in Android iOS Tutorial
