Sticky Headers with an External ScrollView
See original GitHub issueI’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! 👍
Issue Analytics
- State:
- Created 6 years ago
- Comments:14
Top GitHub Comments
@AbdallaMohamed, I found your workaround very nice, can you share your code?
Sticky implementation is now part of RLV. Closing this.