make body component configurable

Author: hannojg

src/components/bottomSheet/BottomSheet.tsx

@@ -164,6 +164,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       backgroundComponent,
       renderFooter,
       children,
+      BodyComponent,
 
       // accessibility
       accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
@@ -213,7 +214,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
     );
     const animatedFooterHeight = useSharedValue(0);
-    const animatedContentHeight = useSharedValue(_providedContentHeight ?? INITIAL_CONTAINER_HEIGHT);
+    const animatedContentHeight = useSharedValue(
+      _providedContentHeight ?? INITIAL_CONTAINER_HEIGHT
+    );
     const [animatedSnapPoints, animatedDynamicSnapPointIndex] =
       useAnimatedSnapPoints(
         _providedSnapPoints,
@@ -1798,7 +1801,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               detached={detached}
               style={_providedContainerStyle}
             >
-              <BottomSheetBody style={style}>
+              <BottomSheetBody style={style} BodyComponent={BodyComponent}>
                 {backgroundComponent === null ? null : (
                   <BottomSheetBackgroundContainer
                     key="BottomSheetBackgroundContainer"

src/components/bottomSheet/BottomSheetBody.tsx

@@ -1,16 +1,21 @@
-import React, { memo, useMemo } from 'react';
+import React, { type ComponentProps, memo, useMemo } from 'react';
 import { Platform } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { useBottomSheetInternal } from '../../hooks';
 import type { BottomSheetProps } from '../bottomSheet/types';
 import { styles } from './styles';
 
-type BottomSheetBodyProps = {
+export type BottomSheetBodyProps = {
   style?: BottomSheetProps['style'];
   children?: React.ReactNode;
+  BodyComponent?: React.ComponentType<ComponentProps<typeof Animated.View>>;
 };
 
-function BottomSheetBodyComponent({ style, children }: BottomSheetBodyProps) {
+function BottomSheetBodyComponent({
+  style,
+  children,
+  BodyComponent = Animated.View,
+}: BottomSheetBodyProps) {
   //#region hooks
   const { animatedIndex, animatedPosition } = useBottomSheetInternal();
   //#endregion
@@ -34,9 +39,9 @@ function BottomSheetBodyComponent({ style, children }: BottomSheetBodyProps) {
   //#endregion
 
   return (
-    <Animated.View style={containerStyle} collapsable={true}>
+    <BodyComponent style={containerStyle} collapsable={true}>
       {children}
-    </Animated.View>
+    </BodyComponent>
   );
 }
 

src/components/bottomSheet/types.d.ts

@@ -23,11 +23,13 @@ import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
 import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
 import type { BottomSheetFooterProps } from '../bottomSheetFooter';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
+import type { BottomSheetBodyProps } from './BottomSheetBody';
 
 export interface BottomSheetProps
   extends BottomSheetAnimationConfigs,
     Partial<BottomSheetGestureProps>,
-    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
+    Omit<NullableAccessibilityProps, 'accessibilityHint'>,
+    Pick<BottomSheetBodyProps, 'BodyComponent'> {
   //#region configuration
   /**
    * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.