react-native/docs/pulltorefreshviewandroid.md

id, title

id	title
pulltorefreshviewandroid	pulltorefreshviewandroid

PullToRefreshViewAndroid

React view that supports a single scrollable child view (e.g. ScrollView). When this child view is at scrollY: 0, swiping down triggers an onRefresh event.

The style {flex: 1} might be required to ensure the expected behavior of the child component (e.g. when the child is expected to scroll with ScrollView or ListView).

Edit on GitHubProps #

View props... #

colors [ColorPropType] #

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

enabled bool #

Whether the pull to refresh functionality is enabled

progressBackgroundColor ColorPropType #

The background color of the refresh indicator

refreshing bool #

Whether the view should be indicating an active refresh

size RefreshLayoutConsts.SIZE.DEFAULT #

Size of the refresh indicator, see PullToRefreshViewAndroid.SIZE

Edit on GitHubExamples #

'use strict';

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

const styles = StyleSheet.create({ row: { borderColor: 'grey', borderWidth: 1, padding: 20, backgroundColor: '#3a5795', margin: 5, }, text: { alignSelf: 'center', color: '#fff',

}, layout: { flex: 1, }, 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 PullToRefreshViewAndroidExample = React.createClass({ statics: { title: '<PullToRefreshViewAndroid>', description: 'Container that adds pull-to-refresh support to its child view.' },

getInitialState() { return { isRefreshing: false, loaded: 0, rowData: Array.from(new Array(20)).map( (val, i) => {return {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 ( <PullToRefreshViewAndroid style={styles.layout} refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} colors={['#ff0000', '#00ff00', '#0000ff']} progressBackgroundColor={'#ffff00'} > <ScrollView style={styles.scrollview}> {rows} </ScrollView> </PullToRefreshViewAndroid> ); },

_onRefresh() { this.setState({isRefreshing: true}); setTimeout(() => { // prepend 10 items const rowData = Array.from(new Array(10)) .map((val, i) => {return { 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 = PullToRefreshViewAndroidExample;

Next →