Version: 0.63

RefreshControl

This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event.

Example

import React from 'react';
import {
ScrollView,
RefreshControl,
StyleSheet,
Text,
SafeAreaView,
} from 'react-native';
import Constants from 'expo-constants';
const wait = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}
const App = () => {
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, []);
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text>Pull down to see RefreshControl indicator</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
flex: 1,
backgroundColor: 'pink',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;

Note: refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.


Reference

Props

Inherits View Props.

refreshing

Whether the view should be indicating an active refresh.

TypeRequired
boolYes

onRefresh

Called when the view starts refreshing.

TypeRequired
functionNo

colors

The colors (at least one) that will be used to draw the refresh indicator.

TypeRequiredPlatform
array of colorNoAndroid

enabled

Whether the pull to refresh functionality is enabled.

TypeRequiredPlatform
boolNoAndroid

progressBackgroundColor

The background color of the refresh indicator.

TypeRequiredPlatform
colorNoAndroid

progressViewOffset

Progress view top offset

TypeRequiredPlatform
numberNoAndroid

size

Size of the refresh indicator, see RefreshControl.SIZE.

TypeRequiredPlatform
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)NoAndroid

tintColor

The color of the refresh indicator.

TypeRequiredPlatform
colorNoiOS

title

The title displayed under the refresh indicator.

TypeRequiredPlatform
stringNoiOS

titleColor

Title color.

TypeRequiredPlatform
colorNoiOS
Last updated on by teikjun