Skip to content

[Bug]: #2710

Description

@lindboe

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

FYI: I cannot make a Snack. When I try to log in to save the project, it is not working. I made a different repro project here: https://github.com/lindboe/ios-bottomsheet-issue

This is also on Reanimated 4.3.1, not an option in the issue template.

Issue:
When a BottomSheetModal uses enableDynamicSizing and its content grows after the mount animation begins (e.g. from an async fetch that resolves during the open animation), the sheet does not resize to fit the new content on iOS. The sheet stays at the height calculated from the initial (smaller) content, and any content added after mount is clipped below the visible area.

This is a regression from 5.2.9 → 5.2.10. Pinning back to 5.2.9 fixes it with no other code changes.

Suspected cause:
PR #2655 (commit ad41447, included in 5.2.10) added an early return to the mount animation block in evaluatePosition in src/components/bottomSheet/BottomSheet.tsx:

if (!isAnimatedOnMount.value) {
  if (animationStatus === ANIMATION_STATUS.RUNNING) {
    return;
  }
  // ... mount animation logic
}

This guard was intended to prevent a rapid present/close freeze, but it also prevents evaluatePosition from running when a snap-point change (from dynamic content growth) occurs while the mount animation is in progress. The content's onLayout fires, detents are recalculated, the OnSnapPointsChange reaction calls evaluatePosition — but the early return discards it. After the mount animation completes, isAnimatedOnMount is true, so the mount path is never re-entered, and the sheet stays at the wrong height.

Note: #2659 reported the same regression but was auto-closed for not following the issue template.

Reproduction steps

  1. Clone the reproduction repo: https://github.com/lindboe/ios-bottomsheet-issue
  2. npm install && npx expo prebuild --clean && npx expo run:ios
  3. Tap "Open Sheet"
  4. Observe: the sheet opens at a small height (just the static "Lorem ipsum" text). When the fetch resolves and the header content renders, the sheet does not expand — the "Dismiss" button is pushed below the visible area.

To verify the fix: change @gorhom/bottom-sheet to 5.2.9 in package.json, run npm install, restart Metro, and repeat. The sheet correctly expands to show all content including the Dismiss button.

Reproduction sample

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

Relevant log output

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