How to Hide/Reveal a Sticky Header when scrolling react-native

Question

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}}
        />