Support sticky headers for inverted Lists

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<number, ScrollViewStickyHeader>),
   _headerLayoutYs: (new Map(): Map<string, number>),
   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}
             </ScrollViewStickyHeader>
           );
@@ -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,

Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -8,41 +8,48 @@
  *
  * @providesModule ScrollViewStickyHeader
  * @flow
+ * @format
  */
 'use strict';
 
 const Animated = require('Animated');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 
+import type {LayoutEvent} from 'CoreEventTypes';
+
 type Props = {
   children?: React.Element<any>,
   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<Props, {
+type State = {
   measured: boolean,
   layoutY: number,
   layoutHeight: number,
   nextHeaderLayoutY: ?number,
-}> {
-  constructor(props: Props, context: Object) {
-    super(props, context);
-    this.state = {
-      measured: false,
-      layoutY: 0,
-      layoutHeight: 0,
-      nextHeaderLayoutY: props.nextHeaderLayoutY,
-    };
-  }
+};
+
+class ScrollViewStickyHeader extends React.Component<Props, State> {
+  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<Props, {
   };
 
   render() {
+    const {inverted, scrollViewHeight} = this.props;
     const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
     const inputRange: Array<number> = [-1, 0];
     const outputRange: Array<number> = [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);
+        }
       }
     }
 

Libraries/Lists/VirtualizedList.js

@@ -898,6 +898,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       onScrollEndDrag: this._onScrollEndDrag,
       onMomentumScrollEnd: this._onMomentumScrollEnd,
       scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
+      invertStickyHeaders: this.props.inverted,
       stickyHeaderIndices,
     };
     if (inversionStyle) {