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 :-
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React, { useEffect, useState } from 'react'; import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, SafeAreaView, Text, View } from 'react-native'; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
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.
|
1 |
const [JSON_DATA, setJSON_DATA] = useState(''); |
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.
|
1 |
const [visibleIndicator, setVisibleIndicator] = useState(true); |
5. Creating third state named as onRefresh with state update function setOnRefresh. This state is used with refreshing prop to enable active refresh.
|
1 |
const [onRefresh, setOnRefresh] = useState(false); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
async function fetch_JSON_Data() { fetch('https://jsonplaceholder.typicode.com/todos/') .then((response) => response.json()) .then((responseJson) => { setJSON_DATA(responseJson); setVisibleIndicator(false); }) .catch((error) => { console.error(error); }); } |
7. Creating useEffect() inbuilt function with Empty array so it works same as Component did mount.
|
1 2 3 4 5 |
useEffect(() => { fetch_JSON_Data(); }, []); |
8. Creating another function named as Invoke_RefreshControl(). We would call this function with user Swipe down our Pull to refresh the screen.
|
1 2 3 4 5 6 7 |
const Invoke_RefreshControl = () => { setJSON_DATA(''); fetch_JSON_Data(); } |
9. Creating a component named as ItemRender with prop title. We would use this component to render FlatList items.
|
1 2 3 4 5 |
const ItemRender = ({ title }) => ( <View style={styleSheet.listItem}> <Text style={styleSheet.itemText}> {title} </Text> </View> ); |
10. Creating another component named as divider(). In this component we would simply drawing a Horizontal divider line between list items.
|
1 2 3 4 5 6 7 8 9 10 11 |
const divider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: 'black', }} /> ); } |
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 ).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <ActivityIndicator size="large" color="red" animating={visibleIndicator} style={styleSheet.activityIndicator} /> <FlatList data={JSON_DATA} renderItem={({ item }) => <ItemRender title={item.title} />} ItemSeparatorComponent={divider} keyExtractor={item => item.id} refreshControl={ <RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} /> } /> </SafeAreaView> ); |
12. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, }, listItem: { paddingLeft: 10, paddingTop: 10, paddingBottom: 10, }, itemText: { fontSize: 23, color: 'black', }, activityIndicator: { position: 'absolute', alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, } }); |
13. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import React, { useEffect, useState } from 'react'; import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, SafeAreaView, Text, View } from 'react-native'; export default function App() { const [JSON_DATA, setJSON_DATA] = useState(''); const [visibleIndicator, setVisibleIndicator] = useState(true); const [onRefresh, setOnRefresh] = useState(false); async function fetch_JSON_Data() { fetch('https://jsonplaceholder.typicode.com/todos/') .then((response) => response.json()) .then((responseJson) => { setJSON_DATA(responseJson); setVisibleIndicator(false); }) .catch((error) => { console.error(error); }); } useEffect(() => { fetch_JSON_Data(); }, []); const Invoke_RefreshControl = () => { setJSON_DATA(''); fetch_JSON_Data(); } const ItemRender = ({ title }) => ( <View style={styleSheet.listItem}> <Text style={styleSheet.itemText}> {title} </Text> </View> ); const divider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: 'black', }} /> ); } return ( <SafeAreaView style={styleSheet.MainContainer}> <ActivityIndicator size="large" color="red" animating={visibleIndicator} style={styleSheet.activityIndicator} /> <FlatList data={JSON_DATA} renderItem={({ item }) => <ItemRender title={item.title} />} ItemSeparatorComponent={divider} keyExtractor={item => item.id} refreshControl={ <RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} /> } /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, }, listItem: { paddingLeft: 10, paddingTop: 10, paddingBottom: 10, }, itemText: { fontSize: 23, color: 'black', }, activityIndicator: { position: 'absolute', alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, } }); |
