From 3edb2d1f9a9a8b1ba2e04803cd12306e4353199b Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Sun, 6 Jun 2021 17:03:19 +0100
Subject: [PATCH] feat: introduced more stable handling for dynamic snap points

---
 .../advanced/DynamicSnapPointExample.tsx      | 34 ++++-------
 .../screens/modal/DynamicSnapPointExample.tsx | 36 +++++-------
 src/components/bottomSheet/BottomSheet.tsx    | 44 +++++++++------
 src/components/bottomSheet/types.d.ts         |  6 +-
 src/components/bottomSheetDebugView/styles.ts |  2 +-
 .../BottomSheetHandleContainer.tsx            | 42 +++++++-------
 .../BottomSheetView.tsx}                      | 21 ++++---
 src/components/bottomSheetView/index.ts       |  1 +
 .../{view => bottomSheetView}/styles.ts       |  0
 .../{view => bottomSheetView}/types.d.ts      |  3 +-
 src/components/view/index.ts                  |  1 -
 src/contexts/internal.ts                      |  1 +
 src/hooks/index.ts                            |  1 +
 src/hooks/useBottomSheetDynamicSnapPoints.ts  | 56 +++++++++++++++++++
 src/hooks/useNormalizedSnapPoints.ts          |  5 +-
 src/hooks/usePropsValidator.ts                |  9 +--
 src/hooks/useScrollableInternal.ts            |  3 +
 src/index.ts                                  |  3 +-
 18 files changed, 166 insertions(+), 102 deletions(-)
 rename src/components/{view/View.tsx => bottomSheetView/BottomSheetView.tsx} (64%)
 create mode 100644 src/components/bottomSheetView/index.ts
 rename src/components/{view => bottomSheetView}/styles.ts (100%)
 rename src/components/{view => bottomSheetView}/types.d.ts (90%)
 delete mode 100644 src/components/view/index.ts
 create mode 100644 src/hooks/useBottomSheetDynamicSnapPoints.ts

diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
index 3104e5e0f..5ded9f776 100644
--- a/example/src/screens/advanced/DynamicSnapPointExample.tsx
+++ b/example/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -1,21 +1,22 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
+import BottomSheet, {
+  BottomSheetView,
+  useBottomSheetDynamicSnapPoints,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Button from '../../components/button';
 
 const DynamicSnapPointExample = () => {
   // state
   const [count, setCount] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
 
   // hooks
   const bottomSheetRef = useRef<BottomSheet>(null);
+  const { animatedHandleHeight, animatedSnapPoints, contentProps } =
+    useBottomSheetDynamicSnapPoints(['CONTENT_HEIGHT']);
   const { bottom: safeBottomArea } = useSafeAreaInsets();
 
-  // variables
-  const snapPoints = useMemo(() => [0, contentHeight], [contentHeight]);
-
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
     setCount(state => state + 1);
@@ -29,22 +30,12 @@ const DynamicSnapPointExample = () => {
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
-  const handleOnLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }) => {
-      setContentHeight(height);
-    },
-    []
-  );
 
   // styles
   const contentContainerStyle = useMemo(
     () => ({
       ...styles.contentContainerStyle,
-      paddingBottom: safeBottomArea,
+      paddingBottom: safeBottomArea || 6,
     }),
     [safeBottomArea]
   );
