Skip to content

[Bug]: Android: content mask shrinks / footer clips during pan when snapPoints are set (Reanimated 4.x) #2702

Description

@isinuyk

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

Screen_Recording_20260624_193405_OtoqiTEST.mp4

On Android, with snapPoints (e.g. ['100%']) and enableDynamicSizing={false}, panning the sheet down without releasing causes the BottomSheetContent clip mask to collapse to roughly the intrinsic content height (header + input). The footer is not removed — it is clipped below the shrunk mask (overflow: 'hidden' on BottomSheetContent).

Observed behavior:

During a fast swipe down, the white sheet area shrinks to a small block around the actual content.
Footer buttons disappear or only show partially near the bottom edge.
On finger release, the sheet snaps back and everything renders correctly.
Does not reproduce when snapPoints is omitted and enableDynamicSizing is used instead.
iOS appears unaffected (or much less visible).
Root cause (our analysis):
BottomSheetContent animates height via animate() (spring) while BottomSheetBody updates translateY every gesture frame. On Reanimated 4.x (tested with 4.5.0 + worklets 0.10.0), the mask height desyncs during pan. keyboardBehavior="interactive" can make it worse by shrinking the mask to content size when isInTemporaryPosition is true.

Workaround that fixes it: During active pan, derive mask height from containerHeight - animatedPosition - handleHeight, and apply height/paddingBottom directly (no animate()) while gestureState === ACTIVE | BEGAN.

Reproduction steps

Use Android (device or emulator).
Install:

Render a BottomSheet with:

  • snapPoints={['100%']}
  • enableDynamicSizing={false}
  • footerComponent using BottomSheetFooter
  • BottomSheetScrollView with enableFooterMarginAdjustment
  • keyboardBehavior="interactive"
  • Small content (title + TextInput) so most of the sheet is empty space.

Open the sheet fully.
Swipe down quickly on the handle or content without releasing.
Expected: Sheet and footer move together; mask stays full height.
Actual: White content area shrinks to the input block; footer is clipped/invisible until release.

Reproduction sample

https://snack.expo.dev/@i.syniuk/bottom-sheet---issue-reproduction-template

Relevant log output

No errors or warnings in JS/native logs — purely a visual/layout desync during gesture.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions