[Bug]: Orientation changes not considered on iOS when using BottomSheetModal with dynamicSizing

[dabo248]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

When using BottomSheetModal with enableDynamicSizing set to true and with a BottomSheetScrollView inside I found that on iOS when doing an orientation change the containerHeight is not updated accordingly, causing to stay same as in portrait, which prevents me from scrolling through my content. If the content is not large enough, the bottom sheet is not visible in landscape anymore at all.

ScreenRecording_03-30-2025.12-21-10_1.mov

I found that it was related to my BottomSheetModalProvider being defined in my Root layout, above my SafeAreaProvider and Stack. When defining the BottomSheetModalProvider for iOS directly in a page, the orientation changes were respected, but this had the disadvantaged of not having a backdrop above my navigation bar.

Applying this patch fixed my issue entirely, allowing to use the BottomSheetModalProvider in my Root layout, having a backdrop above my navigation bar as well and working nicely on orientation changes:

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index 0716ecd..5918d7b 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -1,8 +1,9 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   type LayoutChangeEvent,
   StatusBar,
   type StyleProp,
+  useWindowDimensions,
   View,
   type ViewStyle,
 } from 'react-native';
@@ -37,6 +38,16 @@ function BottomSheetContainerComponent({
   );
   //#endregion
 
+  const dimensions = useWindowDimensions();
+
+  // Initialize orientationKey based on current dimensions.
+  const initOrientation = dimensions.width > dimensions.height ? 'landscape' : 'portrait';
+  const [orientationKey, setOrientationKey] = useState(initOrientation);
+
+  useEffect(() => {
+    setOrientationKey(dimensions.width > dimensions.height ? 'landscape' : 'portrait');
+  }, [dimensions]);
+
   //#region callbacks
   const handleContainerLayout = useCallback(
     function handleContainerLayout({
@@ -80,6 +91,7 @@ function BottomSheetContainerComponent({
   //#region render
   return (
     <View
+      key={orientationKey}
       ref={containerRef}
       pointerEvents="box-none"
       onLayout={shouldCalculateHeight ? handleContainerLayout : undefined}

Reproduction steps

Use a BottomSheetModal with enableDynamicSizing set to true and add a BottomSheetScrollView with some content allowing scrolling inside. Define the BottomSheetModalProvider as described in the documentation. Open the bottom sheet on iOS, change the orientation and see scrolling all content is not possible anymore or bottom sheet disappearing entirely.

Reproduction sample

https://snack.expo.dev/@dabo248/bottom-sheet---orientation-issue-reproduction