RefreshControl Pull To Refresh JSON FlatList in React Native

Hello friends, In today’s tutorial we would learn about a major component of react native known as RefreshControl. RefreshControl component is used to add swipe down to refresh screen and load new content again from API in react native. We have seen this component used in many applications and one of them in Instagram. We have seen when we pull to screen from top to bottom side it will start loading the new content on our screen. Now to show how this component works properly we are using online JSON API in our tutorial. So in this tutorial we would learn about Example of RefreshControl Pull To Refresh JSON FlatList in React Native.

Contents in this project Example of RefreshControl Pull To Refresh JSON 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 3 States named as JSON_OBJECT, showIndicator and onRefresh with State update method setJSON_OBJECT, setShowIndicator and setOnRefresh.

  1. JSON_OBJECT : To store JSON data coming from API.
  2. showIndicator : To show and hide the ActivityIndicator component.
  3. onRefresh : To control RefreshControl loading.

4. Creating a async function fetchData(). In this function we would simply start a Web call and load JSON data from Server API.

5. Creating useEffect() method, Which works same as Componentdidmount() and here we would call our fetchData() function. So when our app starts it will load data from API.

6. Creating a function named as Call_RefreshControl(). We would call this function in RefreshControl component. In this function we would simply first empty the FlatList JSON data and load it again. So new data will be filled in the list.

7. Creating a component named as ItemRender() with prop title. We would use this prop to render FlatList items.

8. Creating another component named as flatList_header(). We would use this componet to render FlatList header.

9. Creating one more component named as divider(). It is used to render a horizontal line between each item of list.

10. Creating our main return() block, Here we would first make the ActivityIndicator component and then FlatList component. Now in the FlatList refreshControl={ } prop we would call the RefreshControl component.

11. Creating Style.

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

Screenshots :-

RefreshControl Pull To Refresh JSON FlatList in React Native

Leave a Reply

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