From 8017fb6b02088d3c66c64a8a23e0f63f22884d36 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom.dev@gmail.com>
Date: Wed, 3 Jan 2024 19:22:41 +0100
Subject: [PATCH] feat: added default dynamic sizing (#1513)(with @Eli-Nathan &
 @ororsatti) (#1683)

---
 .../advanced/DynamicSnapPointExample.tsx      |  32 +++---
 .../screens/modal/DynamicSnapPointExample.tsx |  32 +++---
 src/components/bottomSheet/BottomSheet.tsx    |  70 ++++++------
 src/components/bottomSheet/constants.ts       |   2 +
 src/components/bottomSheet/types.d.ts         |  33 +++---
 .../bottomSheetModal/BottomSheetModal.tsx     |   9 +-
 .../createBottomSheetScrollableComponent.tsx  |  22 +++-
 .../bottomSheetView/BottomSheetView.tsx       |  34 +++++-
 src/constants.ts                              |   6 +
 src/contexts/internal.ts                      |   1 +
 src/hooks/index.ts                            |   1 -
 src/hooks/useBottomSheetDynamicSnapPoints.ts  |  61 -----------
 src/hooks/useNormalizedSnapPoints.ts          | 103 +++++++++++++-----
 src/hooks/usePropsValidator.ts                |  20 ++--
 src/index.ts                                  |   1 -
 src/utilities/normalizeSnapPoint.ts           |   5 +-
 16 files changed, 242 insertions(+), 190 deletions(-)
 delete mode 100644 src/hooks/useBottomSheetDynamicSnapPoints.ts

diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
index fb9340225..724818918 100644
--- a/example/src/screens/advanced/DynamicSnapPointExample.tsx
+++ b/example/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import BottomSheet, {
   BottomSheetView,
-  useBottomSheetDynamicSnapPoints,
+  SNAP_POINT_TYPE,
 } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Button } from '../../components/button';
