react-native/website/versioned_docs/0.23/refreshcontrol.md

id, title, original_id

id	title	original_id
version-0.23-refreshcontrol	refreshcontrol	refreshcontrol

RefreshControl #

Edit on GitHub

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

androidsize RefreshLayoutConsts.SIZE.DEFAULT #

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.

Examples #

Edit on GitHub

'use strict';

const React = require('react-native'); const { ScrollView, StyleSheet, RefreshControl, Text, TouchableWithoutFeedback, View, } = React;

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..." 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);

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
    loaded<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loaded <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">,</span>
    isRefreshing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    rowData<span class="token punctuation">:</span> rowData<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}, });

module.exports = RefreshControlExample;

Next →