Sticky Headers with an External ScrollView

I’ve been experimenting with the new externalScrollView prop trying to achieve a true sticky header experience. And this is what I came up with so far.

My solution was replacing the normal ScrollView with an Animated.ScrollView and have its onScroll feed into an Animated value that I then use in the rowRenderer to stick some rows to the top.

This is my custom scrollview component.

class AnimatedScrollView extends React.Component {
  render() {
    return (
      <Animated.ScrollView
        ref={ref => (this._scrollView = ref)}
        scrollEventThrottle={1}
        {...this.props}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y:animatedScrollViewOffsetY } } }],
          {
            useNativeDriver: true,
            listener: this.props.onScroll
          }
        )}
      />
    );
  }
}

I then use the animatedScrollViewOffsetY Animated Value in the rowRenderer and I calculate when the views should start sticking to the top like that:

const stickyConfiguration = {
  startAt: 0,
  duration: -1 * HEADER_HEIGHT
};
_.forEach(this.state.dataProvider._data, (row, rowIndex) => {
  if (rowIndex < index) {
    stickyConfiguration.startAt += this.getRowHeight(row.viewType);
  } else {
    if (rowIndex > index && row.viewType === ViewTypes.DAY_HEADER) {
      return false;
    } else {
      stickyConfiguration.duration += this.getRowHeight(row.viewType);
    }
  }
});

I then pass the y:animatedScrollViewOffsetY to my component which positions itself with some transforms:

const translateY = {
  transform: [
    {
      translateY: this.props.animatedScrollViewOffsetY.interpolate({
        inputRange: [
          0,
          stickyConfiguration.startAt,
          stickyConfiguration.startAt + stickyConfiguration.duration
        ],
        outputRange: [0, 0, stickyConfiguration.duration],
        extrapolate: 'clamp'
      })
    }
  ]
};

One of the challenges I faced was with zIndex values. I fixed it for iOS by changing the code for ViewRenderer, but couldn’t fix it on Android. There’s also the problem with the onScroll event that has to run both the Animated.Event and do recyclerlistview’s logic as well. I couldn’t get around that myself.

I unfortunately can’t just fork recyclerlistview and implement my solution since it doesn’t work for Android yet, but that at least shows that the feature can be implemented. I’m thinking an additional property stickyViewTypes or something like that.

Please let me know if you need more clarification on how I made that demo work. Would love to have this added to recyclerlistview soon! 👍