A pull down to refresh control for react native.
npm install react-native-refresh-controlThis is a forked project from Shuangzuan/RCTRefreshControl.
This project added a more user-friendly way to use this package, and I also fix some bugs of the original project.
1. Run npm install DickyT/RCTRefreshControl --save in your project directory.
2. Drag RCTRefreshControl.xcodeproj to your project on Xcode.
3. Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTRefreshControl.a from the Products folder inside the RCTRefreshControl.xcodeproj.
4. Add var RCTRefreshControl = require('react-refresh-control'); to your code.
__I am not going to add a sperate package into npm unless I get the authorization of Shuangzuan__
RCTRefreshControl.ListView as the React.ListViewRCTRefreshControl.ScrollView as the React.ScrollViewThe simple difference between the ListView and ScrollView in React Native is that you can pass your onRefresh event handler into RCTRefreshControl.ListView and RCTRefreshControl.ScrollView.
The event handler below stop the refreshing state of the ListView in 2 seconds once the user pull down the ListView and triggered the refresh.
``jsx`
var onRefreshHandler = (stopRefreshAnimation) => {
setTimeout(stopRefreshAnimation, 2000);
};
And use like this
`jsx`
onRefresh={onRefreshHandler}
/>
Using fewer lines to implement a Pull-To-Refresh
`jsx
'use strict';
import React from 'react-native';
const {
View,
ListView
} = React;
import RCTRefreshControl from 'react-refresh-control';
class MyApp extends React.Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: dataSource.cloneWithRows(['#484848', '#2F9C0A', '#05A5D1'])
};
}
onRefresh(stopRefresh) {
console.log(this.state);
setTimeout(stopRefresh, 2000);
}
renderRow(data) {
return (
);
}
render() {
return (
renderRow={this.renderRow.bind(this)}
onRefresh={this.onRefresh.bind(this)}
/>
);
}
}
React.AppRegistry.registerComponent('RCTRefreshControlDemo', () => RCTRefreshControlDemo);
``
Available under the MIT license. See the LICENSE file for more informatiion.