React Native Web - ListViewDemo

ListViewDemo.js

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  row: {
    padding: '10px'
  }
});

class Row extends Component {
  render() {
    return <div style={{padding: '10px'}}>{this.props.children}</div>
  }
}

class ListViewDemo extends Component {
  constructor(props) {
    super(props);

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

    const data = this._genRows()

    this.state = {
      dataSource: ds.cloneWithRows(data),
    };
  }

  _genRows() {
    let dataBlob = [];
    for (let i = 0; i < 500; i++) {
      dataBlob.push('Row ' + i);
    }
    return dataBlob;
  }

  _renderRow(rowData) {
    return (
      <Row style={styles.row}>{rowData}</Row>
    );
  }

  render() {
    return (
      <div style={{height: '500px', positiion: 'relative', overflow: 'hidden'}}>
        <ListView
          style={styles.container}
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
          initialListSize={10}
          scrollRenderAheadDistance={1}
          pageSize={1}
        />
      </div>
    );
  }
}

export default ListViewDemo;