Hello friends, We’re now at the end of RefreshControl component of react native. In today’s tutorial we would learn about 3 props of RefreshControl component known as tintColor, title and titleColor. We would discuss them one by one. But one more thing they both are iOS only props so they works only in iOS devices. So in this tutorial we would learn about React Native RefreshControl tintColor title titleColor iOS Example. You can learn more about them HERE.
Props :-
- tintColor :- This prop is used to change refresh control loading indicator color in iOS.
- title :- This prop is used to set Title text just below the refresh control loading indicator in iOS.
- titleColor :- It is used to set Title text color.
Screenshot :-
Contents in this project React Native RefreshControl tintColor title titleColor iOS Example :-
1. Below is the source code with RefreshControl tintColor, title, titleColor prop.
|
1 2 3 4 5 6 7 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} tintColor="#C51162" title='Loading Content...' titleColor='blue' /> |
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" 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} tintColor="#C51162" title='Loading Content...' titleColor='blue' /> } /> </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 :-
