Collapsible header layout - Can't get same behavior on iOS and Android

[loiclienard]

Hello Software Mansion's gods !

I'm seeking a little bit of help in order to get the same collapsible header layout behavior on iOS and Android. Right now, the actual implementation is working really well on iOS but not on Android and i'm a bit clueless on why it's happening and how i could make it work on both platform.

I started from a fresh Expo 54 template. Here is the branch and this is what I managed to get so far on iOS :

Screen.Recording.2026-01-07.at.16.34.30.mov

On Android, this is the non working behavior:

Screen.Recording.2026-01-07.at.16.37.21.mov

I'm aware that gestures handlings are different on both platform but I was expecting Gesture.Simultaneous to work the same way on both platform.
I'd like to know if (and how) I would be able to get the desired behavior on Android without getting too far from the iOS implementation.

Key requirements I impose myself :

• Scrollable component content should not scroll unless the header is fully collapsed/expanded (To get the "card over header first" animation feeling )
• Header should collapse as soon as i scroll down (drag up gesture) and expand as soon as I scroll up (drag down gesture), no matter how far I scrolled into the scrollable component.

The trick that makes iOS working great:

• In the Gesture.Pan.onUpdate, It detects whenever the header is animating and use scrollTo from Reanimated to manually update the scroll position in order to get the illusion that the scrollable content is clipped to the top of the "card".

// When collapsing

if (contentOffsetY.value > 0) {
    const newY = Math.max(0, contentOffsetY.value - headerDragDelta);
    contentOffsetY.value = newY;
    scrollTo(scrollableRef, 0, newY, false);
} else {
    scrollTo(scrollableRef, 0, 0, false);
}

and

// When expanding

if (contentOffsetY.value > 0) {
    const newY = contentOffsetY.value - headerDragDelta;
    contentOffsetY.value = newY;
    scrollTo(scrollableRef, 0, newY, false);
} else {
    contentOffsetY.value = 0;
    scrollTo(scrollableRef, 0, 0, false);
}

Thanks for your help and advices ! 🙏