Feat/reanimated 4 support and Fix Issues

[misaku]

Motivation

This PR addresses critical visual glitches and layout desynchronization issues occurring on Android when using React Native Reanimated v4 with the New Architecture (Fabric). Specifically, it fixes the phenomenon where the sheet content mask collapses or the screen behind the sheet flashes through during slow pan-down gestures.

Problems Solved

• Content Mask Collapse ([Bug]: Android: content mask shrinks / footer clips during pan when snapPoints are set (Reanimated 4.x) #2702, Screen behind the sheet flashes through during a slow pan-down-to-close on Android (New Architecture) #2716): During an active pan gesture, the BottomSheetContent height animation (withTiming) was desynchronizing from the BottomSheetBody transform (translateY). This caused the white background to shrink temporarily, clipping the footer or revealing the screen underneath.
• Flash-through Effect: On slow drag-to-close interactions, the underlying screen content became visible for a split second due to a race condition in native view compositing and layout updates.
• Reanimated v4 Incompatibility: The previous logic relied on animation drivers that behave differently in Reanimated v4 + Fabric, leading to stale layout props during gestures.

Solution Approach

Instead of animating height and paddingBottom continuously during a gesture, this implementation bypasses the animation while the gesture state is ACTIVE or BEGAN. It applies the calculated layout values directly to ensure the mask geometry stays perfectly synchronized with the finger position. Once the gesture ends, the standard spring/timing animation resumes for snapping.

Related Issues & PRs

This change consolidates fixes and concepts from the following community efforts:

• Fixes: #2702, #2716
• Merged/Referenced PRs: #2660, #2652, #2342

Additional Changes

• Includes various stability adjustments for the New Architecture.
• Improves scrollable synchronization within the sheet to prevent "white flash" artifacts during fast scrolling.

[misaku]

🛠️ Temporary Workaround (Until Merge)

Since this fix addresses critical issues with Reanimated v4 and the New Architecture, you can apply it immediately to your project using patch-package before the official release is merged and published.

1. Install patch-package

If you haven't already, install the dependency:

npm install patch-package --save-dev
# or
yarn add patch-package --dev
# or
bun add -d patch-package

2. Apply the Patch

Place the generated .patch file (e.g., @gorhom+Fbottom-sheet@5.2.14.patch) inside the patches/ directory in your project root. Then run:

npx patch-package @gorhom/bottom-sheet

3. Automate on Install

Ensure the patch is applied automatically after every install by adding the following to your package.json:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

[MathiasVoie]

Misaku, thank you so much for fixing this issue! 🎉💃🥳🎊

[nhutph]

when we merge this pr ?, i still waiting

[lukasdruskis]

Any updates on this? The fix works well, would be nice to see this merged

[egarikka]

Hey, is it for for you with

"react-native-reanimated": "4.4.1",
"react-native-worklets": "0.9.1",
"react-native": "0.86.3",

for me import BottomSheet from '@gorhom/bottom-sheet'; works

but import { BottomSheetModal } from '@gorhom/bottom-sheet'; not working so like it dose not open

on RN 0.80.2 react-native-gesture-handler v2, reanimated 4.0.1 it works fine but not working with new for me