I have implemented this using Animated library in native react-native
where I interpolate when I am scrolling. The problem is it is very laggy on ios and somewhat laggy on android. Is there a library or a better way to do this header hiding when scrolling in react-native ?
Here is my current implementation:
const scrollY = new Animated.Value(0);
const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
const translateY = diffClamp.interpolate({
inputRange: [0, HEADER_HEIGHT],
outputRange: [0, -HEADER_HEIGHT],
});
return (
<ExploreHeader
...
translateY={translateY}
/>
<ExploreData
...
scrollY={scrollY}
offset={HEADER_HEIGHT}
scrollRef={scrollRef}
/>
and in ExploreHeader I have this:
<Animated.View
style={{
position: 'absolute',
top: 0,
right: 0,
left: 0,
height: height,
transform: [{translateY: translateY}],
elevation: 100,
zIndex: 100,
}}>
and in ExploreData:
<FlatList
...
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
style={{paddingTop: offset}}
/>