The ListView component in React Native has 2 different functions known as scrollToEnd({}) and scrollTo({}Index_Position), The scrollToEnd({}) function will automatically scroll down at the bottom of ListView at the last index value and scrollTo({}Index_Position) function will give us the functionality to scroll to any given specific ListView item index value. We are using the scrollTo({}Index_Position) function to scroll at the top of ListView by giving index value zero(0). So in this tutorial we are going to create a react native app to Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example tutorial.
Live Screenshot:
scrollToEnd({}) : This function is used with reference of ListView. We can also animate the ListView while it is scrolling using animated: true property, Below is the prototype :
|
1
|
this.refs.ListView_Reference.scrollToEnd({animated: true});
|
scrollTo({}Index_Position) : This function would scroll us to any defined index position of ListView items. But we are setting up to index position as 0 to scroll to top of ListView.
|
1
|
this.refs.ListView_Reference.scrollTo({animated: true}, 0);
|
Arrow images used in this project: These image is create by myself and free for both professional and personal use .
Contents in this project Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example Tutorial:
1. Import StyleSheet, View, Alert, ListView, Text, TouchableOpacity and Image component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, ListView, Text, TouchableOpacity, Image } from ‘react-native’;
|
2. Create constructor() in your project. Now we would make a State named as dataSource and store 1 to 20 items inside it. We would also set DataSource to ListView.
|
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
|
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’,
‘Thirteen’,
‘fourteen’,
‘Fifteen’,
‘Sixteen’,
‘Seventeen’,
‘Eighteen’,
‘Nineteen’,
‘Twenty’
]),
};
}
|
3. Create a function named as ListViewItemSeparator(). This function would display a horizontal separator line between each ListView item.
|
1
2
3
4
5
6
7
8
9
10
11
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
4. Create a function named as GetListViewItem(), This function would display us the Selected item of ListView.
|
1
2
3
4
5
|
GetListViewItem (rowData) {
Alert.alert(rowData);
}
|
5. Create a function named as GoTo_top_function(). Inside this function we would call the scrollTo({}) function with reference of ListView.
|
1
2
3
4
5
|
GoTo_top_function =()=>{
this.refs.ListView_Reference.scrollTo({animated: true}, 0);
}
|
6. Create another function named as GoTo_bottom_function(), Using this function we would scroll at the bottom of the ListView.
|
1
2
3
4
5
|
GoTo_bottom_function =()=>{
this.refs.ListView_Reference.scrollToEnd({animated: true});
}
|
7. Create ListView component in render’s return block.
|
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
|
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>
}
ref=‘ListView_Reference’
/>
</View>
);
}
|
8. Create 2 TouchableOpacity component with image icon inside it. These icons would show just above the ListView. We would also call the GetListViewItem(), GoTo_top_function() function on onPress event.
|
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
|
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>
}
ref=‘ListView_Reference’
/>
<TouchableOpacity activeOpacity={0.5} onPress={this.GoTo_top_function} style={styles.topButton} >
<Image source={{uri : ‘/wp-content/uploads/2018/01/top_arrow_icon.png’}}
style={styles.topButton_Image} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} onPress={this.GoTo_bottom_function} style={styles.bottomButton} >
<Image source={{uri : ‘/wp-content/uploads/2018/01/bottom_arrow_icon.png’}}
style={styles.bottomButton_Image} />
</TouchableOpacity>
</View>
);
}
|
9. Create Style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
topButton:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 70,
},
topButton_Image: {
resizeMode: ‘contain’,
width: 30,
height: 30,
},
bottomButton:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
bottomButton_Image: {
resizeMode: ‘contain’,
width: 30,
height: 30,
}
});
|
10. 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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, ListView, Text, TouchableOpacity, Image } from ‘react-native’;
export default class Mynewproject 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’,
‘Thirteen’,
‘fourteen’,
‘Fifteen’,
‘Sixteen’,
‘Seventeen’,
‘Eighteen’,
‘Nineteen’,
‘Twenty’
]),
};
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
GetListViewItem (rowData) {
Alert.alert(rowData);
}
GoTo_top_function =()=>{
this.refs.ListView_Reference.scrollTo({animated: true}, 0);
}
GoTo_bottom_function =()=>{
this.refs.ListView_Reference.scrollToEnd({animated: true});
}
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>
}
ref=‘ListView_Reference’
/>
<TouchableOpacity activeOpacity={0.5} onPress={this.GoTo_top_function} style={styles.topButton} >
<Image source={{uri : ‘/wp-content/uploads/2018/01/top_arrow_icon.png’}}
style={styles.topButton_Image} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} onPress={this.GoTo_bottom_function} style={styles.bottomButton} >
<Image source={{uri : ‘/wp-content/uploads/2018/01/bottom_arrow_icon.png’}}
style={styles.bottomButton_Image} />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
topButton:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 70,
},
topButton_Image: {
resizeMode: ‘contain’,
width: 30,
height: 30,
},
bottomButton:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
bottomButton_Image: {
resizeMode: ‘contain’,
width: 30,
height: 30,
}
});
|
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
How to Set Background Image as Full Screen in React Native App
React Native Final Tree View in Android iOS Example
React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial
React Native Remove Repeated Duplicate Object Items from Array
React Native Open Web Page in App Using WebView Android iOS Tutorial
