diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 7fcf038d824100..964421282ba25b 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -190,6 +190,11 @@ const ScrollView = createReactClass({ 'black', 'white', ]), + /** + * If sticky headers should stick at the bottom instead of the top of the + * ScrollView. This is usually used with inverted ScrollViews. + */ + invertStickyHeaders: PropTypes.bool, /** * When true, the ScrollView will try to lock to only vertical or horizontal * scrolling while dragging. The default value is false. @@ -499,7 +504,10 @@ const ScrollView = createReactClass({ _stickyHeaderRefs: (new Map(): Map), _headerLayoutYs: (new Map(): Map), getInitialState: function() { - return this.scrollResponderMixinGetInitialState(); + return { + ...this.scrollResponderMixinGetInitialState(), + layoutHeight: null, + }; }, componentWillMount: function() { @@ -676,6 +684,15 @@ const ScrollView = createReactClass({ this.scrollResponderHandleScroll(e); }, + _handleLayout: function(e: Object) { + if (this.props.invertStickyHeaders) { + this.setState({ layoutHeight: e.nativeEvent.layout.height }); + } + if (this.props.onLayout) { + this.props.onLayout(e); + } + }, + _handleContentOnLayout: function(e: Object) { const {width, height} = e.nativeEvent.layout; this.props.onContentSizeChange && this.props.onContentSizeChange(width, height); @@ -761,7 +778,9 @@ const ScrollView = createReactClass({ this._headerLayoutYs.get(this._getKeyForIndex(nextIndex, childArray)) } onLayout={(event) => this._onStickyHeaderLayout(index, event, key)} - scrollAnimatedValue={this._scrollAnimatedValue}> + scrollAnimatedValue={this._scrollAnimatedValue} + inverted={this.props.invertStickyHeaders} + scrollViewHeight={this.state.layoutHeight}> {child} ); @@ -808,6 +827,7 @@ const ScrollView = createReactClass({ // Override the onContentSizeChange from props, since this event can // bubble up from TextInputs onContentSizeChange: null, + onLayout: this._handleLayout, onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin, onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd, onResponderGrant: this.scrollResponderHandleResponderGrant, diff --git a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index 0a320e0e3358e0..54956acf3fee7c 100644 --- a/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -8,6 +8,7 @@ * * @providesModule ScrollViewStickyHeader * @flow + * @format */ 'use strict'; @@ -15,34 +16,40 @@ const Animated = require('Animated'); const React = require('React'); const StyleSheet = require('StyleSheet'); +import type {LayoutEvent} from 'CoreEventTypes'; + type Props = { children?: React.Element, nextHeaderLayoutY: ?number, - onLayout: (event: Object) => void, + onLayout: (event: LayoutEvent) => void, scrollAnimatedValue: Animated.Value, + // Will cause sticky headers to stick at the bottom of the ScrollView instead + // of the top. + inverted: ?boolean, + // The height of the parent ScrollView. Currently only set when inverted. + scrollViewHeight: ?number, }; -class ScrollViewStickyHeader extends React.Component { - constructor(props: Props, context: Object) { - super(props, context); - this.state = { - measured: false, - layoutY: 0, - layoutHeight: 0, - nextHeaderLayoutY: props.nextHeaderLayoutY, - }; - } +}; + +class ScrollViewStickyHeader extends React.Component { + state = { + measured: false, + layoutY: 0, + layoutHeight: 0, + nextHeaderLayoutY: this.props.nextHeaderLayoutY, + }; setNextHeaderY(y: number) { - this.setState({ nextHeaderLayoutY: y }); + this.setState({nextHeaderLayoutY: y}); } - _onLayout = (event) => { + _onLayout = event => { this.setState({ measured: true, layoutY: event.nativeEvent.layout.y, @@ -57,32 +64,70 @@ class ScrollViewStickyHeader extends React.Component = [-1, 0]; const outputRange: Array = [0, 0]; if (measured) { - // The interpolation looks like: - // - Negative scroll: no translation - // - From 0 to the y of the header: no translation. This will cause the header - // to scroll normally until it reaches the top of the scroll view. - // - From header y to when the next header y hits the bottom edge of the header: translate - // equally to scroll. This will cause the header to stay at the top of the scroll view. - // - Past the collision with the next header y: no more translation. This will cause the - // header to continue scrolling up and make room for the next sticky header. - // In the case that there is no next header just translate equally to - // scroll indefinitely. - inputRange.push(layoutY); - outputRange.push(0); - // Sometimes headers jump around so we make sure we don't violate the monotonic inputRange - // condition. - const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight; - if (collisionPoint >= layoutY) { - inputRange.push(collisionPoint, collisionPoint + 1); - outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY); + if (inverted) { + // The interpolation looks like: + // - Negative scroll: no translation + // - `stickStartPoint` is the point at which the header will start sticking. + // It is calculated using the ScrollView viewport height so it is a the bottom. + // - Headers that are in the initial viewport will never stick, `stickStartPoint` + // will be negative. + // - From 0 to `stickStartPoint` no translation. This will cause the header + // to scroll normally until it reaches the top of the scroll view. + // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate + // equally to scroll. This will cause the header to stay at the top of the scroll view. + // - Past the collision with the next header y: no more translation. This will cause the + // header to continue scrolling up and make room for the next sticky header. + // In the case that there is no next header just translate equally to + // scroll indefinitely. + if (scrollViewHeight != null) { + const stickStartPoint = layoutY + layoutHeight - scrollViewHeight; + if (stickStartPoint > 0) { + inputRange.push(stickStartPoint); + outputRange.push(0); + inputRange.push(stickStartPoint + 1); + outputRange.push(1); + // If the next sticky header has not loaded yet (probably windowing) or is the last + // we can just keep it sticked forever. + const collisionPoint = + (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight; + if (collisionPoint > stickStartPoint) { + inputRange.push(collisionPoint, collisionPoint + 1); + outputRange.push( + collisionPoint - stickStartPoint, + collisionPoint - stickStartPoint, + ); + } + } + } } else { - inputRange.push(layoutY + 1); - outputRange.push(1); + // The interpolation looks like: + // - Negative scroll: no translation + // - From 0 to the y of the header: no translation. This will cause the header + // to scroll normally until it reaches the top of the scroll view. + // - From header y to when the next header y hits the bottom edge of the header: translate + // equally to scroll. This will cause the header to stay at the top of the scroll view. + // - Past the collision with the next header y: no more translation. This will cause the + // header to continue scrolling up and make room for the next sticky header. + // In the case that there is no next header just translate equally to + // scroll indefinitely. + inputRange.push(layoutY); + outputRange.push(0); + // If the next sticky header has not loaded yet (probably windowing) or is the last + // we can just keep it sticked forever. + const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight; + if (collisionPoint >= layoutY) { + inputRange.push(collisionPoint, collisionPoint + 1); + outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY); + } else { + inputRange.push(layoutY + 1); + outputRange.push(1); + } } } diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index 63207f8865b412..6a1399e6337a64 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -898,6 +898,7 @@ class VirtualizedList extends React.PureComponent { onScrollEndDrag: this._onScrollEndDrag, onMomentumScrollEnd: this._onMomentumScrollEnd, scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support + invertStickyHeaders: this.props.inverted, stickyHeaderIndices, }; if (inversionStyle) {