listview.js

const React = require('react');
const {
  ListView,
  RefreshControl,
} = React;

React.createClass({
  getInitialState() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (r1, r2) => r1 !== r2,
    });
    return {
      dataSource: ds.cloneWithRowsAndSections(this._genRows([])),
      refreshing: false,
    };
  },
  
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource
        renderRow={this._renderRow}
        renderSection={this._renderSection}
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }>
      />
    );
  },
  
  _onRefresh() {
    this.setState({refreshing: true});
    fetchData().then((newData) => {
      this.setState({
        refreshing: false
        dataSource: this.state.dataSource.cloneWithRowsAndSections(this._genRows(newData))
      });
    });
  },
  
  _genRows(data) {
    // Return an object like
    // {
    //  'section1': ['row1', 'row2', 'row3'],
    //  'section2': ['row1', 'row2', 'row3'],
    // }
  }
});