Hello friends, In today’s tutorial we would learn about setting main color of Refresh Control component in react native. As you all know recently we have start covering all the tutorials regarding Refresh control one by one. Refresh Control supports native color code, So there are two props one for Android and one for iOS to set color of refresh control component. We would discuss both of them in our tutorial. So in this tutorial we would learn about Example of Change Color of RefreshControl in React Native.
Default RefreshControl color :-
RefreshControl after changing color :-
Props :-
- colors:- This prop is Android Only prop. In this prop we have to pass Array of Color codes. It is used to set refresh control color in Android devices.
- tintColor:- This prop is iOS Only prop. It is used to set refresh control color in iOS devices.
Contents in this project Example of Change Color of RefreshControl in React Native :-
1. On this block I’m sharing a small line of code, So you can understand how it works. As you can see in Below line of code we’re using colors prop for Android and tintColor prop for iOS.
Note :- I have already make a tutorial explaining all source code present in this tutorial. You can read that tutorial from HERE.
|
1 2 3 4 5 6 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} colors={['#D50000']} tintColor={'#D50000'} /> |
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={['#D50000']} tintColor={'#D50000'} /> } /> </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, } }); |
Screenshot in Android :-
Screenshot in iOS :-
