Hello friends, In today’s tutorial we would learn about ProgressViewOffset prop of RefreshControl component in react native. As we previously learn from our tutorials RefreshControl is used to implement pull down to refresh list control in react native. Now the progress or loading indicator RefreshControl show us by default present in the fix position in the page. But using the ProgressViewOffset we can move it’s location vertically by passing margin from top in number. See the below example and you will understand it more clearly. So in this tutorial we would learn about Example of ProgressViewOffset in RefreshControl in React Native.
Contents in this project Example of ProgressViewOffset in RefreshControl in React Native :-
1. In our first code example we will show you the code where we are not implementing ProgressViewOffset prop.
|
1 2 3 4 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} /> |
Screenshot :-
2. In this code we are setting progressViewOffset={100} .
|
1 2 3 4 5 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} progressViewOffset={100} /> |
Screenshot :-
3. Now again we are setting up progressViewOffset={200}.
|
1 2 3 4 5 |
<RefreshControl refreshing={onRefresh} onRefresh={Invoke_RefreshControl} progressViewOffset={200} /> |
Screenshot :-
4. 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 |
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} progressViewOffset={200} /> } /> </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, } }); |
