feat: add bottomSheetWrapper prop to specify a custom wrapper component

Author: magrinj

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

package.json

@@ -63,7 +63,6 @@
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-reanimated": "^2.8.0",
-    "react-native-screens": "^3.20.0",
     "release-it": "^15.4.2",
     "typescript": "^4.2.4"
   },
@@ -73,13 +72,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=1.10.1",
-    "react-native-reanimated": ">=2.2.0",
-    "react-native-screens": ">=3.14.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-screens": {
-      "optional": true
-    }
+    "react-native-reanimated": ">=2.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react-native": {

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -7,10 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { StyleSheet } from 'react-native';
 import { Portal, usePortal } from '@gorhom/portal';
 import BottomSheet from '../bottomSheet';
-import FullWindowOverlay from '../fullWindowOverlay/FullWindowOverlay';
 import { useBottomSheetModalInternal } from '../../hooks';
 import { print } from '../../utilities';
 import {
@@ -47,6 +45,7 @@ const BottomSheetModalComponent = forwardRef<
     snapPoints,
     enablePanDownToClose = true,
     animateOnMount = true,
+    bottomSheetWrapper: BottomSheetWrapper = React.Fragment,
 
     // callbacks
     onChange: _providedOnChange,
@@ -377,8 +376,7 @@ const BottomSheetModalComponent = forwardRef<
       handleOnUpdate={handlePortalRender}
       handleOnUnmount={handlePortalOnUnmount}
     >
-      {/* FullWindowOverlay will only be used if your project has react-native-screens installed, otherwise children is just returned */}
-      <FullWindowOverlay style={StyleSheet.absoluteFill}>
+      <BottomSheetWrapper>
         <BottomSheet
           {...bottomSheetProps}
           ref={bottomSheetRef}
@@ -396,7 +394,7 @@ const BottomSheetModalComponent = forwardRef<
           }
           $modal={true}
         />
-      </FullWindowOverlay>
+      </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.

src/components/fullWindowOverlay/FullWindowOverlay.tsx

@@ -7733,11 +7733,6 @@ react-devtools-core@^4.0.6:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-freeze@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
-  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
-
 react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7794,14 +7789,6 @@ react-native-reanimated@^2.8.0:
     setimmediate "^1.0.5"
     string-hash-64 "^1.0.3"
 
-react-native-screens@^3.20.0:
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1"
-  integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==
-  dependencies:
-    react-freeze "^1.0.0"
-    warn-once "^0.1.0"
-
 react-native@^0.62.2:
   version "0.62.3"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.62.3.tgz#9a2e96af3dedd0723c8657831eec4ed3c30f3299"
@@ -9430,11 +9417,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warn-once@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
-  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
-
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"