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.

Usage example

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
        ...
      />
    );
  }
  ...
}

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.

Props

• View props...

• refreshing
• onRefresh
• colors
• enabled
• progressBackgroundColor
• progressViewOffset
• size
• tintColor
• title
• titleColor

Reference

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

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
color	No	iOS

title

The title displayed under the refresh indicator.

Type	Required	Platform
string	No	iOS

titleColor

Title color.

Type	Required	Platform
color	No	iOS