Example of progressViewOffset in FlatList in React Native

Hello friends, In today’s tutorial we would learn about progressViewOffset in FlatList in react native. The progressViewOffset prop is used with RefreshControl component. Now the main part of our tutorial is to know the work of progressViewOffset. It is used to control Vertical height or vertical margin from top of the screen of loading indicator which display in RefreshControl. In easy words when we add pull down to refresh control on our app then after releasing the pull down control we have seen a loading indicator. So using the progressViewOffset we can control it’s location vertically.

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

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

2. Creating our main App component.

3. Creating a State named as JSON with State update method setJSON. It is used to store JSON Parsing data.

4. Creating another State named as loadingIndicator with State update method setLoadingIndicator. It is used to show and hide the data loading indicator which display at the opening time of app.

5. Creating one more State named as onRefresh with State update method setOnRefresh. It is used to control RefreshControl.

6. Creating a ASYNC function named as parseJSON(). In this function we would parse the JSON data from HTTP URL and store into JSON state. We would also change the value of loadingIndicator State so after loading the data it will hide from the screen.

7. Creating useEffect() method with Empty array and here we would call parseJSON() function. This function is works same as Component did mount.

8. Creating a function named as loadAgain(). In this function First we will empty the JSON state then call the parseJSON() function, So it will load the data again.

9. Creating a Component named as ListItemRender with title prop. It is used to render List items.

10. Creating another component named as divider(). Using this we would render a Horizontal divider line between each list item.

11. Creating return() block, Now here we would make our all components ActivityIndicator, FlatList and RefreshControl with progressViewOffset={100} .

12. Creating Style.

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

Screenshot with progressViewOffset :-

Example of progressViewOffset in FlatList in React NativeScreenshot without progressViewOffset :-

Leave a Reply

Your email address will not be published.