React Native Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example

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 :

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.

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.

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.

3. Create a function named as ListViewItemSeparator(). This function would display a horizontal separator line between each ListView item.

4. Create a function named as GetListViewItem(), This function would display us the Selected item of ListView.

5. Create a function named as GoTo_top_function(). Inside this function we would call the scrollTo({}) function with reference of ListView.

6. Create another function named as GoTo_bottom_function(), Using this function we would scroll at the bottom of the ListView.

7. Create ListView component in render’s return block.

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.

9. Create Style.

10. Complete source code for App.js File :

Screenshots in Android device :

Scroll Down To Bottom and Scroll To Top in ListViewScreenshots in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *