@fountain-ui/lab 2.0.0-beta.42 → 2.0.0-beta.44

package/build/module/BottomSheet/useDynamicSnapPoints.js

@@ -1,41 +1,52 @@
-import { useCallback, useState } from 'react';
+import * as R from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-const convertHeightAsPixel = (windowHeight, value) => {
-  if (typeof value === 'number') {
-    return value;
+const convertSnapPoint = (snapPoint, windowHeight, maxDynamicContentSize) => {
+  if (typeof snapPoint === 'number') {
+    return Math.min(maxDynamicContentSize, snapPoint);
   }
 
   const percentageRegex = new RegExp(/^[0-9]+%$/);
 
-  if (percentageRegex.test(value)) {
-    const percentage = parseFloat(value) / 100;
-    return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+  if (percentageRegex.test(snapPoint)) {
+    const percentage = parseFloat(snapPoint) / 100;
+    return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));
   }
 
   return 0;
 };
 
-export default function useDynamicSnapPoints(props) {
+export default function useDynamicSnapPoints(params) {
   const {
-    index: currentIndex,
-    initialSnapPoints
-  } = props;
+    enableDynamicSizing,
+    maxHeightNormalizedRatio,
+    snapPoints
+  } = params;
   const {
-    height: WINDOW_HEIGHT
+    height: windowHeight
   } = useWindowDimensions();
-  const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map(snapPoint => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));
-  const handleContentLayout = useCallback(event => {
-    if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {
-      const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);
-      setSnapPoints(prevState => prevState.map((snapPoint, index) => {
-        return currentIndex === index ? contentHeight : snapPoint;
-      }));
+  const [contentHeight, setContentHeight] = useState(0);
+  const convertedSnapPoints = useMemo(() => {
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+    const convertedSnapPoints = snapPoints.map(snapPoint => {
+      return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+    });
+
+    if (enableDynamicSizing && contentHeight !== 0) {
+      convertedSnapPoints.push(convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize));
     }
-  }, [currentIndex, initialSnapPoints]);
+
+    return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+  }, [contentHeight, snapPoints, windowHeight]);
+  const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+  const handleContentSizeChange = useCallback((_, height) => {
+    setContentHeight(height);
+  }, []);
   return {
-    handleContentLayout,
-    snapPoints
+    convertedSnapPoints,
+    handleContentSizeChange,
+    highestSnapPoint
   };
 }
 //# sourceMappingURL=useDynamicSnapPoints.js.map

