Expo

Get Started
API Reference

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 { 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.

Inherits View Props.

Required Whether the view should be indicating an active refresh.
Type
boolean

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

Whether the pull to refresh functionality is enabled.
TypeDefault
booleantrue

Called when the view starts refreshing.
Type
function

The background color of the refresh indicator.
Type
color

Progress view top offset.
TypeDefault
number0

Size of the refresh indicator.
TypeDefault
RefreshControl.SIZERefreshLayoutConsts.SIZE.DEFAULT

The color of the refresh indicator.
Type
color

The title displayed under the refresh indicator.
Type
string

The color of the refresh indicator title.
Type
color

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.
Type
enum
Constants:
NameTypeValueDescription
DEFAULTint1Default RefreshControl size
LARGEint0Large RefreshControl size