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
gorhom · Jun 23, 2023 · 1ecad69 · 1ecad69
1 parent ea03e78
commit 1ecad69
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/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,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}
-      />
+      <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={data} /> : Content
+          }
+          $modal={true}
+        />
+      </ContainerComponent>
     </Portal>
   ) : null;
 });

diff --git a/src/components/bottomSheetModal/types.d.ts b/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.