Hello friends, In today’s tutorial we would learn about Enabled prop of RefreshControl component in react native. This prop supports Boolean True False value. If we pass Enabled as False then it will Disable the RefreshControl and pull to refresh will not work. We can also control this value using State as per our choice of coding. To understand easily I’m just using False value here. Now the main thing is that Enable prop is Android only prop and does work only in Android devices. So for now there is now way to disable RefreshControl in iOS devices. So in this tutorial we would learn about Enable Disable RefreshControl in React Native Android Only.
Contents in this project Enable Disable RefreshControl in React Native Android Only :-
1. Friends, I had already made tutorial regarding RefreshControl component. In this tutorial we’re just writing one more line of code Here today. So I thing there is no need to explain you all the code again to you. If you want to understand all the source code I’m writing here you can READ my THIS TUTORIAL HERE.
2. Below is the Refresh Control component code with enabled prop false value.
|
1 2 3 4 5 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} enabled={false} /> |
3. 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 |
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} enabled={false} /> } /> </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 :-
