Example of Refreshing Prop in RefreshControl in React Native

Hello friends, As you all know we’re trying our best to cover all the topics in react native components one by one. So in today’s tutorial we would learn about example of refreshing prop in RefreshControl in react native. First of all our this tutorial is not our first tutorial regarding to this topic, We had already posted a tutorial explaining how refresh control component works with FlatList component with JSON data. You can read that tutorial HERE. Now the main thing why we’re making this tutorial again. We’re trying our best to explain all the beginners how Refreshing Prop works in RefreshControl. So let’s get started 🙂 .

Live Screenshot of App :-

Example of Refreshing Prop in RefreshControl in React Native

Contents in this project Example of Refreshing Prop in RefreshControl in React Native :-

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

2. Creating our main App component.

3. Creating our fist state named as JSON_DATA with State update method setJSON_DATA. We would use this State to store JSON data coming from server.

4. Creating second state named as visibleIndicator with State update function setVisibleIndicator. This state is used to show and hide the Activity Indicator component which show on App start time and will hide automatically after loading JSON data.

5. Creating third state named as onRefresh with state update function setOnRefresh. This state is used with refreshing prop to enable active refresh.

6. Creating a ASYNC type of function named as fetch_JSON_Data(). In this function we would load all the JSON from sever and store into State.

7. Creating useEffect() inbuilt function with Empty array so it works same as Component did mount.

8. Creating another function named as Invoke_RefreshControl(). We would call this function with user Swipe down our Pull to refresh the screen.

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

10. Creating another component named as divider(). In this component we would simply drawing a Horizontal divider line between list items.

11. Creating return() block, Now here we would make our all 3 components. ActivityIndicator, FlatList with RefreshControl. Here you can see we’re passing refreshing={onRefresh} (Passing onRefresh State to the refreshing prop ).

12. Creating Style.

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

Leave a Reply

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