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 ! 🙏

[Juan-Severiano]

I think the main issue might be the interaction between the native ScrollView and your custom Pan gesture on Android.

Gesture.Simultaneous allows both gestures to recognize input, but it doesn't guarantee that the native ScrollView will stop consuming movement while your header animation is running.

Since you're already managing the scroll position manually with scrollTo(), I'd try temporarily disabling native scrolling while the header is transitioning.

Another approach would be to use a single shared value to control the header position and explicitly decide when the ScrollView should take over.

One detail worth checking: on Android, does the issue still happen if you replace the ScrollView with a simple View?

If the Pan gesture behaves correctly without the ScrollView, that would help isolate the problem to native scroll handling rather than the header animation itself.

I'd also check whether the ScrollView's momentum or fling behavior is interfering with the manual scrollTo() calls.

Your iOS implementation looks like a good starting point. I think separating gesture ownership from native scrolling would make the behavior more predictable across both platforms.