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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 (
      <ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >
      ...
      </ListView>
    );
  }
  ...
}

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

Props

View props...

onRefresh function

Called when the view starts refreshing.

refreshing bool

Whether the view should be indicating an active refresh.

androidcolors [color]

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

androidenabled bool

Whether the pull to refresh functionality is enabled.

androidprogressBackgroundColor color

The background color of the refresh indicator.

androidprogressViewOffset number

Progress view top offset

androidsize enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)

Size of the refresh indicator, see RefreshControl.SIZE.

iostintColor color

The color of the refresh indicator.

iostitle string

The title displayed under the refresh indicator.

iostitleColor color

Title color.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
'use strict';
 
const React = require('react');
const ReactNative = require('react-native');
const {
  ScrollView,
  StyleSheet,
  RefreshControl,
  Text,
  TouchableWithoutFeedback,
  View,
} = ReactNative;
 
const styles = StyleSheet.create({
  row: {
    borderColor: 'grey',
    borderWidth: 1,
    padding: 20,
    backgroundColor: '#3a5795',
    margin: 5,
  },
  text: {
    alignSelf: 'center',
    color: '#fff',
  },
  scrollview: {
    flex: 1,
  },
});
 
const Row = React.createClass({
  _onClick: function() {
    this.props.onClick(this.props.data);
  },
  render: function() {
    return (
     <TouchableWithoutFeedback onPress={this._onClick} >
        <View style={styles.row}>
          <Text style={styles.text}>
            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    );
  },
});
 
const RefreshControlExample = React.createClass({
  statics: {
    title: '<RefreshControl>',
    description: 'Adds pull-to-refresh support to a scrollview.'
  },
 
  getInitialState() {
    return {
      isRefreshing: false,
      loaded: 0,
      rowData: Array.from(new Array(20)).map(
        (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
    };
  },
 
  _onClick(row) {
    row.clicks++;
    this.setState({
      rowData: this.state.rowData,
    });
  },
 
  render() {
    const rows = this.state.rowData.map((row, ii) => {
      return <Row key={ii} data={row} onClick={this._onClick}/>;
    });
    return (
      <ScrollView
        style={styles.scrollview}
        refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh}
            tintColor="#ff0000"
            title="Loading..."
            titleColor="#00ff00"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
        }>
        {rows}
      </ScrollView>
    );
  },
 
  _onRefresh() {
    this.setState({isRefreshing: true});
    setTimeout(() => {
      // prepend 10 items
      const rowData = Array.from(new Array(10))
      .map((val, i) => ({
        text: 'Loaded row ' + (+this.state.loaded + i),
        clicks: 0,
      }))
      .concat(this.state.rowData);
 
      this.setState({
        loaded: this.state.loaded + 10,
        isRefreshing: false,
        rowData: rowData,
      });
    }, 5000);
  },
});
 
module.exports = RefreshControlExample;
RefreshControl#progressViewOffset
  • References/JavaScript/React Native/Components: RefreshControl

androidprogressViewOffset number Progress view top offset

2025-01-10 15:47:30
RefreshControl#title
  • References/JavaScript/React Native/Components: RefreshControl

iostitle string The title displayed under the refresh indicator.

2025-01-10 15:47:30
RefreshControl#refreshing
  • References/JavaScript/React Native/Components: RefreshControl

refreshing bool Whether the view should be indicating an active refresh.

2025-01-10 15:47:30
RefreshControl#progressBackgroundColor
  • References/JavaScript/React Native/Components: RefreshControl

androidprogressBackgroundColor color

2025-01-10 15:47:30
RefreshControl#enabled
  • References/JavaScript/React Native/Components: RefreshControl

androidenabled bool Whether the pull to refresh functionality is enabled

2025-01-10 15:47:30
RefreshControl#tintColor
  • References/JavaScript/React Native/Components: RefreshControl

iostintColor color

2025-01-10 15:47:30
RefreshControl#colors
  • References/JavaScript/React Native/Components: RefreshControl

androidcolors [color]

2025-01-10 15:47:30
RefreshControl#titleColor
  • References/JavaScript/React Native/Components: RefreshControl

iostitleColor color

2025-01-10 15:47:30
RefreshControl#onRefresh
  • References/JavaScript/React Native/Components: RefreshControl

onRefresh function Called when the view starts refreshing.

2025-01-10 15:47:30
RefreshControl#size
  • References/JavaScript/React Native/Components: RefreshControl

androidsize enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) Size

2025-01-10 15:47:30