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.
|
1 2 3 |
import React, { useEffect, useState } from 'react'; import { ActivityIndicator, View, StyleSheet, SafeAreaView, RefreshControl, FlatList, Text } from 'react-native'; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating 3 States named as JSON_OBJECT, showIndicator and onRefresh with State update method setJSON_OBJECT, setShowIndicator and setOnRefresh.
- JSON_OBJECT : To store JSON data coming from API.
- showIndicator : To show and hide the ActivityIndicator component.
- onRefresh : To control RefreshControl loading.
|
1 2 3 4 5 |
const [JSON_OBJECT, setJSON_OBJECT] = useState(''); const [showIndicator, setShowIndicator] = useState(true); const [onRefresh, setOnRefresh] = useState(false); |
4. Creating a async function fetchData(). In this function we would simply start a Web call and load JSON data from Server API.
|
1 2 3 4 5 6 7 8 9 10 11 |
async function fetchData() { fetch('https://jsonplaceholder.typicode.com/todos/') .then((response) => response.json()) .then((responseJson) => { setJSON_OBJECT(responseJson); setShowIndicator(false); }) .catch((error) => { console.error(error); }); } |
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.
|
1 2 3 4 5 |
useEffect(() => { fetchData(); }, []); |
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.
|
1 2 3 4 5 6 7 |
const Call_RefreshControl = () => { setJSON_OBJECT(''); fetchData(); } |
7. Creating a component named as ItemRender() with prop title. We would use this prop to render FlatList items.
|
1 2 3 4 5 |
const ItemRender = ({ title }) => ( <View style={styleSheet.listItem}> <Text style={styleSheet.itemText}> {title} </Text> </View> ); |
8. Creating another component named as flatList_header(). We would use this componet to render FlatList header.
|
1 2 3 4 5 6 7 8 9 10 11 |
const flatList_header = () => { return ( <View style={styleSheet.headerStyle}> <Text style={styleSheet.headerText}> React Native Pull to Refresh JSON FlatList </Text> </View> ); } |
9. Creating one more component named as divider(). It is used to render a horizontal line between each item of list.
|
1 2 3 4 5 6 7 8 9 10 11 |
const divider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: 'black', }} /> ); } |
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.
|
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 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <ActivityIndicator size="large" color="red" animating={showIndicator} style={styleSheet.activityIndicator} /> <FlatList data={JSON_OBJECT} renderItem={({ item }) => <ItemRender title={item.title} />} ItemSeparatorComponent={divider} keyExtractor={item => item.id} ListHeaderComponent={flatList_header} refreshControl={ <RefreshControl refreshing={onRefresh} onRefresh={Call_RefreshControl} /> } /> </SafeAreaView> ); |
11. 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 28 29 30 31 32 33 34 35 36 37 38 39 40 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, }, listItem: { paddingLeft: 12, paddingTop: 10, paddingBottom: 10, }, itemText: { fontSize: 24, color: 'black', }, activityIndicator: { position: 'absolute', alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, }, headerStyle: { height: 48, width: "100%", backgroundColor: "#33691E", justifyContent: 'center', alignItems: 'center' }, headerText: { fontSize: 21, color: 'white' } }); |
12. 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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import React, { useEffect, useState } from 'react'; import { ActivityIndicator, View, StyleSheet, SafeAreaView, RefreshControl, FlatList, Text } from 'react-native'; export default function App() { const [JSON_OBJECT, setJSON_OBJECT] = useState(''); const [showIndicator, setShowIndicator] = useState(true); const [onRefresh, setOnRefresh] = useState(false); async function fetchData() { fetch('https://jsonplaceholder.typicode.com/todos/') .then((response) => response.json()) .then((responseJson) => { setJSON_OBJECT(responseJson); setShowIndicator(false); }) .catch((error) => { console.error(error); }); } useEffect(() => { fetchData(); }, []); const Call_RefreshControl = () => { setJSON_OBJECT(''); fetchData(); } const ItemRender = ({ title }) => ( <View style={styleSheet.listItem}> <Text style={styleSheet.itemText}> {title} </Text> </View> ); const flatList_header = () => { return ( <View style={styleSheet.headerStyle}> <Text style={styleSheet.headerText}> React Native Pull to Refresh JSON FlatList </Text> </View> ); } const divider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: 'black', }} /> ); } return ( <SafeAreaView style={styleSheet.MainContainer}> <ActivityIndicator size="large" color="red" animating={showIndicator} style={styleSheet.activityIndicator} /> <FlatList data={JSON_OBJECT} renderItem={({ item }) => <ItemRender title={item.title} />} ItemSeparatorComponent={divider} keyExtractor={item => item.id} ListHeaderComponent={flatList_header} refreshControl={ <RefreshControl refreshing={onRefresh} onRefresh={Call_RefreshControl} /> } /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, }, listItem: { paddingLeft: 12, paddingTop: 10, paddingBottom: 10, }, itemText: { fontSize: 24, color: 'black', }, activityIndicator: { position: 'absolute', alignItems: 'center', justifyContent: 'center', left: 0, right: 0, top: 0, bottom: 0, }, headerStyle: { height: 48, width: "100%", backgroundColor: "#33691E", justifyContent: 'center', alignItems: 'center' }, headerText: { fontSize: 21, color: 'white' } }); |
Screenshots :-
