Description
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.
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 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.
Reproduction sample
tbd