refactor: optimise snap points/detents state

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -48,7 +48,7 @@ function BottomSheetContentComponent({
     enableContentPanningGesture,
     animatedPosition,
     animatedLayoutState,
-    animatedHighestSnapPoint,
+    animatedDetentsState,
     animatedSheetHeight,
     animatedKeyboardState,
     isInTemporaryPosition,
@@ -140,8 +140,10 @@ function BottomSheetContentComponent({
       return 0;
     }
 
+    const { highestDetentPosition } = animatedDetentsState.get();
+
     const highestSnapPoint = Math.max(
-      animatedHighestSnapPoint.get(),
+      highestDetentPosition ?? 0,
       animatedPosition.get()
     );
     /**
@@ -172,7 +174,7 @@ function BottomSheetContentComponent({
     overDragResistanceFactor,
     animatedPosition,
     animatedLayoutState,
-    animatedHighestSnapPoint,
+    animatedDetentsState,
     animatedKeyboardState,
   ]);
   //#endregion

src/components/bottomSheet/BottomSheetContent.tsx

@@ -76,18 +76,18 @@ const ANIMATION_EASING: Animated.EasingFunction = Easing.out(Easing.exp);
 const ANIMATION_DURATION = 250;
 
 const ANIMATION_CONFIGS = Platform.select<WithTimingConfig | WithSpringConfig>({
-  ios: {
+  android: {
+    duration: ANIMATION_DURATION,
+    easing: ANIMATION_EASING,
+  },
+  default: {
     damping: 500,
     stiffness: 1000,
     mass: 3,
     overshootClamping: true,
     restDisplacementThreshold: 10,
     restSpeedThreshold: 10,
   },
-  default: {
-    duration: ANIMATION_DURATION,
-    easing: ANIMATION_EASING,
-  },
 });
 
 const SCROLLABLE_DECELERATION_RATE_MAPPER = {

src/constants.ts

@@ -14,6 +14,7 @@ import type {
 } from '../constants';
 import type {
   AnimationState,
+  DetentsState,
   KeyboardState,
   LayoutState,
   Scrollable,
@@ -35,6 +36,7 @@ export interface BottomSheetInternalContextType
       >
     > {
   // animated states
+  animatedDetentsState: SharedValue<DetentsState>;
   animatedAnimationState: SharedValue<AnimationState>;
   animatedSheetState: SharedValue<SHEET_STATE>;
   animatedKeyboardState: SharedValue<KeyboardState>;
@@ -47,12 +49,9 @@ export interface BottomSheetInternalContextType
   animatedScrollableStatus: SharedValue<SCROLLABLE_STATUS>;
 
   // animated values
-  animatedSnapPoints: SharedValue<number[]>;
   animatedPosition: SharedValue<number>;
   animatedIndex: SharedValue<number>;
   animatedSheetHeight: SharedValue<number>;
-  animatedHighestSnapPoint: SharedValue<number>;
-  animatedClosedPosition: SharedValue<number>;
   isInTemporaryPosition: SharedValue<boolean>;
 
   // methods

src/contexts/internal.ts

@@ -20,7 +20,7 @@ export { useAnimatedLayout } from './useAnimatedLayout';
 export { useAnimatedKeyboard } from './useAnimatedKeyboard';
 export { useStableCallback } from './useStableCallback';
 export { usePropsValidator } from './usePropsValidator';
-export { useAnimatedSnapPoints } from './useAnimatedSnapPoints';
+export { useAnimatedDetents } from './useAnimatedDetents';
 export { useReactiveSharedValue } from './useReactiveSharedValue';
 export {
   useBoundingClientRect,

src/hooks/index.ts

@@ -0,0 +1,118 @@
+import { type SharedValue, useDerivedValue } from 'react-native-reanimated';
+import type { BottomSheetProps } from '../components/bottomSheet';
+import { INITIAL_LAYOUT_VALUE } from '../constants';
+import type { DetentsState, LayoutState } from '../types';
+import { normalizeSnapPoint } from '../utilities';
+
+/**
+ * A custom hook that computes and returns the animated detent positions for a bottom sheet component.
+ *
+ * This hook normalizes the provided snap points (detents), optionally adds a dynamic detent based on content size,
+ * and calculates key positions such as the highest detent and the closed position. It supports both static and dynamic
+ * sizing, and adapts to modal and detached sheet modes.
+ *
+ * @param detents - The snap points for the bottom sheet, which can be an array or an object with a `value` property.
+ * @param layoutState - A shared animated value containing the current layout state (container, handle, and content heights).
+ * @param enableDynamicSizing - Whether dynamic sizing based on content height is enabled.
+ * @param maxDynamicContentSize - The maximum allowed content size for dynamic sizing.
+ * @param detached - Whether the bottom sheet is in detached mode.
+ * @param $modal - Whether the bottom sheet is presented as a modal.
+ * @param bottomInset - The bottom inset to apply when the sheet is modal or detached (default is 0).
+ */
+export const useAnimatedDetents = (
+  detents: BottomSheetProps['snapPoints'],
+  layoutState: SharedValue<LayoutState>,
+  enableDynamicSizing: BottomSheetProps['enableDynamicSizing'],
+  maxDynamicContentSize: BottomSheetProps['maxDynamicContentSize'],
+  detached: BottomSheetProps['detached'],
+  $modal: BottomSheetProps['$modal'],
+  bottomInset: BottomSheetProps['bottomInset'] = 0
+) => {
+  const state = useDerivedValue<DetentsState>(() => {
+    const { containerHeight, handleHeight, contentHeight } = layoutState.get();
+
+    // early exit, if container layout is not ready
+    if (containerHeight === INITIAL_LAYOUT_VALUE) {
+      return {};
+    }
+
+    // extract detents from provided props
+    const _detents = detents
+      ? 'value' in detents
+        ? detents.value
+        : detents
+      : [];
+
+    // normalized all provided detents, converting percentage
+    // values into absolute values.
+    let _normalizedDetents = _detents.map(snapPoint =>
+      normalizeSnapPoint(snapPoint, containerHeight)
+    ) as number[];
+
+    let highestDetentPosition =
+      _normalizedDetents[_normalizedDetents.length - 1];
+    let closedDetentPosition = containerHeight;
+    if ($modal || detached) {
+      closedDetentPosition = containerHeight + bottomInset;
+    }
+
+    if (!enableDynamicSizing) {
+      return {
+        detents: _normalizedDetents,
+        highestDetentPosition,
+        closedDetentPosition,
+      };
+    }
+
+    // early exit, if dynamic sizing is enabled and
+    // content height is not calculated yet.
+    if (contentHeight === INITIAL_LAYOUT_VALUE) {
+      return {};
+    }
+
+    // early exit, if handle height is not calculated yet.
+    if (handleHeight === INITIAL_LAYOUT_VALUE) {
+      return {};
+    }
+
+    // calculate a new detents based on content height.
+    const dynamicSnapPoint =
+      containerHeight -
+      Math.min(
+        contentHeight + handleHeight,
+        maxDynamicContentSize !== undefined
+          ? maxDynamicContentSize
+          : containerHeight
+      );
+
+    // push dynamic detent into the normalized detents,
+    // only if it does not exists in the provided list already.
+    if (!_normalizedDetents.includes(dynamicSnapPoint)) {
+      _normalizedDetents.push(dynamicSnapPoint);
+    }
+
+    // sort all detents.
+    _normalizedDetents = _normalizedDetents.sort((a, b) => b - a);
+
+    highestDetentPosition = _normalizedDetents[0];
+
+    // locate the dynamic detent index.
+    const dynamicDetentIndex = _normalizedDetents.indexOf(dynamicSnapPoint);
+
+    return {
+      detents: _normalizedDetents,
+      dynamicDetentIndex,
+      highestDetentPosition,
+      closedDetentPosition,
+    };
+  }, [
+    detents,
+    layoutState,
+    enableDynamicSizing,
+    maxDynamicContentSize,
+    detached,
+    $modal,
+    bottomInset,
+  ]);
+  return state;
+};