Hello I am trying to create a component in my app that looks really similar to this. I am currently struggling with how to make it so that i can have a collapsible header that scrolls seamlessly through both the header and the nested tabs scrollviews.

Here's what i have so far. As you can see, the scrollview is causing both the header and the content area to scroll at the same time. I was wondering if there was a way to make the header scroll first (when at the top) and then the content area scrolling after.

Here is my code
Header with tabs Render in parent:

<Animated.View 
  style={[styles.headerScrollableContainerContent, {
    top: headerHeight
  }]} 
>
   <View>
      {...header content}
   </View
   {TabRender()}
</Animated.View>

Header height calculation:

const scrollY = useRef(new Animated.Value(0)).current;
const headerHeight = scrollY.interpolate({
   inputRange: [0, HEADER_SCROLL_DISTANCE],
   outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
   extrapolate: 'clamp',
});

About Tab:

<ScrollView
  style={styles.container}
  onScroll={Animated.event(
    [{nativeEvent: {contentOffset: {y: props.scrollY}}}],
    {useNativeDriver: false}
  )}
  scrollEventThrottle={16}
>
   {...Scroll content}
</ScrollView>

Please let me know if you have any ideas or suggestions. Any help would be truly appreciated!