React NativePullToRefreshViewAndroid
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 #
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);
this.setState({
loaded: this.state.loaded + 10,
isRefreshing: false,
rowData: rowData,
});
}, 5000);
},
});
module.exports = PullToRefreshViewAndroidExample;