diff --git a/docs/components/ScrollView.md b/docs/components/ScrollView.md index 9a94c45c..e152accd 100644 --- a/docs/components/ScrollView.md +++ b/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} /> ) diff --git a/examples/components/ScrollView/ScrollViewExample.js b/examples/components/ScrollView/ScrollViewExample.js index e7be0bbe..d6e60f67 100644 --- a/examples/components/ScrollView/ScrollViewExample.js +++ b/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', () => ( { console.log('ScrollView.onScroll', e); } } + onScroll={onScroll} scrollEventThrottle={1000} // 1 event per second style={styles.scrollViewStyle} > @@ -24,8 +26,8 @@ storiesOf('component: ScrollView', module) 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 } }) diff --git a/src/components/ScrollView/ScrollViewBase.js b/src/components/ScrollView/ScrollViewBase.js index 367a3305..62b8a885 100644 --- a/src/components/ScrollView/ScrollViewBase.js +++ b/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) {