I am hiding a navbar-like header on scroll. Which is working okay except for one detail. The animation get's delayed when scroll reaches to the top (which is when the header should be animated into vision again), because when it reaches the top it does that "bounce"-animation. THEN my animation triggers, which is something like 500ms to late.

The problem is that I can't figure out how to trigger it instantly when the scroll reaches the top.

I have been trying all different kind of props to ScrollView, I have tried using states to detect when the position is right for a trigger. I have tried all different conditionals I could imagine.

All my solutions has ended up with the animation being triggered when the scroll reaches the top AND the bounce animation has ended, I want it to trigger the same moment the scrollposition has reached 0.

This is how the code looks right now:

        let viewPosition = 0;
        const scrollToHide = (event) => {
        const currentPosition = event.nativeEvent.contentOffset.y;
        const direction =
            currentPosition > 0 && currentPosition > viewPosition
                ? "down"
                : "up";
        const isDescending = direction === "down";
        if (isDescending !== isHidden) {
            LayoutAnimation.configureNext("my animation here");
            setIsHidden(!isHidden);
        }
        // To not trigger animation when scroll goes beyond top end. (the bouncing I'm talking about)
        if (currentPosition < 0) {
            setIsHidden(false);
        }
        // To not trigger animation if the scroll position is not near the top
        if (currentPosition > 10) {
            setIsHidden(true);
        }
        viewPosition = currentPosition;
    };



<ScrollView onScroll={scrollToHide} />