package/build/module/BottomSheet/useDynamicSnapPoints.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useState","useWindowDimensions","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","useDynamicSnapPoints","props","index","currentIndex","initialSnapPoints","height","WINDOW_HEIGHT","snapPoints","setSnapPoints","map","snapPoint","handleContentLayout","event","contentHeight","min","nativeEvent","layout","prevState"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    index: number;\n    initialSnapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    handleContentLayout: (e: LayoutChangeEvent) => void;\n    snapPoints: number[];\n}\n\nconst convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n    if (typeof value === 'number') {\n        return value;\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(value)) {\n        const percentage = parseFloat(value) / 100;\n        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        index: currentIndex,\n        initialSnapPoints,\n    } = props;\n\n    const { height: WINDOW_HEIGHT } = useWindowDimensions();\n\n    const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map((snapPoint) => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));\n\n    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {\n        if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {\n            const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);\n            \n            setSnapPoints(prevState => prevState.map((snapPoint, index) => {\n                return currentIndex === index ? contentHeight : snapPoint;\n            }));\n        }\n    }, [currentIndex, initialSnapPoints]);\n\n    return {\n        handleContentLayout,\n        snapPoints,\n    };\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;;AAYA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASK,oBAAT,CAA8BC,KAA9B,EAA8F;EACzG,MAAM;IACFC,KAAK,EAAEC,YADL;IAEFC;EAFE,IAGFH,KAHJ;EAKA,MAAM;IAAEI,MAAM,EAAEC;EAAV,IAA4BlB,mBAAmB,EAArD;EAEA,MAAM,CAACmB,UAAD,EAAaC,aAAb,IAA8BrB,QAAQ,CAACiB,iBAAiB,CAACK,GAAlB,CAAuBC,SAAD,IAAerB,oBAAoB,CAACiB,aAAD,EAAgBI,SAAhB,CAAzD,CAAD,CAA5C;EAEA,MAAMC,mBAAmB,GAAGzB,WAAW,CAAE0B,KAAD,IAA8B;IAClE,IAAIR,iBAAiB,CAACD,YAAD,CAAjB,KAAoC,gBAAxC,EAA0D;MACtD,MAAMU,aAAa,GAAGf,IAAI,CAACgB,GAAL,CAAShB,IAAI,CAACC,KAAL,CAAWO,aAAa,GAAG,GAA3B,CAAT,EAA0CM,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBX,MAAnE,CAAtB;MAEAG,aAAa,CAACS,SAAS,IAAIA,SAAS,CAACR,GAAV,CAAc,CAACC,SAAD,EAAYR,KAAZ,KAAsB;QAC3D,OAAOC,YAAY,KAAKD,KAAjB,GAAyBW,aAAzB,GAAyCH,SAAhD;MACH,CAF0B,CAAd,CAAb;IAGH;EACJ,CARsC,EAQpC,CAACP,YAAD,EAAeC,iBAAf,CARoC,CAAvC;EAUA,OAAO;IACHO,mBADG;IAEHJ;EAFG,CAAP;AAIH"}
+{"version":3,"names":["R","useCallback","useMemo","useState","useWindowDimensions","convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","maxHeightNormalizedRatio","snapPoints","height","contentHeight","setContentHeight","convertedSnapPoints","map","push","Array","from","Set","sort","a","b","highestSnapPoint","last","handleContentSizeChange","_"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import * as R from 'ramda';\nimport { useCallback, useMemo, useState } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    enableDynamicSizing: boolean;\n    maxHeightNormalizedRatio: number;\n    snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    convertedSnapPoints: number[];\n    handleContentSizeChange: (w: number, h: number) => void;\n    highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n    if (typeof snapPoint === 'number') {\n        return Math.min(maxDynamicContentSize, snapPoint);\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(snapPoint)) {\n        const percentage = parseFloat(snapPoint) / 100;\n        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    } = params;\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [contentHeight, setContentHeight] = useState<number>(0);\n\n    const convertedSnapPoints = useMemo(() => {\n        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n        const convertedSnapPoints = snapPoints.map((snapPoint) => {\n            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n        });\n\n        if (enableDynamicSizing && contentHeight !== 0) {\n            convertedSnapPoints.push(\n                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n            );\n        }\n\n        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n    }, [\n        contentHeight,\n        snapPoints,\n        windowHeight,\n    ]);\n\n    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;\n\n    const handleContentSizeChange = useCallback((_: number, height: number) => {\n        setContentHeight(height);\n    }, []);\n\n    return {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    };\n}\n"],"mappings":"AAAA,OAAO,KAAKA,CAAZ,MAAmB,OAAnB;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,mBAAT,QAAoC,cAApC;;AAcA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFC,wBAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAM;IAAEI,MAAM,EAAEhB;EAAV,IAA2BH,mBAAmB,EAApD;EAEA,MAAM,CAACoB,aAAD,EAAgBC,gBAAhB,IAAoCtB,QAAQ,CAAS,CAAT,CAAlD;EAEA,MAAMuB,mBAAmB,GAAGxB,OAAO,CAAC,MAAM;IACtC,MAAMM,qBAAqB,GAAGC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGc,wBAA1B,CAA9B;IAEA,MAAMK,mBAAmB,GAAGJ,UAAU,CAACK,GAAX,CAAgBrB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAII,aAAa,KAAK,CAA7C,EAAgD;MAC5CE,mBAAmB,CAACE,IAApB,CACIvB,gBAAgB,CAACmB,aAAD,EAAgBjB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOqB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQL,mBAAR,CAAX,EAAyCM,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAdkC,EAchC,CACCV,aADD,EAECF,UAFD,EAGCf,YAHD,CAdgC,CAAnC;EAoBA,MAAM4B,gBAAgB,GAAGnC,CAAC,CAACoC,IAAF,CAAOV,mBAAP,KAA+B,CAAxD;EAEA,MAAMW,uBAAuB,GAAGpC,WAAW,CAAC,CAACqC,CAAD,EAAYf,MAAZ,KAA+B;IACvEE,gBAAgB,CAACF,MAAD,CAAhB;EACH,CAF0C,EAExC,EAFwC,CAA3C;EAIA,OAAO;IACHG,mBADG;IAEHW,uBAFG;IAGHF;EAHG,CAAP;AAKH"}

package/build/typescript/BottomSheet/BottomSheetProps.d.ts

@@ -10,6 +10,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      * BottomSheet children, usually the included sub-components.
      */
     children?: React.ReactNode;
+    /**
+     * Enable dynamic sizing for content size.
+     * @default true
+     */
+    enableDynamicSizing?: boolean;
     /**
      * Area to be fixed on the top of the bottom sheet.
      */
@@ -18,6 +23,12 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */
     index: number;
+    /**
+     * Maximum height(normalized value) of dialog
+     * ex. 30% => 0.3 / 90% => 0.9
+     * @default 0.9
+     */
+    maxHeightNormalizedRatio?: number;
     /**
      * Callback fired when the index is changed.
      * Important! Use memoized value.
@@ -27,7 +38,8 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
      * Only number type or string type(~% format) can be used.
+     * @default []
      */
-    snapPoints: Array<number | string>;
+    snapPoints?: Array<number | string>;
 }> {
 }

