[Bug]: BottomSheetModal → BottomSheetView uses absolute positioning, preventing full-height stretch (breaks flex layouts)

[sintanial]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Web

What happened?

📝 Description

When using BottomSheetModal, the internal BottomSheetView has wrapper and is rendered with position: absolute. Because of this, it’s impossible to stretch the view to fill the full height of the modal — even with simple static layouts.

This breaks normal flexbox layouts. For example, when you want your main content to take flex: 1 and a footer (e.g., a button) to stay pinned to the bottom using flex: 0 or same behavior when using justifyContent: space-between on parent for two child to make space vertical between each other !

✅ Expected Behavior

BottomSheetView (inside BottomSheetModal) should behave like a regular flex container, allowing flex: 1 to fill parent container! This problem only on last version of library. For example on version 5.1.2 not using absolute position and problem is gone !

❌ Current Behavior

• On web, BottomSheetView has wrapper with position: absolute
• flex: 1 content doesn’t expand to fill available space
• Elements meant to be pinned to the bottom cannot align properly

Reproduction steps

import React, { useCallback, useRef, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
} from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // open on mount
  useEffect(() => {
    setTimeout(() => {
      bottomSheetModalRef.current?.present();
    }, 500);
  }, []);

  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheetModalProvider>
        <BottomSheetModal
          index={1}
          ref={bottomSheetModalRef}
          onChange={handleSheetChanges}
          snapPoints={['50%', '50%']}
        >
          <BottomSheetView style={styles.sheetContent}>
            <View style={styles.mainContent}>
              <Text>Awesome 🎉</Text>
            </View>
            <View style={styles.footer}>
              <Button title="Continue" onPress={() => {}} />
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sheetContent: {
    flex: 1,
    backgroundColor: 'white',
    // 👇 This layout breaks on web because BottomSheetView has absolute positioning
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  mainContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  footer: {
    padding: 16,
  },
});

export default App;

Reproduction sample

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

DevTool web inspector screenshot

[AyrDS]

Same problem here

[ankitpoplify]

Bottom sheet is not even opening at my end after upgrading to expo 54

[sintanial]

@AyrDS this is my hot fix, but it's worked only if you don't have multiple snap indexes !

diff --git a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetView/BottomSheetView.js b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetView/BottomSheetView.js index af3afa1..654f928 100644 --- a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetView/BottomSheetView.js +++ b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetView/BottomSheetView.js @@ -25,7 +25,7 @@ function BottomSheetViewComponent({

//#region styles const containerStyle = useBottomSheetContentContainerStyle(enableFooterMarginAdjustment, _providedStyle);

• const style = useMemo(() => [containerStyle, styles.container], [containerStyle]);

• const style = useMemo(() => [styles.container, containerStyle], [containerStyle]); //#endregion

  //#region callbacks

[kcotias]

Same here, had to replace all of my BottomSheetView's with regular View's to prevent layout breaking after the update.

[alucardcronwell]

Here is a simple solution:

const { height, width } = useWindowDimensions()

 <BottomSheetView style={{ height: height * 0.75, width, paddingHorizontal: 20, paddingVertical: 20 }}>
</BottomSheetView>

only left to adjust the size to responsive query

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[sondreluc]

This is also affecting android and ios when enableDynamicSizing is true