fix(bottom-sheet-modal): behind native modal view

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changelog
 
+## [Unreleased]
+
+- Add `bottomSheetWrapper` prop for `BottomSheetModal` component (#832)(by @magrinj)
+
 ### [v4.4.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0-alpha.1...v4.4.7) - 
 
 #### Fixes

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -45,6 +45,7 @@ const BottomSheetModalComponent = forwardRef<
     snapPoints,
     enablePanDownToClose = true,
     animateOnMount = true,
+    bottomSheetWrapper: BottomSheetWrapper = React.Fragment,
 
     // callbacks
     onChange: _providedOnChange,
@@ -375,23 +376,25 @@ const BottomSheetModalComponent = forwardRef<
       handleOnUpdate={handlePortalRender}
       handleOnUnmount={handlePortalOnUnmount}
     >
-      <BottomSheet
-        {...bottomSheetProps}
-        ref={bottomSheetRef}
-        key={key}
-        index={index}
-        snapPoints={snapPoints}
-        enablePanDownToClose={enablePanDownToClose}
-        animateOnMount={animateOnMount}
-        containerHeight={containerHeight}
-        containerOffset={containerOffset}
-        onChange={handleBottomSheetOnChange}
-        onClose={handleBottomSheetOnClose}
-        children={
-          typeof Content === 'function' ? <Content data={data} /> : Content
-        }
-        $modal={true}
-      />
+      <BottomSheetWrapper>
+        <BottomSheet
+          {...bottomSheetProps}
+          ref={bottomSheetRef}
+          key={key}
+          index={index}
+          snapPoints={snapPoints}
+          enablePanDownToClose={enablePanDownToClose}
+          animateOnMount={animateOnMount}
+          containerHeight={containerHeight}
+          containerOffset={containerOffset}
+          onChange={handleBottomSheetOnChange}
+          onClose={handleBottomSheetOnClose}
+          children={
+            typeof Content === 'function' ? <Content data={data} /> : Content
+          }
+          $modal={true}
+        />
+      </BottomSheetWrapper>
     </Portal>
   ) : null;
 });

src/components/bottomSheetModal/types.d.ts

@@ -35,6 +35,13 @@ export interface BottomSheetModalProps
    */
   enableDismissOnClose?: boolean;
 
+  /**
+   * Add a custom wrapper like FullWindowOverlay, allow to fix issue like https://github.com/gorhom/react-native-bottom-sheet/issues/832
+   * @type React.ComponentType
+   * @default undefined
+   */
+  bottomSheetWrapper?: React.ComponentType<React.PropsWithChildren<{}>>;
+
   // callbacks
   /**
    * Callback when the modal dismissed.