package/build/typescript/BottomSheet/useDynamicSnapPoints.d.ts

@@ -1,11 +1,12 @@
-import { LayoutChangeEvent } from 'react-native';
 interface UseDynamicSnapPointsParams {
-    index: number;
-    initialSnapPoints: (number | string)[];
+    enableDynamicSizing: boolean;
+    maxHeightNormalizedRatio: number;
+    snapPoints: (number | string)[];
 }
 interface UseDynamicSnapPointsReturns {
-    handleContentLayout: (e: LayoutChangeEvent) => void;
-    snapPoints: number[];
+    convertedSnapPoints: number[];
+    handleContentSizeChange: (w: number, h: number) => void;
+    highestSnapPoint: number;
 }
-export default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns;
+export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns;
 export {};

package/build/typescript/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "scrollEnabled" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
 export default _default;

package/build/typescript/ViewPager/ViewPager.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/build/typescript/ViewPager/ViewPager.native.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.42",
+  "version": "2.0.0-beta.44",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "@fountain-ui/core": "^2.0.0-beta.3",
-    "@gorhom/bottom-sheet": "^4.1.3",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -43,7 +43,7 @@
     }
   },
   "devDependencies": {
-    "@gorhom/bottom-sheet": "4.1.3",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.23.0",
     "react-native-pager-view": "^4.2.4",
     "react-native-safe-area-context": "^4.0.0"
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "263ed4f4ec14ca755180bad17b877d9ab9658e52"
+  "gitHead": "d6c9346f8fd3675ac5096ee5caaad3f372f9def6"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, useWindowDimensions, View } from 'react-native';
 import { useTheme } from '@fountain-ui/styles';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
     BottomSheetModal,
     BottomSheetModalProvider,
+    BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
@@ -16,14 +17,20 @@ export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
         children,
+        enableDynamicSizing = true,
+        header,
         index,
+        maxHeightNormalizedRatio = 0.9,
         onChange,
-        snapPoints,
+        snapPoints = [],
     } = props;
 
     const indexRef = React.useRef<number>(-1);
     const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);
 
+    const { height: windowHeight } = useWindowDimensions();
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+
     const handleChange = React.useCallback((newIndex: number) => {
         indexRef.current = newIndex;
 
@@ -64,6 +71,12 @@ export default function BottomSheet(props: BottomSheetProps) {
     const backgroundStyle = {
         backgroundColor: theme.palette.paper.default,
     };
+    const contentWrapperStyle = {
+        flex: 1,
+        borderTopLeftRadius: 15,
+        borderTopRightRadius: 15,
+        overflow: 'hidden',
+    };
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -91,8 +104,20 @@ export default function BottomSheet(props: BottomSheetProps) {
                 snapPoints={snapPoints}
                 style={modalStyle}
                 enablePanDownToClose={Boolean(onChange)}
+                enableDynamicSizing={enableDynamicSizing}
+                maxDynamicContentSize={maxDynamicContentSize}
             >
-                {children}
+                {/* @ts-ignore */}
+                <View style={contentWrapperStyle}>
+                    <BottomSheetScrollView
+                        bounces={false}
+                        stickyHeaderIndices={header ? [0] : undefined}
+                    >
+                        {header}
+
+                        {children}
+                    </BottomSheetScrollView>
+                </View>
             </BottomSheetModal>
         </BottomSheetModalProvider>
     );

package/src/BottomSheet/BottomSheetProps.ts

@@ -13,6 +13,12 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     children?: React.ReactNode;
 
+    /**
+     * Enable dynamic sizing for content size.
+     * @default true
+     */
+    enableDynamicSizing?: boolean;
+
     /**
      * Area to be fixed on the top of the bottom sheet.
      */
@@ -23,6 +29,13 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     index: number;
 
+    /**
+     * Maximum height(normalized value) of dialog
+     * ex. 30% => 0.3 / 90% => 0.9
+     * @default 0.9
+     */
+    maxHeightNormalizedRatio?: number;
+
     /**
      * Callback fired when the index is changed.
      * Important! Use memoized value.
@@ -33,6 +46,7 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
      * Only number type or string type(~% format) can be used.
+     * @default []
      */
-    snapPoints: Array<number | string>;
+    snapPoints?: Array<number | string>;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
 import type BottomSheetProps from './BottomSheetProps';
+import useDynamicSnapPoints from './useDynamicSnapPoints';
 
 type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;
 
@@ -29,41 +30,42 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     };
 };
 
-const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
-    if (typeof value === 'number') {
-        return value;
-    }
-
-    const percentageRegex = new RegExp(/^[0-9]+%$/);
-    if (percentageRegex.test(value)) {
-        const percentage = parseFloat(value) / 100;
-        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
-    }
-
-    return 0;
-};
-
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
         children,
