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