Hello friends, We’re back with a Refresh Control component tutorial today in react native. In today’s tutorial we would learn about change RefreshControl progress background color in react native. This can be possible via progressBackgroundColor prop. This prop supports all type of color values present in react native. One more important thing, It is a Android ONLY prop and works only in Android devices. So if you’re looking for iOS then it is yet not possible in iOS. You can read more about this prop HERE.
Explanation :-
Contents in this project Change RefreshControl Progress Background Color in React Native :-
1. I’m sharing a small amount of source code here for your explaining only Refresh Control with progressBackgroundColor prop. Because I had already explained all the source code in my previous tutorial HERE. So you can read that tutorial HERE.
|
1 2 3 4 5 6 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} colors={['red']} progressBackgroundColor={'#00B8D4'} /> |
2. 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 |
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} colors={['red']} progressBackgroundColor={'#00B8D4'} /> } /> </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, } }); |
Live Screenshot :-
