refactor: allow to render component inside default backdrop (#662)

* Allow render component inside backdrop * resolve comments
gorhom · Oct 3, 2021 · 5df1a1f · 5df1a1f
1 parent fd4bb8d
commit 5df1a1f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -30,6 +30,7 @@ const BottomSheetBackdropComponent = ({
   enableTouchThrough = DEFAULT_ENABLE_TOUCH_THROUGH,
   pressBehavior = DEFAULT_PRESS_BEHAVIOR,
   style,
+  children,
 }: BottomSheetDefaultBackdropProps) => {
   //#region hooks
   const { snapToIndex, close } = useBottomSheet();
@@ -116,14 +117,18 @@ const BottomSheetBackdropComponent = ({
         accessibilityHint={`Tap to ${
           typeof pressBehavior === 'string' ? pressBehavior : 'move'
         } the Bottom Sheet`}
-      />
+      >
+        {children}
+      </Animated.View>
     </TapGestureHandler>
   ) : (
     <Animated.View
       ref={containerRef}
       pointerEvents={pointerEvents}
       style={containerStyle}
-    />
+    >
+      {children}
+    </Animated.View>
   );
 };
 

diff --git a/src/components/bottomSheetBackdrop/types.d.ts b/src/components/bottomSheetBackdrop/types.d.ts
@@ -39,4 +39,8 @@ export interface BottomSheetDefaultBackdropProps
    * @default 'close'
    */
   pressBehavior?: BackdropPressBehavior;
+  /**
+   * Child component that will be rendered on backdrop.
+   */
+  children?: React.ReactNode | React.ReactNode[];
 }