How to use FlatList in react native android iOS application with FlatList Item Separator line, custom Flat List items and get item clicked value.
The
FlatList component is used to show common type of structured data into a scrolling view. Each item present in single row one by one. The major benefit of using
FlatList that it renders only items, who shows on the screen and dose not render the items who dose not displaying on the screen. When user scrolls down the FlatList then it automatically render the next elements.
What we are doing in this project :- We are displaying a custom FlatList component with multiple type of similar data. User can get the FlatList item by clicking on it and the selected item would print on the screen using Alert message. This single code works for both Android and iOS devices.
Contents in this project Simple FlatList Component :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add
AppRegistry ,
StyleSheet ,
FlatList ,
Text ,
View and
Alert component in import block.
|
1
|
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert } from ‘react-native’;
|
3. Create
constructor in your main class. For example my project main class with
props parameter. Inside the constructor create
super(props) method. Now using
this.state we are defining the FlatList items array with key . Key should be added with items.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
constructor(props)
{
super(props);
this.state = { FlatListItems: [
{key: ‘One’},
{key: ‘Two’},
{key: ‘Three’},
{key: ‘Four’},
{key: ‘Five’},
{key: ‘Six’},
{key: ‘Seven’},
{key: ‘Eight’},
{key: ‘Nine’},
{key: ‘Ten’},
{key: ‘Eleven’},
{key: ‘Twelve’}
]}
}
|
4. Create a function named as
FlatListItemSeparator . Using this method we are generating the FlatList each item separator – divider line. This method generates a rendering view.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
|
5. Add View as parent view in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View>
</View>
);
}
|
6. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
},
});
|
7. Call the MainContainer class in View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
8. Add
FlatList component inside the parent View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
<FlatList
/>
</View>
);
}
|
9. Set
FlatListItems created inside the
this.state into the FlatList using
data={ this.state.FlatListItems } .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
/>
</View>
);
}
|
10. Call the function
FlatListItemSeparator in FlatList using
ItemSeparatorComponent prop.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
/>
</View>
|
11. Create a CSS style class named as item. Using this class you can modify each element of Flat List.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
|
12. Now we have to render each element in the FlatList using Text component
renderItem={({item}) => <Text style={styles.item}} > {item.key} </Text>} .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item}} > {item.key} </Text>}
/>
</View>
|
13. Final step is to add
onPress=” “ on Text component inside Flat List to retrieve the clicked item value.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item} onPress={ } > {item.key} </Text>}
/>
</View>
|
14. Create a function named as
GetItem(item) to get and show selected item using Alert.
|
1
2
3
4
5
|
GetItem (item) {
Alert.alert(item);
}
|
15. Final step is to call the
GetItem(item) function on
onPress of Text component using bind method and pass item.key with it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
/>
</View>
|
16. Complete source code of index.android.js / index.ios.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert } from ‘react-native’;
class Myproject extends Component {
constructor(props)
{
super(props);
this.state = { FlatListItems: [
{key: ‘One’},
{key: ‘Two’},
{key: ‘Three’},
{key: ‘Four’},
{key: ‘Five’},
{key: ‘Six’},
{key: ‘Seven’},
{key: ‘Eight’},
{key: ‘Nine’},
{key: ‘Ten’},
{key: ‘Eleven’},
{key: ‘Twelve’}
]}
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
GetItem (item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots in iOS device :
Screenshots in Android device :
Also Read :
React Native Solve Warning isMounted(…) is deprecated in plain JavaScript Error
Where can We Find Bundle Identifier for React Native iOS Project
React Native Start Stop Device Vibration on Button Click Android iOS
How to change Image border color in React Native Tutorial
React Native Creating Card View in Android iOS App Example Tutorial
