feat: make the BottomSheetBackdrop component configurable

Author: hannojg

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -40,6 +40,7 @@ const BottomSheetBackdropComponent = ({
   onPress,
   style,
   children,
+  ViewComponent: AnimatedViewComponent = Animated.View,
   accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
   accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
@@ -136,7 +137,7 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   const AnimatedView = (
-    <Animated.View
+    <AnimatedViewComponent
       style={containerStyle}
       pointerEvents={pointerEvents}
       accessible={_providedAccessible ?? undefined}
@@ -151,7 +152,7 @@ const BottomSheetBackdropComponent = ({
       }
     >
       {children}
-    </Animated.View>
+    </AnimatedViewComponent>
   );
 
   return pressBehavior !== 'none' ? (

src/components/bottomSheetBackdrop/types.d.ts

@@ -1,5 +1,6 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
+import type { AnimatedProps } from 'react-native-reanimated';
 import type {
   BottomSheetVariables,
   NullableAccessibilityProps,
@@ -55,4 +56,10 @@ export interface BottomSheetDefaultBackdropProps
    * Child component that will be rendered on backdrop.
    */
   children?: ReactNode | ReactNode[];
+
+  /**
+   * Optional component that will be used as a backdrop.
+   * Default is `Reanimated.View`.
+   */
+  ViewComponent?: ComponentType<AnimatedProps<ViewProps>>;
 }