5/1/2021 RefreshControl · React Native
React Native 🌞
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 #
RefreshControl
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));
}, []);
Preview My Device iOS Android
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.
https://reactnative.dev/docs/refreshcontrol 1/5
5/1/2021 RefreshControl · React Native
Reference
Props
Inherits View Props.
refreshing
Whether the view should be indicating an active refresh.
TYPE REQUIRED
bool Yes
onRefresh
Called when the view starts refreshing.
TYPE REQUIRED
function No
colors
The colors (at least one) that will be used to draw the refresh indicator.
TYPE REQUIRED PLATFORM
array of color No Android
enabled
https://reactnative.dev/docs/refreshcontrol 2/5
5/1/2021 RefreshControl · React Native
Whether the pull to refresh functionality is enabled.
TYPE REQUIRED PLATFORM
bool No Android
progressBackgroundColor
The background color of the refresh indicator.
TYPE REQUIRED PLATFORM
color No Android
progressViewOffset
Progress view top offset
TYPE REQUIRED PLATFORM
number No Android
size
Size of the refresh indicator, see RefreshControl.SIZE.
TYPE REQUIRED PLATFORM
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) No Android
tintColor
The color of the refresh indicator.
TYPE REQUIRED PLATFORM
l No iOS
https://reactnative.dev/docs/refreshcontrol 3/5
5/1/2021 RefreshControl · React Native
color No iOS
TYPE REQUIRED PLATFORM
title
The title displayed under the refresh indicator.
TYPE REQUIRED PLATFORM
string No iOS
titleColor
Title color.
TYPE REQUIRED PLATFORM
color No iOS
Is this page useful?
Edit this page
Last updated on 28/10/2020
Previous Next
« Pressable ScrollView »
Example
Props
refreshing
onRefresh
colors
enabled
progressBackgroundColor
progressViewOffset
size
https://reactnative.dev/docs/refreshcontrol 4/5
5/1/2021 RefreshControl · React Native
size
tintColor
title
titleColor
DOCS
Getting Started
Tutorial
Components and APIs
More Resources
COMMUNITY
The React Native Community
Who's using React Native?
Ask Questions on Stack Overflow
Contributor Guide
DEV Community
FIND US
Blog
Twitter
GitHub
MORE
React
Privacy Policy
Terms of Service
Copyright © 2021 Facebook, Inc.
https://reactnative.dev/docs/refreshcontrol 5/5
