How to use ListView in react native android and iOS application and set onPress on ListView to get clicked item programmatically.
ListView is one of the most oldest and habitual component in Android application development and iOS application development. It is the easiest way to represent single type of multiple data into a single screen with scrolling feature. The scrolling is by default enabled into ListView.
What we are doing in this project :
We are creating a simple ListView with multiple items like one, two, three, four etc. You can set items name according to your requirement. Now we would set onPress method on ListView which would return us the clicked item and we would show the click item using Alert message. This single code works for both Android and iOS devices. So let’s get started .
Contents in this project Simple ListView Component :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add
AppRegistry ,
StyleSheet ,
ListView ,
Text ,
View and
Alert component in import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from ‘react-native’;
|
3. Create constructor in your main class with props parameter. Create super method in constructor. Now create constant ds variable and assign ListView.DataSource rowHasChanged to it, After it set data source ListView item values using this.state .
|
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
|
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘One’,
‘Two’,
‘Three’,
‘Four’,
‘Five’,
‘Six’,
‘Seven’,
‘Eight’,
‘Nine’,
‘Ten’,
‘Eleven’,
‘Twelve’
]),
};
}
|
4. Create a function named as
ListViewItemSeparator . Using this method we are generating the ListView each item separator – divider line.
|
1
2
3
4
5
6
7
8
9
10
11
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
5. Create
GetListViewItem method to show the selected
ListView item name.
|
1
2
3
4
5
|
GetListViewItem (rowData) {
Alert.alert(rowData);
}
|
6. Add View as parent view in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View>
</View>
);
}
|
7. Create custom css class named as MainContainer and rowViewContainer just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
|
8. Call the MainContainer class in View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
9. Add
ListView component inside the View.
dataSource : Calling the data source we have defined earlier using state. This is the ListView item values.
renderSeparator : Calling the ListViewItemSeparator method to display a plane simple line between items.
renderRow : setting up row data using Text component.
onPress : Calling GetListViewItem function on button click.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
}
/>
</View>
|
10. 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
87
88
89
90
91
92
93
94
95
96
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from ‘react-native’;
class MainProject extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘One’,
‘Two’,
‘Three’,
‘Four’,
‘Five’,
‘Six’,
‘Seven’,
‘Eight’,
‘Nine’,
‘Ten’,
‘Eleven’,
‘Twelve’
]),
};
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
GetListViewItem (rowData) {
Alert.alert(rowData);
}
render() {
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
AppRegistry.registerComponent(‘MainProject’, () => MainProject);
|
Screenshots:
Also Read :
React Native Apply Pinch to Zoom Effect on Image iOS Android Example Tutorial
React Native Enable Disable TextInput Programmatically Android iOS
React Native Show Progress bar While Loading WebView Android iOS
React Native Show Realm Database Data into ListView Android iOS Example Tutorial
React Native Set Change Text Component Value Dynamically on Button Click
