index.ios.js

import React, {
  Component,
  AppRegistry,
} from 'react';

import {Text} from 'react-native';

// Import your custom ScrollView here
import ScrollView from './ScrollView.js';

class SampleApp extends Component {
  render() {
    return (
      <ScrollView
      	style={{flex: 1}}
      	onEndReached={() => alert('end reached')}
      	>
        <Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi leo, pellentesque nec ante sed, dictum auctor nibh. Nam fermentum ipsum nec felis pellentesque, vitae blandit odio vulputate. Sed malesuada ultrices felis, porttitor bibendum tellus elementum ac. Cras urna nunc, eleifend dictum posuere nec, ultrices id mi. Donec lorem ipsum, varius sit amet nisl eget, lacinia convallis sem. Etiam varius nunc euismod neque fermentum, vitae vulputate augue eleifend. Donec eget velit id est tempus mollis. Proin lacinia blandit enim at laoreet. Donec eget ipsum quis velit rutrum sagittis. Morbi dignissim interdum leo. Donec vitae urna augue. Aliquam quis mauris sapien. Cras iaculis ut felis vitae sollicitudin. Donec sagittis leo vel ornare convallis.

Proin et leo id leo euismod malesuada in eu quam. Vivamus tincidunt, augue nec varius mollis, dolor sem iaculis urna, eget imperdiet tortor ex vel neque. Vivamus venenatis quam sapien, vitae varius nisl luctus ut. Ut sagittis sapien nunc. Quisque laoreet ligula mi, ut congue quam iaculis ac. Aenean eu justo lacus. Curabitur auctor velit vel tellus commodo interdum. Vivamus consequat porta erat, et rhoncus magna pellentesque nec. Vestibulum fringilla vehicula libero, eget luctus odio ultricies a. Etiam in semper enim, eu blandit lacus. Nullam sagittis leo ligula, in blandit libero facilisis sit amet. Donec enim urna, sodales id massa blandit, vulputate ullamcorper nibh. Aenean tincidunt molestie nisl et ullamcorper.

Fusce eu sagittis nunc. Vestibulum finibus nunc sed risus consectetur tincidunt. Fusce in nulla fringilla, ultricies turpis in, gravida magna. Sed tempus nibh sapien, a facilisis nulla laoreet at. Nunc rhoncus vehicula enim, sit amet auctor risus semper non. Vivamus nec tellus turpis. Vivamus tempor sapien est. Duis scelerisque erat et diam maximus scelerisque. Vestibulum mattis, turpis in consectetur blandit, arcu felis efficitur lorem, sagittis lacinia nibh velit a ipsum. In commodo mattis ipsum eget posuere. Aliquam at augue viverra, vestibulum sapien vel, interdum orci.

Nam sollicitudin efficitur odio. Donec auctor lectus at dolor pellentesque condimentum. Nulla et quam quis diam consectetur porttitor. Proin id suscipit felis, porta tincidunt massa. Vestibulum luctus tempor nulla, vel suscipit sem ultrices ut. Fusce nec dolor egestas mi suscipit porta. Proin ut semper magna. In a turpis sollicitudin, volutpat enim sed, ultrices libero. Donec lobortis aliquet mauris eu auctor. Phasellus et porttitor nunc, eu varius dolor.
        </Text>

      </ScrollView>
    );
  }
}

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

ScrollView.js

import React, {
  Component,
  PropTypes,
} from 'react';

import {
  ScrollView as RNScrollView,
  View,
} from 'react-native';

/**
 * Implement the same onEndReached prop as RN's ListView.
 */
class ScrollView extends Component {
  static propTypes = {
    ...ScrollView.propTypes,
    onEndReached: PropTypes.func,
    onEndReachedThreshold: PropTypes.number,
  };

  static defaultProps = {
    ...ScrollView.defaultProps,
    onEndReached: null,
    onEndReachedThreshold: 0,
  };

  _sentEndForContentLength = null;
  scrollProperties = {
    visibleLength: null,
    contentLength: null,
    offset: 0,
  };

  _setScrollProperties = (e) => {
    let isVertical = !this.props.horizontal;
    this.scrollProperties.visibleLength = e.nativeEvent.layoutMeasurement[isVertical ? 'height' : 'width'];
    this.scrollProperties.contentLength = e.nativeEvent.contentSize[isVertical ? 'height' : 'width'];
    this.scrollProperties.offset = e.nativeEvent.contentOffset[isVertical ? 'y' : 'x'];
  }

  _onScroll = (e) => {
    this._setScrollProperties(e);

    let distanceFromEnd = this._getDistanceFromEnd();
    if (this.props.onEndReached &&
        this.scrollProperties.contentLength !== this._sentEndForContentLength &&
        distanceFromEnd < this.props.onEndReachedThreshold) {
      this._sentEndForContentLength = this.scrollProperties.contentLength;
      this.props.onEndReached(e);
    }

    if (this.props.onEndReached && distanceFromEnd > this.props.onEndReachedThreshold) {
      this._sentEndForContentLength = null;
    }

    this.props.onScroll && this.props.onScroll(e);
  }

  _getDistanceFromEnd = () => {
    return this.scrollProperties.contentLength - this.scrollProperties.visibleLength - this.scrollProperties.offset;
  }

  render() {
    return (
      <RNScrollView
        {...this.props}
        onScroll={this._onScroll}
        scrollEventThrottle={this.props.scrollEventThrottle ? this.props.scrollEventThrottle : 200}
      />
    );
  }
}

export default ScrollView;