+        enableDynamicSizing = true,
+        header,
         index,
+        maxHeightNormalizedRatio = 0.9,
         onChange,
-        snapPoints,
+        snapPoints = [],
     } = props;
 
     const styles = useStyles();
 
-    const { height: windowHeight } = useWindowDimensions();
-
     const handleClose = () => {
         if (onChange) {
             onChange(-1);
         }
     };
 
-    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
-    const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));
+    const {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
+    } = useDynamicSnapPoints({
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    });
+
+    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+
+    const paperStyles = [
+        styles.paper,
+        { height: highestSnapPoint },
+    ];
 
     return (
         <Modal
@@ -78,12 +80,16 @@ export default function BottomSheet(props: BottomSheetProps) {
             >
                 <Paper
                     elevation={12}
-                    style={[
-                        styles.paper,
-                        { height },
-                    ]}
+                    style={paperStyles}
                 >
-                    {children}
+                    <ScrollView
+                        onContentSizeChange={handleContentSizeChange}
+                        stickyHeaderIndices={header ? [0] : undefined}
+                    >
+                        {header}
+
+                        {children}
+                    </ScrollView>
                 </Paper>
             </AnimatedY>
         </Modal>

package/src/BottomSheet/useDynamicSnapPoints.ts

@@ -1,52 +1,73 @@
-import { useCallback, useState } from 'react';
-import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
 
 interface UseDynamicSnapPointsParams {
-    index: number;
-    initialSnapPoints: (number | string)[];
+    enableDynamicSizing: boolean;
+    maxHeightNormalizedRatio: number;
+    snapPoints: (number | string)[];
 }
 
 interface UseDynamicSnapPointsReturns {
-    handleContentLayout: (e: LayoutChangeEvent) => void;
-    snapPoints: number[];
+    convertedSnapPoints: number[];
+    handleContentSizeChange: (w: number, h: number) => void;
+    highestSnapPoint: number;
 }
 
-const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
-    if (typeof value === 'number') {
-        return value;
+const convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {
+    if (typeof snapPoint === 'number') {
+        return Math.min(maxDynamicContentSize, snapPoint);
     }
 
     const percentageRegex = new RegExp(/^[0-9]+%$/);
-    if (percentageRegex.test(value)) {
-        const percentage = parseFloat(value) / 100;
-        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+    if (percentageRegex.test(snapPoint)) {
+        const percentage = parseFloat(snapPoint) / 100;
+        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));
     }
 
     return 0;
 };
 
-export default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
+export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
     const {
-        index: currentIndex,
-        initialSnapPoints,
-    } = props;
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    } = params;
+
+    const { height: windowHeight } = useWindowDimensions();
 
-    const { height: WINDOW_HEIGHT } = useWindowDimensions();
+    const [contentHeight, setContentHeight] = useState<number>(0);
 
-    const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map((snapPoint) => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));
+    const convertedSnapPoints = useMemo(() => {
+        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
 
-    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {
-        if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {
-            const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);
-            
-            setSnapPoints(prevState => prevState.map((snapPoint, index) => {
-                return currentIndex === index ? contentHeight : snapPoint;
-            }));
+        const convertedSnapPoints = snapPoints.map((snapPoint) => {
+            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+        });
+
+        if (enableDynamicSizing && contentHeight !== 0) {
+            convertedSnapPoints.push(
+                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),
+            );
         }
-    }, [currentIndex, initialSnapPoints]);
 
-    return {
-        handleContentLayout,
+        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+    }, [
+        contentHeight,
         snapPoints,
+        windowHeight,
+    ]);
+
+    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+
+    const handleContentSizeChange = useCallback((_: number, height: number) => {
+        setContentHeight(height);
+    }, []);
+
+    return {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
     };
 }