ListView.js

import React from 'react'

const { number, func, array, shape } = React.PropTypes

export default React.createClass({

  propTypes: {
    itemHeight: number.isRequired,
    renderItem: func.isRequired,
    items: array.isRequired,
    style: shape({
      height: number.isRequired
    }).isRequired,
    buffer: number.isRequired
  },

  getDefaultProps() {
    return { buffer: 20 }
  },

  getInitialState() {
    return { scrollTop: 0 }
  },

  render() {
    const { itemHeight, renderItem, items, style, buffer } = this.props
    const { scrollTop } = this.state
    const { height } = style
    const scrollableHeight = items.length * itemHeight
    const firstIndex = Math.floor(scrollTop/itemHeight)
    const lastIndex = Math.floor(height/itemHeight) + firstIndex
    const bufferedFirst = firstIndex < buffer ? 0 : firstIndex - buffer
    const bufferedLast = lastIndex + buffer
    const visibleItems = items.slice(bufferedFirst, bufferedLast)

    return (
      <div
        {...this.props}
        style={{ ...style, height, overflow: 'auto' }}
        onScroll={(event) => {
          this.setState({
            scrollTop: event.target.scrollTop
          })
        }}
      >
        <div style={{
          height: scrollableHeight
        }}>
          <div style={{
            transform: `translate3d(0, ${bufferedFirst * itemHeight}px, 0)`
          }}>
            {visibleItems.map((item, index) => (
              renderItem(item, index + bufferedFirst, index)
            ))}
          </div>
        </div>
      </div>
    )
  }
})