Example of onViewableItemsChanged in FlatList React Native

Hello friends, In today’s tutorial we would learn about onViewableItemsChanged prop of FlatList component in react native. The onViewableItemsChanged prop calls everytime when viewability of rows of list changed. In simple words each time when user scrolls a list and one element of list came the onViewableItemsChanged prop calls. So in this tutorial we would learn about Example of onViewableItemsChanged in FlatList React Native.

Contents in this project Example of onViewableItemsChanged in FlatList React Native :-

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

2. Creating our main App component.

3. Creating our list elements named as DATA .

4. Creating a component named as ItemRender with prop item. It is used to print list items on screen.

5. Creating a component named as Divider. It is used to render a horizontal line between each item.

6. Creating a function named as onViewableCall(). We would call this function on onViewableItemsChanged={} prop.

7. Creating return() block, Now here we would make our FlatList component.

8. Creating Style.

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

Screenshots :-

Example of onViewableItemsChanged in FlatList React Native

Leave a Reply

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