IncorrectVisibleRowCountExample.index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';

class IncorrectVisibleRowCountExample extends Component {

  constructor(props) {
    super(props);

    var items = [];

    for (var i = 1; i <= 100; i++) {
       items.push({"key":i.toString()});
    }

    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state = {
      headerString:"",
      dataSource: ds.cloneWithRows(items),
    };

  }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>
          Visible Rows: {this.state.headerString}
        </Text>
        <ListView
          onChangeVisibleRows={this._onChangeVisibleRows}
          style={styles.listview}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
          renderSeparator={this._renderSeparator}
        />
      </View>
    );
  }

  _renderRow = (rowData: object, sectionID, rowID) => {
    return (<View ><Text style={styles.row}>{rowData.key}</Text></View>);
  }
  _renderSeparator = ( sectionID, rowID) => {
    return (<View key={rowID + "separator"} style={styles.separator}/>);
  }

  _onChangeVisibleRows = (visibleRows, changedRows) => {
    var rows = [];
    for(var sectionID in visibleRows){
      for(var rowID in visibleRows[sectionID]){
        if(visibleRows[sectionID][rowID]){
          rows.push(rowID);
        }
      }
    }
    this.setState({
        headerString:rows.join(", "),
        dataSource:this.state.dataSource
      })
  }
}

const styles = StyleSheet.create({
  separator: {
    flexDirection: 'row',
    height:1,
    flex:1,
    backgroundColor: '#000000',
  },
  label:{
    marginTop:20,
    height:64,
  },
  row:{
    flexDirection: 'row',
    height:44,
  },
  listview:{
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('IncorrectVisibleRowCountExample', () => IncorrectVisibleRowCountExample);