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.
import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
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,
},
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.
Required Whether the view should be indicating an active refresh.
The colors (at least one) that will be used to draw the refresh indicator.
Whether the pull to refresh functionality is enabled.
Called when the view starts refreshing.
The background color of the refresh indicator.
Progress view top offset.
Size of the refresh indicator.
The color of the refresh indicator.
The title displayed under the refresh indicator.
The color of the refresh indicator title.
The SwipeRefreshLayout Android component constants. The actual component size may vary between devices. You can read more about the native component in the
Android documentation.
Constants:
| Name | Type | Value | Description |
|---|
| DEFAULT | int | 1 | Default RefreshControl size |
| LARGE | int | 0 | Large RefreshControl size |