Feature: BottomSheet custom props added.

src/components/bottomSheet/index.tsx

@@ -42,7 +42,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     isCanFullScreenOnSwipe = false,
     handleContainerBackgroundColor,
     handleHeight: handleHeightProp,
-    isWrapSafeareaContext = true,
+    isWrapSafeAreaContext = true,
     backgroundColor = "default",
     isWorkAsFullScreen = false,
     isWorkWithPortal = true,
@@ -51,10 +51,13 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     isActive: isActiveProp,
     handleBackgroundColor,
     isAutoHeight = false,
-    isShowHandle = true,
     isSwipeClose = true,
+    isShowHandle = true,
     isCanSwipe = true,
     onOverlayPressed,
+    scrollViewProps,
+    scrollViewStyle,
+    modalProps,
     snapPoint,
     children,
     onClosed,
@@ -85,8 +88,8 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         setIsActive
     ] = useState(isActiveProp === undefined ? false : isActiveProp);
 
-    let bottomSafeArea = isWrapSafeareaContext ? bottom : 0;
-    let topSafeArea = isWrapSafeareaContext ? top : 0;
+    let bottomSafeArea = isWrapSafeAreaContext ? bottom : 0;
+    let topSafeArea = isWrapSafeAreaContext ? top : 0;
 
     if(isForceFullScreenOnSwipe) {
         topSafeArea = 0;
@@ -109,7 +112,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
 
     const TOP_GRAB_AREA = 140;
 
-    const maxHeight = useRef(isWorkAsFullScreen ? containerHeightRef.current - (isWrapSafeareaContext ? topSafeArea : 0) : containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeareaContext ? topSafeArea : 0));
+    const maxHeight = useRef(isWorkAsFullScreen ? containerHeightRef.current - (isWrapSafeAreaContext ? topSafeArea : 0) : containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0));
     const heightValue = useRef(isWorkAsFullScreen ? containerHeightRef.current : snapPoint ?? 0);
     const initialTranslateY = useRef(0);
     const translateYValue = useRef(0);
@@ -184,14 +187,14 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         if (!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
             maxHeight.current = snapPoint;
         } else if (!isWorkAsFullScreen) {
-            maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeareaContext ? topSafeArea : 0);
+            maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0);
         } else {
-            maxHeight.current = containerHeightRef.current - (isWrapSafeareaContext ? topSafeArea : 0);
+            maxHeight.current = containerHeightRef.current - (isWrapSafeAreaContext ? topSafeArea : 0);
         }
     }, [
         isForceFullScreenOnSwipe,
         isCanFullScreenOnSwipe,
-        isWrapSafeareaContext,
+        isWrapSafeAreaContext,
         isWorkAsFullScreen,
         topSafeArea,
         snapPoint
@@ -564,6 +567,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
             {...panResponder.panHandlers}
             onLayout={onLayout}
             style={[
+                style,
                 {
                     height: (isAutoHeight || !snapPoint) && !isMeasured ? "auto" : animatedHeight,
                     backgroundColor: colors.content.container[backgroundColor],
@@ -577,12 +581,12 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
                         translateY: animatedTranslateY
                     }]
                 },
-                stylesheet.container,
-                style
+                stylesheet.container
             ]}
         >
             {renderHeader()}
             <ScrollView
+                {...scrollViewProps}
                 onContentSizeChange={(w, h) => {
                     scrollViewContentHeight.current = h;
                 }}
@@ -598,6 +602,9 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
                 overScrollMode="never"
                 ref={scrollViewRef}
                 bounces={false}
+                style={[
+                    scrollViewStyle
+                ]}
             >
                 {children}
             </ScrollView>
@@ -664,6 +671,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     };
 
     return <Modal
+        {...modalProps}
         isWorkWithPortal={isWorkWithPortal}
         isContentRequired={false}
         key={`${key}-modal`}
@@ -680,7 +688,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
                 if (!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
                     maxHeight.current = snapPoint;
                 } else if (!isWorkAsFullScreen) {
-                    maxHeight.current = containerLayoutHeight - (isForceFullScreenOnSwipe ? 0 : isWrapSafeareaContext ? topSafeArea : 0);
+                    maxHeight.current = containerLayoutHeight - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0);
                 } else {
                     maxHeight.current = containerLayoutHeight;
                 }

src/components/bottomSheet/type.ts

@@ -2,9 +2,11 @@ import {
     type ReactNode
 } from "react";
 import type {
-    StyleProp,
-    ViewStyle
+    ScrollViewProps,
+    ViewStyle,
+    StyleProp
 } from "react-native";
+import type IModalProps from "../modal/type";
 
 export interface IBottomSheetRef {
     close: () => void;
@@ -16,16 +18,18 @@ interface IBottomSheetProps {
     handleContainerSpacing?: keyof NCoreUIKit.ActivePalette["spaces"];
     handleBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
     backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    scrollViewStyle?: StyleProp<ViewStyle>;
     isForceFullScreenOnSwipe?: boolean;
+    scrollViewProps?: ScrollViewProps;
     isCanFullScreenOnSwipe?: boolean;
-    isWrapSafeareaContext?: boolean;
+    isWrapSafeAreaContext?: boolean;
     renderHeader?: () => ReactNode;
     renderBottom?: () => ReactNode;
     onOverlayPressed?: () => void;
     isWorkAsFullScreen?: boolean;
-    style?: StyleProp<ViewStyle>;
     isCloseOnOverlay?: boolean;
     isWorkWithPortal?: boolean;
+    modalProps?: IModalProps;
     isSwipeClose?: boolean;
     isShowHandle?: boolean;
     isAutoHeight?: boolean;
@@ -38,6 +42,7 @@ interface IBottomSheetProps {
     onOpen?: () => void;
     snapPoint?: number;
     isActive?: boolean;
+    style?: ViewStyle;
     key: string;
 }
 export type {