fix(bottom-sheet-modal): added container component prop to modal (#1309)(by @magrinj)

* fix: bottom sheet modal appear behind native views

* feat: add bottomSheetWrapper prop to specify a custom wrapper component

* fix: edit regardless of the comments

Author: magrinj

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -45,6 +45,7 @@ const BottomSheetModalComponent = forwardRef<
     snapPoints,
     enablePanDownToClose = true,
     animateOnMount = true,
+    containerComponent: ContainerComponent = React.Fragment,
 
     // callbacks
     onChange: _providedOnChange,
@@ -375,21 +376,23 @@ 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 }) : Content}
-        $modal={true}
-      />
+      <ContainerComponent>
+        <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 }) : Content}
+          $modal={true}
+        />
+      </ContainerComponent>
     </Portal>
   ) : null;
 });

src/components/bottomSheetModal/types.d.ts

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