Example of scrollToEnd Bottom in FlatList React Native

Hello friends, In today’s tutorial we would learn about scrollToEnd() inbuilt function of FlatList component in react native. The scrollToEnd function is used to add scroll to bottom functionality on FlatList on button click. We would call the scrollToEnd function from outside using reference of FlatList component. When user clicks on the button then it will automatically scroll to bottom of flatlist using animation even though there are hundreds of items on the list. So in this tutorial we would learn about Example of scrollToEnd Bottom in FlatList React Native.

Contents in this project Example of scrollToEnd Bottom in FlatList React Native :-

1. Open your project’s main App.js file and import useState, Button, Text, View, StyleSheet, SafeAreaView and FlatList component.

2. Creating our main App component.

3. Creating a Constant named as FlatList_DATA. We would use Array from method to generate items dynamically for our list.

4. Creating a State named as reference with State update method setReference. We would use this State to store reference of FlatList.

5. Creating a component named as ItemRender with prop item. We would use this component to render list items.

6. Creating a component named as Divider. We would use this component to render divider line between list items.

7. Creating return() block, Here we would make 1 Button component and FlatList component.

8. Creating Style.

9. Complete Source Code for App.js File :-

Screenshots :-

Example of scrollToEnd Bottom in FlatList React Native

Leave a Reply

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