[change] ScrollView event normalization

docs/components/ScrollView.md

@@ -38,6 +38,18 @@ which this `ScrollView` renders.
 Fires at most once per frame during scrolling. The frequency of the events can
 be contolled using the `scrollEventThrottle` prop.
 
+Invoked on scroll with the following event:
+
+```js
+{
+  nativeEvent: {
+    contentOffset: { x, y },
+    contentSize: { height, width },
+    layoutMeasurement: { height, width }
+  }
+}
+```
+
 **refreshControl**: element
 
 TODO
@@ -51,8 +63,8 @@ When false, the content does not scroll.
 
 **scrollEventThrottle**: number = 0
 
-This controls how often the scroll event will be fired while scrolling (in
-events per seconds). A higher number yields better accuracy for code that is
+This controls how often the scroll event will be fired while scrolling (as a
+time interval in ms). A lower number yields better accuracy for code that is
 tracking the scroll position, but can lead to scroll performance problems. The
 default value is `0`, which means the scroll event will be sent only once each
 time the view is scrolled.
@@ -104,7 +116,7 @@ export default class ScrollViewExample extends Component {
         contentContainerStyle={styles.container}
         horizontal
         onScroll={(e) => this.onScroll(e)}
-        scrollEventThrottle={60}
+        scrollEventThrottle={100}
         style={styles.root}
       />
     )

examples/components/ScrollView/ScrollViewExample.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { action, storiesOf } from '@kadira/storybook';
 import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
 
+const onScroll = action('ScrollView.onScroll');
+
 storiesOf('component: ScrollView', module)
   .add('vertical', () => (
     <View style={styles.scrollViewContainer}>
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainerStyle}
-        onScroll={e => { console.log('ScrollView.onScroll', e); } }
+        onScroll={onScroll}
         scrollEventThrottle={1000} // 1 event per second
         style={styles.scrollViewStyle}
       >
@@ -24,8 +26,8 @@ storiesOf('component: ScrollView', module)
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainerStyle}
         horizontal
-        onScroll={e => console.log('ScrollView.onScroll', e)}
-        scrollEventThrottle={1} // 1 event per second
+        onScroll={onScroll}
+        scrollEventThrottle={16} // ~60 events per second
         style={styles.scrollViewStyle}
       >
         {Array.from({ length: 50 }).map((item, i) => (
@@ -48,10 +50,10 @@ const styles = StyleSheet.create({
     width: 300
   },
   scrollViewStyle: {
-    borderWidth: '1px'
+    borderWidth: 1
   },
   scrollViewContentContainerStyle: {
     backgroundColor: '#eee',
-    padding: '10px'
+    padding: 10
   }
 })

src/components/ScrollView/ScrollViewBase.js

@@ -10,6 +10,35 @@ import debounce from 'debounce';
 import View from '../View';
 import React, { Component, PropTypes } from 'react';
 
+const normalizeScrollEvent = (e) => ({
+  nativeEvent: {
+    contentOffset: {
+      get x() {
+        return e.target.scrollLeft;
+      },
+      get y() {
+        return e.target.scrollTop;
+      }
+    },
+    contentSize: {
+      get height() {
+        return e.target.scrollHeight;
+      },
+      get width() {
+        return e.target.scrollWidth;
+      }
+    },
+    layoutMeasurement: {
+      get height() {
+        return e.target.offsetHeight;
+      },
+      get width() {
+        return e.target.offsetWidth;
+      }
+    }
+  }
+});
+
 /**
  * Encapsulates the Web-specific scroll throttling and disabling logic
  */
@@ -75,13 +104,13 @@ export default class ScrollViewBase extends Component {
   _handleScrollTick(e) {
     const { onScroll } = this.props;
     this._state.scrollLastTick = Date.now();
-    if (onScroll) { onScroll(e); }
+    if (onScroll) { onScroll(normalizeScrollEvent(e)); }
   }
 
   _handleScrollEnd(e) {
     const { onScroll } = this.props;
     this._state.isScrolling = false;
-    if (onScroll) { onScroll(e); }
+    if (onScroll) { onScroll(normalizeScrollEvent(e)); }
   }
 
   _shouldEmitScrollEvent(lastTick, eventThrottle) {