@@ -63,14 +54,12 @@ const DynamicSnapPointExample = () => {
       <Button label="Close" onPress={handleClosePress} />
       <BottomSheet
         ref={bottomSheetRef}
-        index={1}
-        snapPoints={snapPoints}
+        snapPoints={animatedSnapPoints}
+        handleHeight={animatedHandleHeight}
+        enablePanDownToClose={true}
         animateOnMount={true}
       >
-        <BottomSheetView
-          style={contentContainerStyle}
-          onLayout={handleOnLayout}
-        >
+        <BottomSheetView style={contentContainerStyle} {...contentProps}>
           <Text style={styles.message}>
             Could this sheet resize to its content height ?
           </Text>
@@ -92,6 +81,7 @@ const styles = StyleSheet.create({
   },
   contentContainerStyle: {
     paddingTop: 12,
+    paddingBottom: 6,
     paddingHorizontal: 24,
     backgroundColor: 'white',
   },
diff --git a/example/src/screens/modal/DynamicSnapPointExample.tsx b/example/src/screens/modal/DynamicSnapPointExample.tsx
index d393fcba9..c0a6d4dbe 100644
--- a/example/src/screens/modal/DynamicSnapPointExample.tsx
+++ b/example/src/screens/modal/DynamicSnapPointExample.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  useBottomSheetDynamicSnapPoints,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Button from '../../components/button';
 import withModalProvider from '../withModalProvider';
@@ -8,15 +12,13 @@ import withModalProvider from '../withModalProvider';
 const DynamicSnapPointExample = () => {
   // state
   const [count, setCount] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
 
   // hooks
   const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const { animatedHandleHeight, animatedSnapPoints, contentProps } =
+    useBottomSheetDynamicSnapPoints(['CONTENT_HEIGHT']);
   const { bottom: safeBottomArea } = useSafeAreaInsets();
 
-  // variables
-  const snapPoints = useMemo(() => [contentHeight], [contentHeight]);
-
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {
     setCount(state => state + 1);
@@ -31,22 +33,12 @@ const DynamicSnapPointExample = () => {
   const handleDismissPress = useCallback(() => {
     bottomSheetRef.current?.dismiss();
   }, []);
-  const handleOnLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }) => {
-      setContentHeight(height);
-    },
-    []
-  );
 
   // styles
   const contentContainerStyle = useMemo(
     () => ({
       ...styles.contentContainerStyle,
-      paddingBottom: safeBottomArea,
+      paddingBottom: safeBottomArea || 6,
     }),
     [safeBottomArea]
   );
@@ -63,11 +55,13 @@ const DynamicSnapPointExample = () => {
     <View style={styles.container}>
       <Button label="Present" onPress={handlePresentPress} />
       <Button label="Dismiss" onPress={handleDismissPress} />
-      <BottomSheetModal ref={bottomSheetRef} index={0} snapPoints={snapPoints}>
-        <BottomSheetView
-          style={contentContainerStyle}
-          onLayout={handleOnLayout}
-        >
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={animatedSnapPoints}
+        handleHeight={animatedHandleHeight}
+        enablePanDownToClose={true}
+      >
+        <BottomSheetView style={contentContainerStyle} {...contentProps}>
           <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 9f6cd55ef..66121f839 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -192,6 +192,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region conditional variables
+    const isContentHeightFixed = useSharedValue(false);
     const isLayoutCalculated = useDerivedValue(() => {
       let isContainerHeightCalculated = false;
       //container height was provided.
@@ -209,8 +210,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       let isHandleHeightCalculated = false;
       // handle height is provided.
       if (
-        _providedHandleHeight !== null ||
-        _providedHandleHeight !== undefined
+        _providedHandleHeight !== null &&
+        _providedHandleHeight !== undefined &&
+        typeof _providedHandleHeight === 'number'
       ) {
         isHandleHeightCalculated = true;
       }
@@ -422,7 +424,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       const adjustedSnapPoints = animatedSnapPoints.value.slice().reverse();
       const adjustedSnapPointsIndexes = animatedSnapPoints.value
         .slice()
-        .map((_, index) => index)
+        .map((_: any, index: number) => index)
         .reverse();
 
       /**
@@ -858,6 +860,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedContainerHeight,
         scrollableContentOffsetY,
         isInTemporaryPosition,
+        isContentHeightFixed,
         isScrollableRefreshable,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
@@ -890,6 +893,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedScrollableState,
         scrollableContentOffsetY,
         isScrollableRefreshable,
+        isContentHeightFixed,
         isInTemporaryPosition,
         enableContentPanningGesture,
         _providedSimultaneousHandlers,
@@ -934,9 +938,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       () => [_providedStyle, styles.container, containerAnimatedStyle],
       [_providedStyle, containerAnimatedStyle]
     );
-    const contentContainerAnimatedStyle = useAnimatedStyle(() => ({
-      height: animate(animatedContentHeight.value, _providedAnimationConfigs),
-    }));
+    const contentContainerAnimatedStyle = useAnimatedStyle(() =>
+      isContentHeightFixed.value
+        ? {}
+        : {
+            height: animate(
+              animatedContentHeight.value,
+              _providedAnimationConfigs
+            ),
+          }
+    );
     const contentContainerStyle = useMemo(
       () => [styles.contentContainer, contentContainerAnimatedStyle],
       [contentContainerAnimatedStyle]
@@ -992,6 +1003,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           nextPosition === INITIAL_POSITION ||
           nextPosition === animatedContainerHeight.value
         ) {
+          isAnimatedOnMount.value = true;
           return;
         }
 
@@ -1274,20 +1286,20 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               // topInset,
               // bottomInset,
               animatedSheetState,
-              animatedScrollableState,
-              isScrollableRefreshable,
-              scrollableContentOffsetY,
+              // animatedScrollableState,
+              // isScrollableRefreshable,
+              // scrollableContentOffsetY,
               // keyboardState,
               // animatedIndex,
               // animatedCurrentIndex,
-              // animatedPosition,
-              // animatedContainerHeight,
-              // animatedSheetHeight,
-              // animatedHandleHeight,
-              // animatedContentHeight,
+              animatedPosition,
+              animatedContainerHeight,
+              animatedSheetHeight,
+              animatedHandleHeight,
+              animatedContentHeight,
               // keyboardHeight,
-              // isLayoutCalculated,
-              isInTemporaryPosition,
+              isLayoutCalculated,
+              // isInTemporaryPosition,
             }}
           /> */}
         </BottomSheetContainer>
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 4d8795f3e..4fb3c6349 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -40,7 +40,9 @@ export interface BottomSheetProps
    * snapPoints={[-1, '%100']}
    * @type Array<string | number>
    */
-  snapPoints: Array<string | number>;
+  snapPoints:
+    | Array<string | number>
+    | Animated.SharedValue<Array<string | number>>;
   /**
    * Defines how violently sheet has to stopped while over dragging.
    * @type number
@@ -92,7 +94,7 @@ export interface BottomSheetProps
    * unless `handleHeight` is provided.
    * @type number
    */
-  handleHeight?: number;
+  handleHeight?: number | Animated.SharedValue<number>;
   /**
    * Container height helps to calculate the internal sheet layouts,
    * if `containerHeight` not provided, the library internally will calculate it,
diff --git a/src/components/bottomSheetDebugView/styles.ts b/src/components/bottomSheetDebugView/styles.ts
index 2bf315750..3ad37cbf6 100644
--- a/src/components/bottomSheetDebugView/styles.ts
+++ b/src/components/bottomSheetDebugView/styles.ts
@@ -4,7 +4,7 @@ export const styles = StyleSheet.create({
   container: {
     position: 'absolute',
     right: 4,
-    top: 0,
+    top: 50,
     padding: 2,
     backgroundColor: 'rgba(0, 0,0,0.75)',
   },
diff --git a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
index b417323b1..764177d23 100644
--- a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
+++ b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
@@ -6,7 +6,6 @@ import BottomSheetHandle from '../bottomSheetHandle';
 import { useBottomSheetInternal } from '../../hooks';
 import { print } from '../../utilities';
 import type { BottomSheetHandleContainerProps } from './types';
-import { INITIAL_HANDLE_HEIGHT } from '../bottomSheet/constants';
 
 function BottomSheetHandleContainerComponent({
   animatedIndex,
@@ -47,28 +46,25 @@ function BottomSheetHandleContainerComponent({
   //#endregion
 
   //#region callbacks
-  const getHandleContainerLayout = useMemo(
-    () =>
-      handleHeight.value === INITIAL_HANDLE_HEIGHT
-        ? function handleContainerLayout({
-            nativeEvent: {
-              layout: { height },
-            },
-          }: LayoutChangeEvent) {
-            if (height === handleHeight.value) {
-              return;
-            }
-            handleHeight.value = height;
+  const handleContainerLayout = useCallback(
+    function handleContainerLayout({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) {
+      if (height === handleHeight.value) {
+        return;
+      }
+      handleHeight.value = height;
 
-            print({
-              component: BottomSheetHandleContainer.displayName,
-              method: 'handleContainerLayout',
-              params: {
-                height,
-              },
-            });
-          }
-        : undefined,
+      print({
+        component: BottomSheetHandleContainer.displayName,
+        method: 'handleContainerLayout',
+        params: {
+          height,
+        },
+      });
+    },
     [handleHeight]
   );
   //#endregion
@@ -109,7 +105,7 @@ function BottomSheetHandleContainerComponent({
         accessibilityRole="adjustable"
         accessibilityLabel="Bottom Sheet handle"
         accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
-        onLayout={getHandleContainerLayout}
+        onLayout={handleContainerLayout}
       >
         {renderHandle()}
       </Animated.View>
diff --git a/src/components/view/View.tsx b/src/components/bottomSheetView/BottomSheetView.tsx
similarity index 64%
rename from src/components/view/View.tsx
rename to src/components/bottomSheetView/BottomSheetView.tsx
index 3e73c1e49..ae8d6b664 100644
--- a/src/components/view/View.tsx
+++ b/src/components/bottomSheetView/BottomSheetView.tsx
@@ -1,36 +1,39 @@
 import React, { memo, useMemo, useEffect, useCallback } from 'react';
-import { View as RNView } from 'react-native';
+import { View } from 'react-native';
 import { useBottomSheetInternal } from '../../hooks';
-import type { BottomSheetViewProps } from './types';
 import { styles } from './styles';
+import type { BottomSheetViewProps } from './types';
 
-const BottomSheetViewComponent = ({
+function BottomSheetViewComponent({
+  shouldMeasureLayout = false,
   style,
   focusHook: useFocusHook = useEffect,
   children,
   ...rest
-}: BottomSheetViewProps) => {
+}: BottomSheetViewProps) {
   // hooks
-  const { scrollableContentOffsetY } = useBottomSheetInternal();
+  const { scrollableContentOffsetY, isContentHeightFixed } =
+    useBottomSheetInternal();
 
   // styles
   const containerStyle = useMemo(() => [styles.container, style], [style]);
 
   // callback
   const handleSettingScrollable = useCallback(() => {
+    isContentHeightFixed.value = shouldMeasureLayout;
     scrollableContentOffsetY.value = 0;
-  }, [scrollableContentOffsetY]);
+  }, [isContentHeightFixed, scrollableContentOffsetY, shouldMeasureLayout]);
 
   // effects
   useFocusHook(handleSettingScrollable);
 
   //render
   return (
-    <RNView style={containerStyle} {...rest}>
+    <View style={containerStyle} {...rest}>
       {children}
-    </RNView>
+    </View>
   );
-};
+}
 
 const BottomSheetView = memo(BottomSheetViewComponent);
 BottomSheetView.displayName = 'BottomSheetView';
diff --git a/src/components/bottomSheetView/index.ts b/src/components/bottomSheetView/index.ts
new file mode 100644
index 000000000..0cbb27a09
--- /dev/null
+++ b/src/components/bottomSheetView/index.ts
@@ -0,0 +1 @@
+export { default } from './BottomSheetView';
diff --git a/src/components/view/styles.ts b/src/components/bottomSheetView/styles.ts
similarity index 100%
rename from src/components/view/styles.ts
rename to src/components/bottomSheetView/styles.ts
diff --git a/src/components/view/types.d.ts b/src/components/bottomSheetView/types.d.ts
similarity index 90%
rename from src/components/view/types.d.ts
rename to src/components/bottomSheetView/types.d.ts
index c04c487a5..fe780391d 100644
--- a/src/components/view/types.d.ts
+++ b/src/components/bottomSheetView/types.d.ts
@@ -2,6 +2,7 @@ import type { EffectCallback, DependencyList } from 'react';
 import type { ViewProps as RNViewProps } from 'react-native';
 
 export interface BottomSheetViewProps extends RNViewProps {
-  children: React.ReactNode[] | React.ReactNode;
+  shouldMeasureLayout?: boolean;
   focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
+  children: React.ReactNode[] | React.ReactNode;
 }
diff --git a/src/components/view/index.ts b/src/components/view/index.ts
deleted file mode 100644
index ddd85b0b3..000000000
--- a/src/components/view/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './View';
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index ffdb83331..4b68e988e 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -40,6 +40,7 @@ export interface BottomSheetInternalContextType
   animatedHandleHeight: Animated.SharedValue<number>;
   animatedKeyboardHeight: Animated.SharedValue<number>;
   isScrollableRefreshable: Animated.SharedValue<boolean>;
+  isContentHeightFixed: Animated.SharedValue<boolean>;
   scrollableContentOffsetY: Animated.SharedValue<number>;
   shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;
 
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 0eed25ab7..b03cdfd2f 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -14,3 +14,4 @@ export { useInteractivePanGestureHandler } from './useInteractivePanGestureHandl
 export { usePropsValidator } from './usePropsValidator';
 export { useNormalizedSnapPoints } from './useNormalizedSnapPoints';
 export { useReactiveSharedValue } from './useReactiveSharedValue';
+export { useBottomSheetDynamicSnapPoints } from './useBottomSheetDynamicSnapPoints';
diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts
new file mode 100644
index 000000000..fa155eb07
--- /dev/null
+++ b/src/hooks/useBottomSheetDynamicSnapPoints.ts
@@ -0,0 +1,56 @@
+import { useCallback, useMemo } from 'react';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+
+/**
+ * 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: to provided to `BottomSheet` or `BottomSheetModal`.
+ *  - animatedHandleHeight: an animated handle height callback node.
+ *  - contentProps: props to be spread at `BottomSheetView` component.
+ * }
+ */
+export const useBottomSheetDynamicSnapPoints = (
+  initialSnapPoints: Array<string | number>
+) => {
+  // variables
+  const animatedContentHeight = useSharedValue(0);
+  const animatedHandleHeight = useSharedValue(0);
+  const animatedSnapPoints = useDerivedValue(() => {
+    const contentWithHandleHeight =
+      animatedContentHeight.value + animatedHandleHeight.value;
+
+    return initialSnapPoints.map(snapPoint =>
+      snapPoint === 'CONTENT_HEIGHT' ? contentWithHandleHeight : snapPoint
+    );
+  });
+
+  // callbacks
+  const handleContentLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      animatedContentHeight.value = height;
+    },
+    [animatedContentHeight]
+  );
+
+  const contentProps = useMemo(
+    () => ({
+      onLayout: handleContentLayout,
+      shouldMeasureLayout: true,
+    }),
+    [handleContentLayout]
+  );
+
+  return {
+    animatedSnapPoints,
+    animatedHandleHeight,
+    contentProps,
+  };
+};
diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts
index 8c7d4343a..31d8ff226 100644
--- a/src/hooks/useNormalizedSnapPoints.ts
+++ b/src/hooks/useNormalizedSnapPoints.ts
@@ -24,7 +24,10 @@ export const useNormalizedSnapPoints = (
   $modal: boolean
 ) => {
   const normalizedSnapPoints = useDerivedValue(() =>
-    providedSnapPoints.map(snapPoint => {
+    ('value' in providedSnapPoints
+      ? providedSnapPoints.value
+      : providedSnapPoints
+    ).map(snapPoint => {
       if (containerHeight.value === INITIAL_CONTAINER_HEIGHT) {
         return INITIAL_SNAP_POINT;
       }
diff --git a/src/hooks/usePropsValidator.ts b/src/hooks/usePropsValidator.ts
index 7addbdbe7..ff0701f9b 100644
--- a/src/hooks/usePropsValidator.ts
+++ b/src/hooks/usePropsValidator.ts
@@ -8,14 +8,15 @@ export const usePropsValidator = ({
   topInset,
 }: BottomSheetProps) => {
   useMemo(() => {
+    const _snapPoints = 'value' in snapPoints ? snapPoints.value : snapPoints;
     // snap points
     invariant(
-      snapPoints,
+      _snapPoints,
       `'snapPoints' was not provided! please provide at least one snap point.`
     );
 
     invariant(
-      snapPoints.length > 0,
+      'value' in _snapPoints || _snapPoints.length > 0,
       `'snapPoints' was provided with no points! please provide at least one snap point.`
     );
 
@@ -27,10 +28,10 @@ export const usePropsValidator = ({
 
     invariant(
       typeof index === 'number'
-        ? index >= -1 && index <= snapPoints.length - 1
+        ? 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
+        _snapPoints.length - 1
       }`
     );
 
diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts
index fcd0eae73..ee089f090 100644
--- a/src/hooks/useScrollableInternal.ts
+++ b/src/hooks/useScrollableInternal.ts
@@ -33,6 +33,7 @@ export const useScrollableInternal = (refreshable: boolean) => {
     animatedAnimationState,
     scrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableRefreshable,
+    isContentHeightFixed,
     setScrollableRef,
     removeScrollableRef,
   } = useBottomSheetInternal();
@@ -122,6 +123,7 @@ export const useScrollableInternal = (refreshable: boolean) => {
     // set current content offset
     rootScrollableContentOffsetY.value = scrollableContentOffsetY.value;
     isScrollableRefreshable.value = refreshable;
+    isContentHeightFixed.value = false;
 
     // set current scrollable ref
     const id = findNodeHandle(scrollableRef.current);
@@ -141,6 +143,7 @@ export const useScrollableInternal = (refreshable: boolean) => {
   }, [
     refreshable,
     isScrollableRefreshable,
+    isContentHeightFixed,
     rootScrollableContentOffsetY,
     scrollableContentOffsetY,
     scrollableRef,
diff --git a/src/index.ts b/src/index.ts
index 99b7cd705..92dc7b66b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ export { useBottomSheetModal } from './hooks/useBottomSheetModal';
 export { useBottomSheetSpringConfigs } from './hooks/useBottomSheetSpringConfigs';
 export { useBottomSheetTimingConfigs } from './hooks/useBottomSheetTimingConfigs';
 export { useBottomSheetInternal } from './hooks/useBottomSheetInternal';
+export { useBottomSheetDynamicSnapPoints } from './hooks/useBottomSheetDynamicSnapPoints';
 //#endregion
 
 //#region components
@@ -22,7 +23,7 @@ export {
 } from './components/bottomSheetScrollable';
 export { default as BottomSheetHandle } from './components/bottomSheetHandle';
 export { default as BottomSheetDraggableView } from './components/bottomSheetDraggableView';
-export { default as BottomSheetView } from './components/view';
+export { default as BottomSheetView } from './components/bottomSheetView';
 export { default as BottomSheetTextInput } from './components/bottomSheetTextInput';
 export { default as BottomSheetBackdrop } from './components/bottomSheetBackdrop';
 export { default as BottomSheetFooter } from './components/bottomSheetFooter';