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

* Allow render component inside backdrop

* resolve comments

Author: r0b0t3d

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>
   );
 };
 

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[];
 }