@@ -10,19 +10,12 @@ import { Button } from '../../components/button';
 const DynamicSnapPointExample = () => {
   // state
   const [count, setCount] = useState(0);
-  const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
 
   // hooks
   const { bottom: safeBottomArea } = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheet>(null);
-  const {
-    animatedHandleHeight,
-    animatedSnapPoints,
-    animatedContentHeight,
-    handleContentLayout,
-  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
 
-  // callbacks
+  //#region callbacks
   const handleIncreaseContentPress = useCallback(() => {
     setCount(state => state + 1);
   }, []);
@@ -35,8 +28,16 @@ const DynamicSnapPointExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
+  const handleSheetChange = useCallback(
+    (index: number, position: number, type: SNAP_POINT_TYPE) => {
+      // eslint-disable-next-line no-console
+      console.log('handleSheetChange', { index, position, type });
+    },
+    []
+  );
+  //#endregion
 
-  // styles
+  //#region styles
   const contentContainerStyle = useMemo(
     () => [
       styles.contentContainerStyle,
@@ -51,6 +52,7 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
+  //#endregion
 
   // renders
   return (
@@ -59,16 +61,12 @@ const DynamicSnapPointExample = () => {
       <Button label="Close" onPress={handleClosePress} />
       <BottomSheet
         ref={bottomSheetRef}
-        snapPoints={animatedSnapPoints}
-        handleHeight={animatedHandleHeight}
-        contentHeight={animatedContentHeight}
+        enableDynamicSizing={true}
         enablePanDownToClose={true}
         animateOnMount={true}
+        onChange={handleSheetChange}
       >
-        <BottomSheetView
-          style={contentContainerStyle}
-          onLayout={handleContentLayout}
-        >
+        <BottomSheetView style={contentContainerStyle}>
           <Text style={styles.message}>
             Could this sheet resize to its content height ?
           </Text>
diff --git a/example/src/screens/modal/DynamicSnapPointExample.tsx b/example/src/screens/modal/DynamicSnapPointExample.tsx
index a2cdf5d3f..a946c4bcb 100644
--- a/example/src/screens/modal/DynamicSnapPointExample.tsx
+++ b/example/src/screens/modal/DynamicSnapPointExample.tsx
@@ -3,7 +3,7 @@ import { View, StyleSheet, Text } from 'react-native';
 import {
   BottomSheetModal,
   BottomSheetView,
-  useBottomSheetDynamicSnapPoints,
+  SNAP_POINT_TYPE,
 } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Button } from '../../components/button';
@@ -12,19 +12,12 @@ import { withModalProvider } from './withModalProvider';
 const DynamicSnapPointExample = () => {
   // state
   const [count, setCount] = useState(0);
-  const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
 
   // hooks
   const { bottom: safeBottomArea } = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const {
-    animatedHandleHeight,
-    animatedSnapPoints,
-    animatedContentHeight,
-    handleContentLayout,
-  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
 
-  // callbacks
+  //#region callbacks
   const handleIncreaseContentPress = useCallback(() => {
     setCount(state => state + 1);
   }, []);
@@ -38,8 +31,16 @@ const DynamicSnapPointExample = () => {
   const handleDismissPress = useCallback(() => {
     bottomSheetRef.current?.dismiss();
   }, []);
+  const handleSheetChange = useCallback(
+    (index: number, position: number, type: SNAP_POINT_TYPE) => {
+      // eslint-disable-next-line no-console
+      console.log('handleSheetChange', { index, position, type });
+    },
+    []
+  );
+  //#endregion
 
-  // styles
+  //#region styles
   const contentContainerStyle = useMemo(
     () => ({
       ...styles.contentContainerStyle,
@@ -54,6 +55,7 @@ const DynamicSnapPointExample = () => {
     }),
     [count]
   );
+  //#endregion
 
   // renders
   return (
@@ -62,15 +64,11 @@ const DynamicSnapPointExample = () => {
       <Button label="Dismiss" onPress={handleDismissPress} />
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={animatedSnapPoints}
-        handleHeight={animatedHandleHeight}
-        contentHeight={animatedContentHeight}
+        enableDynamicSizing={true}
         enablePanDownToClose={true}
+        onChange={handleSheetChange}
       >
-        <BottomSheetView
-          style={contentContainerStyle}
-          onLayout={handleContentLayout}
-        >
+        <BottomSheetView style={contentContainerStyle}>
           <Text style={styles.message}>
             Could this sheet modal resize to its content height ?
           </Text>
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 53885630c..7f5b16c72 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -51,6 +51,7 @@ import {
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
   ANIMATION_SOURCE,
+  SNAP_POINT_TYPE,
 } from '../../constants';
 import {
   animate,
@@ -74,6 +75,7 @@ import {
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
   INITIAL_CONTAINER_OFFSET,
   INITIAL_VALUE,
+  DEFAULT_DYNAMIC_SIZING,
 } from './constants';
 import type { BottomSheetMethods, Insets } from '../../types';
 import type { BottomSheetProps, AnimateToPositionType } from './types';
@@ -104,6 +106,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enablePanDownToClose = DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
+      enableDynamicSizing = DEFAULT_DYNAMIC_SIZING,
       overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
 
       // styles
@@ -122,12 +125,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       android_keyboardInputMode = DEFAULT_KEYBOARD_INPUT_MODE,
 
       // layout
-      handleHeight: _providedHandleHeight,
       containerHeight: _providedContainerHeight,
-      contentHeight: _providedContentHeight,
       containerOffset: _providedContainerOffset,
       topInset = 0,
       bottomInset = 0,
+      maxDynamicContentSize,
 
       // animated callback shared values
       animatedPosition: _providedAnimatedPosition,
@@ -181,17 +183,20 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedContainerOffset = useReactiveSharedValue(
       _providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
     ) as Animated.SharedValue<Insets>;
-    const animatedHandleHeight = useReactiveSharedValue(
-      _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
+    const animatedHandleHeight = useReactiveSharedValue<number>(
+      INITIAL_HANDLE_HEIGHT
     );
     const animatedFooterHeight = useSharedValue(0);
-    const animatedSnapPoints = useNormalizedSnapPoints(
-      _providedSnapPoints,
-      animatedContainerHeight,
-      topInset,
-      bottomInset,
-      $modal
-    );
+    const animatedContentHeight = useSharedValue(INITIAL_CONTAINER_HEIGHT);
+    const [animatedSnapPoints, animatedDynamicSnapPointIndex] =
+      useNormalizedSnapPoints(
+        _providedSnapPoints,
+        animatedContainerHeight,
+        animatedContentHeight,
+        animatedHandleHeight,
+        enableDynamicSizing,
+        maxDynamicContentSize
+      );
     const animatedHighestSnapPoint = useDerivedValue(
       () => animatedSnapPoints.value[animatedSnapPoints.value.length - 1]
     );
@@ -232,14 +237,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       let isHandleHeightCalculated = false;
-      // handle height is provided.
-      if (
-        _providedHandleHeight !== null &&
-        _providedHandleHeight !== undefined &&
-        typeof _providedHandleHeight === 'number'
-      ) {
-        isHandleHeightCalculated = true;
-      }
       // handle component is null.
       if (handleComponent === null) {
         animatedHandleHeight.value = 0;
@@ -388,7 +385,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       return SCROLLABLE_STATE.LOCKED;
     });
     // dynamic
-    const animatedContentHeight = useDerivedValue(() => {
+    const animatedContentHeightMax = useDerivedValue(() => {
       const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
       const handleHeight = Math.max(0, animatedHandleHeight.value);
       let contentHeight = animatedSheetHeight.value - handleHeight;
@@ -590,7 +587,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       ]
     );
     const handleOnChange = useCallback(
-      function handleOnChange(index: number) {
+      function handleOnChange(index: number, position: number) {
         print({
           component: BottomSheet.name,
           method: handleOnChange.name,
@@ -601,10 +598,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         });
 
         if (_providedOnChange) {
-          _providedOnChange(index);
+          _providedOnChange(
+            index,
+            position,
+            index === animatedDynamicSnapPointIndex.value
+              ? SNAP_POINT_TYPE.DYNAMIC
+              : SNAP_POINT_TYPE.PROVIDED
+          );
         }
       },
-      [_providedOnChange, animatedCurrentIndex]
+      [_providedOnChange, animatedCurrentIndex, animatedDynamicSnapPointIndex]
     );
     const handleOnAnimate = useCallback(
       function handleOnAnimate(toPoint: number) {
@@ -854,9 +857,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         const nextPosition = normalizeSnapPoint(
           position,
-          animatedContainerHeight.value,
-          topInset,
-          bottomInset
+          animatedContainerHeight.value
         );
 
         /**
@@ -1101,6 +1102,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const internalContextVariables = useMemo(
       () => ({
         enableContentPanningGesture,
+        enableDynamicSizing,
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
@@ -1168,6 +1170,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
+        enableDynamicSizing,
         _providedSimultaneousHandlers,
         _providedWaitFor,
         _providedActiveOffsetX,
@@ -1223,20 +1226,23 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     const contentContainerAnimatedStyle = useAnimatedStyle(() => {
       /**
-       * if content height was provided, then we skip setting
-       * calculated height.
+       * if dynamic sizing is enabled, and content height
+       * is still not set, then we exit method.
        */
-      if (_providedContentHeight) {
+      if (
+        enableDynamicSizing &&
+        animatedContentHeight.value === INITIAL_CONTAINER_HEIGHT
+      ) {
         return {};
       }
 
       return {
         height: animate({
-          point: animatedContentHeight.value,
+          point: animatedContentHeightMax.value,
           configs: _providedAnimationConfigs,
         }),
       };
-    }, [animatedContentHeight, _providedContentHeight]);
+    }, [animatedContentHeightMax, enableDynamicSizing, animatedContentHeight]);
     const contentContainerStyle = useMemo(
       () => [styles.contentContainer, contentContainerAnimatedStyle],
       [contentContainerAnimatedStyle]
@@ -1620,7 +1626,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           });
 
           animatedCurrentIndex.value = _animatedIndex;
-          runOnJS(handleOnChange)(_animatedIndex);
+          runOnJS(handleOnChange)(_animatedIndex, _animatedPosition);
         }
 
         /**
diff --git a/src/components/bottomSheet/constants.ts b/src/components/bottomSheet/constants.ts
index a08599191..c81b4ca64 100644
--- a/src/components/bottomSheet/constants.ts
+++ b/src/components/bottomSheet/constants.ts
@@ -13,6 +13,7 @@ const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
 const DEFAULT_ENABLE_OVER_DRAG = true;
 const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = true;
+const DEFAULT_DYNAMIC_SIZING = true;
 
 // keyboard
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
@@ -39,6 +40,7 @@ export {
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
+  DEFAULT_DYNAMIC_SIZING,
   DEFAULT_ANIMATE_ON_MOUNT,
   // keyboard
   DEFAULT_KEYBOARD_BEHAVIOR,
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index b9cca0930..93b7d52f3 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -12,6 +12,7 @@ import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
 import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
 import type { BottomSheetFooterProps } from '../bottomSheetFooter';
 import type {
+  SNAP_POINT_TYPE,
   ANIMATION_SOURCE,
   KEYBOARD_BEHAVIOR,
   KEYBOARD_BLUR_BEHAVIOR,
@@ -32,13 +33,15 @@ export interface BottomSheetProps
   /**
    * Points for the bottom sheet to snap to. It accepts array of number, string or mix.
    * String values should be a percentage.
+   *
+   * ⚠️ This prop is required unless you set `enableDynamicSizing` to `true`.
    * @example
    * snapPoints={[200, 500]}
    * snapPoints={[200, '%50']}
    * snapPoints={['%100']}
    * @type Array<string | number>
    */
-  snapPoints: Array<string | number> | SharedValue<Array<string | number>>;
+  snapPoints?: Array<string | number> | SharedValue<Array<string | number>>;
   /**
    * Defines how violently sheet has to be stopped while over dragging.
    * @type number
@@ -75,6 +78,13 @@ export interface BottomSheetProps
    * @default false
    */
   enablePanDownToClose?: boolean;
+  /**
+   * Enable dynamic sizing for content view and scrollable
+   * content size.
+   * @type boolean
+   * @default false
+   */
+  enableDynamicSizing?: boolean;
   /**
    * To start the sheet closed and snap to initial index when it's mounted.
    * @type boolean
@@ -84,13 +94,6 @@ export interface BottomSheetProps
   //#endregion
 
   //#region layout
-  /**
-   * Handle height helps to calculate the internal container and sheet layouts,
-   * if `handleComponent` is provided, the library internally will calculate its layout,
-   * unless `handleHeight` is provided.
-   * @type number
-   */
-  handleHeight?: number | SharedValue<number>;
   /**
    * Container height helps to calculate the internal sheet layouts,
    * if `containerHeight` not provided, the library internally will calculate it,
@@ -98,11 +101,6 @@ export interface BottomSheetProps
    * @type number | SharedValue<number>;
    */
   containerHeight?: number | SharedValue<number>;
-  /**
-   * Content height helps dynamic snap points calculation.
-   * @type number | SharedValue<number>;
-   */
-  contentHeight?: number | SharedValue<number>;
   /**
    * Container offset helps to accurately detect container offsets.
    * @type SharedValue<number>;
@@ -123,6 +121,13 @@ export interface BottomSheetProps
    * @default 0
    */
   bottomInset?: number;
+  /**
+   * Max dynamic content size height to limit the bottom sheet height
+   * from exceeding a provided size.
+   * @type number
+   * @default container height
+   */
+  maxDynamicContentSize?: number;
   //#endregion
 
   //#region keyboard
@@ -230,7 +235,7 @@ export interface BottomSheetProps
    *
    * @type (index: number) => void;
    */
-  onChange?: (index: number) => void;
+  onChange?: (index: number, position: number, type: SNAP_POINT_TYPE) => void;
   /**
    * Callback when the sheet close.
    *
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 0eeb9c863..ce0447080 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -18,6 +18,7 @@ import {
 import type { BottomSheetModalMethods, BottomSheetMethods } from '../../types';
 import type { BottomSheetModalProps } from './types';
 import { id } from '../../utilities/id';
+import { SNAP_POINT_TYPE } from 'src/constants';
 
 type BottomSheetModal = BottomSheetModalMethods;
 
@@ -308,7 +309,11 @@ const BottomSheetModalComponent = forwardRef<
   },
   []);
   const handleBottomSheetOnChange = useCallback(
-    function handleBottomSheetOnChange(_index: number) {
+    function handleBottomSheetOnChange(
+      _index: number,
+      _position: number,
+      _type: SNAP_POINT_TYPE
+    ) {
       print({
         component: BottomSheetModal.name,
         method: handleBottomSheetOnChange.name,
@@ -320,7 +325,7 @@ const BottomSheetModalComponent = forwardRef<
       currentIndexRef.current = _index;
 
       if (_providedOnChange) {
-        _providedOnChange(_index);
+        _providedOnChange(_index, _position, _type);
       }
     },
     [_providedOnChange]
diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
index a8006399a..1bde39084 100644
--- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
+++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -11,6 +11,7 @@ import {
   useScrollHandler,
   useScrollableSetter,
   useBottomSheetInternal,
+  useStableCallback,
 } from '../../hooks';
 import {
   SCROLLABLE_DECELERATION_RATE_MAPPER,
@@ -43,6 +44,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       onScroll,
       onScrollBeginDrag,
       onScrollEndDrag,
+      onContentSizeChange,
       ...rest
     }: any = props;
 
@@ -55,8 +57,11 @@ export function createBottomSheetScrollableComponent<T, P>(
         onScrollBeginDrag,
         onScrollEndDrag
       );
-    const { animatedFooterHeight, animatedScrollableState } =
-      useBottomSheetInternal();
+    const {
+      animatedFooterHeight,
+      animatedContentHeight,
+      animatedScrollableState,
+    } = useBottomSheetInternal();
     //#endregion
 
     //#region variables
@@ -81,6 +86,18 @@ export function createBottomSheetScrollableComponent<T, P>(
     );
     //#endregion
 
+    //#region callbacks
+    const handleContentSizeChange = useStableCallback(
+      (contentWidth: number, contentHeight: number) => {
+        animatedContentHeight.value = contentHeight;
+
+        if (onContentSizeChange) {
+          onContentSizeChange(contentWidth, contentHeight);
+        }
+      }
+    );
+    //#endregion
+
     //#region styles
     const containerAnimatedStyle = useAnimatedStyle(
       () => ({
@@ -126,6 +143,7 @@ export function createBottomSheetScrollableComponent<T, P>(
         style={containerStyle}
         onRefresh={onRefresh}
         onScroll={scrollHandler}
+        onContentSizeChange={handleContentSizeChange}
         ScrollableComponent={ScrollableComponent}
         refreshControl={refreshControl}
         {...rest}
diff --git a/src/components/bottomSheetView/BottomSheetView.tsx b/src/components/bottomSheetView/BottomSheetView.tsx
index 16005ef62..1873a53aa 100644
--- a/src/components/bottomSheetView/BottomSheetView.tsx
+++ b/src/components/bottomSheetView/BottomSheetView.tsx
@@ -1,23 +1,28 @@
 import React, { memo, useEffect, useCallback, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import { LayoutChangeEvent, StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { SCROLLABLE_TYPE } from '../../constants';
 import { useBottomSheetInternal } from '../../hooks';
 import type { BottomSheetViewProps } from './types';
+import { print } from '../../utilities';
 
 function BottomSheetViewComponent({
   focusHook: useFocusHook = useEffect,
   enableFooterMarginAdjustment = false,
+  onLayout,
   style,
   children,
   ...rest
 }: BottomSheetViewProps) {
-  // hooks
+  //#region hooks
   const {
     animatedScrollableContentOffsetY,
     animatedScrollableType,
     animatedFooterHeight,
+    enableDynamicSizing,
+    animatedContentHeight,
   } = useBottomSheetInternal();
+  //#endregion
 
   //#region styles
   const flattenContainerStyle = useMemo(
@@ -52,18 +57,39 @@ function BottomSheetViewComponent({
   );
   //#endregion
 
-  // callback
+  //#region callbacks
   const handleSettingScrollable = useCallback(() => {
     animatedScrollableContentOffsetY.value = 0;
     animatedScrollableType.value = SCROLLABLE_TYPE.VIEW;
   }, [animatedScrollableContentOffsetY, animatedScrollableType]);
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (enableDynamicSizing) {
+        animatedContentHeight.value = event.nativeEvent.layout.height;
+      }
+
+      if (onLayout) {
+        onLayout(event);
+      }
+
+      print({
+        component: BottomSheetView.displayName,
+        method: 'handleLayout',
+        params: {
+          height: event.nativeEvent.layout.height,
+        },
+      });
+    },
+    [onLayout, animatedContentHeight, enableDynamicSizing]
+  );
+  //#endregion
 
   // effects
   useFocusHook(handleSettingScrollable);
 
   //render
   return (
-    <Animated.View style={containerStyle} {...rest}>
+    <Animated.View onLayout={handleLayout} style={containerStyle} {...rest}>
       {children}
       <Animated.View pointerEvents="none" style={spaceStyle} />
     </Animated.View>
diff --git a/src/constants.ts b/src/constants.ts
index cc8fb9f71..b8d10f862 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -62,6 +62,11 @@ enum KEYBOARD_STATE {
   HIDDEN,
 }
 
+enum SNAP_POINT_TYPE {
+  PROVIDED = 0,
+  DYNAMIC,
+}
+
 const ANIMATION_EASING: Animated.EasingFunction = Easing.out(Easing.exp);
 const ANIMATION_DURATION = 250;
 
@@ -124,6 +129,7 @@ export {
   SCROLLABLE_TYPE,
   SCROLLABLE_STATE,
   KEYBOARD_STATE,
+  SNAP_POINT_TYPE,
   WINDOW_HEIGHT,
   WINDOW_WIDTH,
   SCREEN_HEIGHT,
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index 8f3a96fe3..3122681ca 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -23,6 +23,7 @@ export interface BottomSheetInternalContextType
         | 'enableContentPanningGesture'
         | 'enableOverDrag'
         | 'enablePanDownToClose'
+        | 'enableDynamicSizing'
         | 'overDragResistanceFactor'
       >
     > {
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 52e9ec7fd..31ac985b6 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -20,5 +20,4 @@ export { useStableCallback } from './useStableCallback';
 export { usePropsValidator } from './usePropsValidator';
 export { useNormalizedSnapPoints } from './useNormalizedSnapPoints';
 export { useReactiveSharedValue } from './useReactiveSharedValue';
-export { useBottomSheetDynamicSnapPoints } from './useBottomSheetDynamicSnapPoints';
 export { useBottomSheetGestureHandlers } from './useBottomSheetGestureHandlers';
diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts
deleted file mode 100644
index cb3f471cd..000000000
--- a/src/hooks/useBottomSheetDynamicSnapPoints.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useCallback } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import {
-  INITIAL_HANDLE_HEIGHT,
-  INITIAL_SNAP_POINT,
-} from '../components/bottomSheet/constants';
-
-/**
- * Provides dynamic content height calculating functionalities, by
- * replacing the placeholder `CONTENT_HEIGHT` with calculated layout.
- * @example
- * [0, 'CONTENT_HEIGHT', '100%']
- * @param initialSnapPoints your snap point with content height placeholder.
- * @returns {
- *  - animatedSnapPoints: an animated snap points to be set on `BottomSheet` or `BottomSheetModal`.
- *  - animatedHandleHeight: an animated handle height callback node to be set on `BottomSheet` or `BottomSheetModal`.
- *  - animatedContentHeight: an animated content height callback node to be set on `BottomSheet` or `BottomSheetModal`.
- *  - handleContentLayout: a `onLayout` callback method to be set on `BottomSheetView` component.
- * }
- */
-export const useBottomSheetDynamicSnapPoints = (
-  initialSnapPoints: Array<string | number>
-) => {
-  // variables
-  const animatedContentHeight = useSharedValue(0);
-  const animatedHandleHeight = useSharedValue(INITIAL_HANDLE_HEIGHT);
-  const animatedSnapPoints = useDerivedValue(() => {
-    if (
-      animatedHandleHeight.value === INITIAL_HANDLE_HEIGHT ||
-      animatedContentHeight.value === 0
-    ) {
-      return initialSnapPoints.map(() => INITIAL_SNAP_POINT);
-    }
-    const contentWithHandleHeight =
-      animatedContentHeight.value + animatedHandleHeight.value;
-
-    return initialSnapPoints.map(snapPoint =>
-      snapPoint === 'CONTENT_HEIGHT' ? contentWithHandleHeight : snapPoint
-    );
-  }, []);
-
-  // callbacks
-  const handleContentLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }: LayoutChangeEvent) => {
-      animatedContentHeight.value = height;
-    },
-    [animatedContentHeight]
-  );
-
-  return {
-    animatedSnapPoints,
-    animatedHandleHeight,
-    animatedContentHeight,
-    handleContentLayout,
-  };
-};
diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts
index 31d8ff226..517421d12 100644
--- a/src/hooks/useNormalizedSnapPoints.ts
+++ b/src/hooks/useNormalizedSnapPoints.ts
@@ -1,46 +1,93 @@
-import Animated, { useDerivedValue } from 'react-native-reanimated';
+import Animated, {
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
 import { normalizeSnapPoint } from '../utilities';
 import type { BottomSheetProps } from '../components/bottomSheet';
 import {
   INITIAL_CONTAINER_HEIGHT,
+  INITIAL_HANDLE_HEIGHT,
   INITIAL_SNAP_POINT,
 } from '../components/bottomSheet/constants';
 
 /**
  * Convert percentage snap points to pixels in screen and calculate
  * the accurate snap points positions.
- * @param providedSnapPoints provided snap points.
+ * @param snapPoints provided snap points.
  * @param containerHeight BottomSheetContainer height.
- * @param topInset top inset.
- * @param bottomInset bottom inset.
- * @param $modal is sheet in a modal.
+ * @param contentHeight content size.
+ * @param handleHeight handle size.
+ * @param enableDynamicSizing
+ * @param maxDynamicContentSize
  * @returns {Animated.SharedValue<number[]>}
  */
 export const useNormalizedSnapPoints = (
-  providedSnapPoints: BottomSheetProps['snapPoints'],
+  snapPoints: BottomSheetProps['snapPoints'],
   containerHeight: Animated.SharedValue<number>,
-  topInset: number,
-  bottomInset: number,
-  $modal: boolean
-) => {
-  const normalizedSnapPoints = useDerivedValue(() =>
-    ('value' in providedSnapPoints
-      ? providedSnapPoints.value
-      : providedSnapPoints
-    ).map(snapPoint => {
-      if (containerHeight.value === INITIAL_CONTAINER_HEIGHT) {
-        return INITIAL_SNAP_POINT;
-      }
-
-      return normalizeSnapPoint(
-        snapPoint,
-        containerHeight.value,
-        topInset,
-        bottomInset,
-        $modal
+  contentHeight: Animated.SharedValue<number>,
+  handleHeight: Animated.SharedValue<number>,
+  enableDynamicSizing: BottomSheetProps['enableDynamicSizing'],
+  maxDynamicContentSize: BottomSheetProps['maxDynamicContentSize']
+): [Animated.SharedValue<number[]>, Animated.SharedValue<number>] => {
+  const dynamicSnapPointIndex = useSharedValue<number>(-1);
+  const normalizedSnapPoints = useDerivedValue(() => {
+    // early exit, if container layout is not ready
+    const isContainerLayoutReady =
+      containerHeight.value !== INITIAL_CONTAINER_HEIGHT;
+    if (!isContainerLayoutReady) {
+      return [INITIAL_SNAP_POINT];
+    }
+
+    // extract snap points from provided props
+    const _snapPoints = snapPoints
+      ? 'value' in snapPoints
+        ? snapPoints.value
+        : snapPoints
+      : [];
+
+    // normalized all provided snap points, converting percentage
+    // values into absolute values.
+    let _normalizedSnapPoints = _snapPoints.map(snapPoint =>
+      normalizeSnapPoint(snapPoint, containerHeight.value)
+    ) as number[];
+
+    // return normalized snap points if dynamic sizing is not enabled
+    if (!enableDynamicSizing) {
+      return _normalizedSnapPoints;
+    }
+
+    // early exit, if handle height is not calculated yet.
+    if (handleHeight.value === INITIAL_HANDLE_HEIGHT) {
+      return [INITIAL_SNAP_POINT];
+    }
+
+    // early exit, if content height is not calculated yet.
+    if (contentHeight.value === INITIAL_CONTAINER_HEIGHT) {
+      return [INITIAL_SNAP_POINT];
+    }
+
+    // calculate a new snap point based on content height.
+    const dynamicSnapPoint =
+      containerHeight.value -
+      Math.min(
+        contentHeight.value + handleHeight.value,
+        maxDynamicContentSize !== undefined
+          ? maxDynamicContentSize
+          : containerHeight.value
       );
-    })
-  );
 
-  return normalizedSnapPoints;
+    // push dynamic snap point into the normalized snap points.
+    _normalizedSnapPoints.push(dynamicSnapPoint);
+
+    // sort all snap points.
+    _normalizedSnapPoints = _normalizedSnapPoints.sort((a, b) => b - a);
+
+    // locate the dynamic snap point index.
+    dynamicSnapPointIndex.value =
+      _normalizedSnapPoints.indexOf(dynamicSnapPoint);
+
+    return _normalizedSnapPoints;
+  }, [snapPoints]);
+
+  return [normalizedSnapPoints, dynamicSnapPointIndex];
 };
diff --git a/src/hooks/usePropsValidator.ts b/src/hooks/usePropsValidator.ts
index ce6c400fa..09c0b0028 100644
--- a/src/hooks/usePropsValidator.ts
+++ b/src/hooks/usePropsValidator.ts
@@ -11,14 +11,19 @@ import type { BottomSheetProps } from '../components/bottomSheet';
 export const usePropsValidator = ({
   index,
   snapPoints,
+  enableDynamicSizing,
   topInset,
   bottomInset,
 }: BottomSheetProps) => {
   useMemo(() => {
     //#region snap points
-    const _snapPoints = 'value' in snapPoints ? snapPoints.value : snapPoints;
+    const _snapPoints = snapPoints
+      ? 'value' in snapPoints
+        ? snapPoints.value
+        : snapPoints
+      : [];
     invariant(
-      _snapPoints,
+      _snapPoints || enableDynamicSizing,
       `'snapPoints' was not provided! please provide at least one snap point.`
     );
 
@@ -35,7 +40,7 @@ export const usePropsValidator = ({
     });
 
     invariant(
-      'value' in _snapPoints || _snapPoints.length > 0,
+      'value' in _snapPoints || _snapPoints.length > 0 || enableDynamicSizing,
       `'snapPoints' was provided with no points! please provide at least one snap point.`
     );
     //#endregion
@@ -47,9 +52,10 @@ export const usePropsValidator = ({
     );
 
     invariant(
-      typeof index === 'number'
-        ? index >= -1 && index <= _snapPoints.length - 1
-        : true,
+      enableDynamicSizing ||
+        (typeof index === 'number'
+          ? index >= -1 && index <= _snapPoints.length - 1
+          : true),
       `'index' was provided but out of the provided snap points range! expected value to be between -1, ${
         _snapPoints.length - 1
       }`
@@ -68,5 +74,5 @@ export const usePropsValidator = ({
     //#endregion
 
     // animations
-  }, [index, snapPoints, topInset, bottomInset]);
+  }, [index, snapPoints, topInset, bottomInset, enableDynamicSizing]);
 };
diff --git a/src/index.ts b/src/index.ts
index 68bb3abf6..169e69542 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,7 +12,6 @@ export { useBottomSheetSpringConfigs } from './hooks/useBottomSheetSpringConfigs
 export { useBottomSheetTimingConfigs } from './hooks/useBottomSheetTimingConfigs';
 export { useBottomSheetInternal } from './hooks/useBottomSheetInternal';
 export { useBottomSheetModalInternal } from './hooks/useBottomSheetModalInternal';
-export { useBottomSheetDynamicSnapPoints } from './hooks/useBottomSheetDynamicSnapPoints';
 export { useScrollEventsHandlersDefault } from './hooks/useScrollEventsHandlersDefault';
 export { useGestureEventsHandlersDefault } from './hooks/useGestureEventsHandlersDefault';
 export { useBottomSheetGestureHandlers } from './hooks/useBottomSheetGestureHandlers';
diff --git a/src/utilities/normalizeSnapPoint.ts b/src/utilities/normalizeSnapPoint.ts
index 406fcd1cc..46745dbf9 100644
--- a/src/utilities/normalizeSnapPoint.ts
+++ b/src/utilities/normalizeSnapPoint.ts
@@ -3,10 +3,7 @@
  */
 export const normalizeSnapPoint = (
   snapPoint: number | string,
-  containerHeight: number,
-  _topInset: number,
-  _bottomInset: number,
-  _$modal: boolean = false
+  containerHeight: number
 ) => {
   'worklet';
   let normalizedSnapPoint = snapPoint;