@mustmove/bottom-sheet 1.0.0

package/src/hooks/useAnimatedDetents.ts

@@ -0,0 +1,119 @@
+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);
+
+    // update the highest detent position.
+    highestDetentPosition = _normalizedDetents[_normalizedDetents.length - 1];
+
+    // 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;
+};

package/src/hooks/useAnimatedKeyboard.ts

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  Keyboard,
+  type KeyboardEvent,
+  type KeyboardEventEasing,
+  type KeyboardEventName,
+  Platform,
+} from 'react-native';
+import {
+  runOnUI,
+  useAnimatedReaction,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { KEYBOARD_STATUS, SCREEN_HEIGHT } from '../constants';
+import type { KeyboardState } from '../types';
+
+const KEYBOARD_EVENT_MAPPER = {
+  KEYBOARD_SHOW: Platform.select({
+    ios: 'keyboardWillShow',
+    android: 'keyboardDidShow',
+    default: '',
+  }) as KeyboardEventName,
+  KEYBOARD_HIDE: Platform.select({
+    ios: 'keyboardWillHide',
+    android: 'keyboardDidHide',
+    default: '',
+  }) as KeyboardEventName,
+};
+
+const INITIAL_STATE: KeyboardState = {
+  status: KEYBOARD_STATUS.UNDETERMINED,
+  height: 0,
+  heightWithinContainer: 0,
+  easing: 'keyboard',
+  duration: 500,
+};
+
+export const useAnimatedKeyboard = () => {
+  //#region variables
+  const textInputNodesRef = useRef(new Set<number>());
+  const state = useSharedValue(INITIAL_STATE);
+  const temporaryCachedState = useSharedValue<Omit<
+    KeyboardState,
+    'heightWithinContainer' | 'target'
+  > | null>(null);
+  //#endregion
+
+  //#region worklets
+  const handleKeyboardEvent = useCallback(
+    (
+      status: KEYBOARD_STATUS,
+      height: number,
+      duration: number,
+      easing: KeyboardEventEasing,
+      bottomOffset?: number
+    ) => {
+      'worklet';
+      const currentState = state.get();
+
+      /**
+       * if the keyboard event was fired before the `onFocus` on TextInput,
+       * then we cache the event, and wait till the `target` is been set
+       * to be updated then fire this function again.
+       */
+      if (status === KEYBOARD_STATUS.SHOWN && !currentState.target) {
+        temporaryCachedState.set({
+          status,
+          height,
+          duration,
+          easing,
+        });
+        return;
+      }
+
+      /**
+       * clear temporary cached state.
+       */
+      temporaryCachedState.set(null);
+
+      /**
+       * if keyboard status is hidden, then we keep old height.
+       */
+      let adjustedHeight =
+        status === KEYBOARD_STATUS.SHOWN ? height : currentState.height;
+
+      /**
+       * if keyboard had an bottom offset -android bottom bar-, then
+       * we add that offset to the keyboard height.
+       */
+      if (bottomOffset) {
+        adjustedHeight = adjustedHeight + bottomOffset;
+      }
+
+      state.set(state => ({
+        status,
+        easing,
+        duration,
+        height: adjustedHeight,
+        target: state.target,
+        heightWithinContainer: state.heightWithinContainer,
+      }));
+    },
+    [state, temporaryCachedState]
+  );
+  //#endregion
+
+  //#region effects
+  useEffect(() => {
+    const handleOnKeyboardShow = (event: KeyboardEvent) => {
+      runOnUI(handleKeyboardEvent)(
+        KEYBOARD_STATUS.SHOWN,
+        event.endCoordinates.height,
+        event.duration,
+        event.easing,
+        SCREEN_HEIGHT -
+          event.endCoordinates.height -
+          event.endCoordinates.screenY
+      );
+    };
+    const handleOnKeyboardHide = (event: KeyboardEvent) => {
+      runOnUI(handleKeyboardEvent)(
+        KEYBOARD_STATUS.HIDDEN,
+        event.endCoordinates.height,
+        event.duration,
+        event.easing
+      );
+    };
+
+    const showSubscription = Keyboard.addListener(
+      KEYBOARD_EVENT_MAPPER.KEYBOARD_SHOW,
+      handleOnKeyboardShow
+    );
+
+    const hideSubscription = Keyboard.addListener(
+      KEYBOARD_EVENT_MAPPER.KEYBOARD_HIDE,
+      handleOnKeyboardHide
+    );
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [handleKeyboardEvent]);
+
+  /**
+   * This reaction is needed to handle the issue with multiline text input.
+   *
+   * @link https://github.com/gorhom/react-native-bottom-sheet/issues/411
+   */
+  useAnimatedReaction(
+    () => state.value.target,
+    (result, previous) => {
+      if (!result || result === previous) {
+        return;
+      }
+
+      const cachedState = temporaryCachedState.get();
+      if (!cachedState) {
+        return;
+      }
+
+      handleKeyboardEvent(
+        cachedState.status,
+        cachedState.height,
+        cachedState.duration,
+        cachedState.easing
+      );
+    },
+    [temporaryCachedState, handleKeyboardEvent]
+  );
+  //#endregion
+
+  return { state, textInputNodesRef };
+};

package/src/hooks/useAnimatedLayout.ts

@@ -0,0 +1,109 @@
+import { useMemo, useState } from 'react';
+import {
+  type SharedValue,
+  makeMutable,
+  useAnimatedReaction,
+} from 'react-native-reanimated';
+import { INITIAL_CONTAINER_LAYOUT, INITIAL_LAYOUT_VALUE } from '../constants';
+import type { ContainerLayoutState, LayoutState } from '../types';
+
+const INITIAL_STATE: LayoutState = {
+  rawContainerHeight: INITIAL_LAYOUT_VALUE,
+  containerHeight: INITIAL_LAYOUT_VALUE,
+  containerOffset: INITIAL_CONTAINER_LAYOUT.offset,
+  handleHeight: INITIAL_LAYOUT_VALUE,
+  footerHeight: INITIAL_LAYOUT_VALUE,
+  contentHeight: INITIAL_LAYOUT_VALUE,
+};
+
+/**
+ * A custom hook that manages and animates the layout state of a container,
+ * typically used in bottom sheet components. It calculates the effective
+ * container height by considering top and bottom insets, and updates the
+ * animated state in response to layout changes. The hook supports both modal
+ * and non-modal modes, and ensures the container's animated layout state
+ * remains in sync with the actual layout measurements.
+ *
+ * @param containerLayoutState - A shared value representing the current container layout state.
+ * @param topInset - The top inset value to be subtracted from the container height.
+ * @param bottomInset - The bottom inset value to be subtracted from the container height.
+ * @param modal - Optional flag indicating if the layout is in modal mode.
+ * @param shouldOverrideHandleHeight - Optional flag to override the handle height in the layout state, only when handle is set to null.
+ * @returns An object containing the animated layout state.
+ */
+export function useAnimatedLayout(
+  containerLayoutState: SharedValue<ContainerLayoutState> | undefined,
+  topInset: number,
+  bottomInset: number,
+  modal?: boolean,
+  shouldOverrideHandleHeight?: boolean
+) {
+  //#region  variables
+  const verticalInset = useMemo(
+    () => topInset + bottomInset,
+    [topInset, bottomInset]
+  );
+  const initialState = useMemo(() => {
+    const _state = { ...INITIAL_STATE };
+
+    if (containerLayoutState) {
+      const containerLayout = containerLayoutState.get();
+      _state.containerHeight = modal
+        ? containerLayout.height - verticalInset
+        : containerLayout.height;
+      _state.containerOffset = containerLayout.offset;
+    }
+
+    if (shouldOverrideHandleHeight) {
+      _state.handleHeight = 0;
+    }
+
+    return _state;
+  }, [containerLayoutState, modal, shouldOverrideHandleHeight, verticalInset]);
+  //#endregion
+
+  //#region state
+  const [state] = useState(() => makeMutable(initialState));
+  //#endregion
+
+  //#region effects
+  useAnimatedReaction(
+    () => state.value.rawContainerHeight,
+    (result, previous) => {
+      if (result === previous) {
+        return;
+      }
+      if (result === INITIAL_LAYOUT_VALUE) {
+        return;
+      }
+
+      state.modify(_state => {
+        'worklet';
+        _state.containerHeight = modal ? result - verticalInset : result;
+        return _state;
+      });
+    },
+    [state, verticalInset, modal]
+  );
+  useAnimatedReaction(
+    () => containerLayoutState?.get().height,
+    (result, previous) => {
+      if (!result || result === previous) {
+        return;
+      }
+      if (result === INITIAL_LAYOUT_VALUE) {
+        return;
+      }
+
+      state.modify(_state => {
+        'worklet';
+        _state.containerHeight = modal ? result - verticalInset : result;
+        return _state;
+      });
+    },
+    [state, verticalInset, modal]
+  );
+  //#endregion
+
+  return state;
+}

package/src/hooks/useBottomSheet.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { BottomSheetContext } from '../contexts/external';
+
+export const useBottomSheet = () => {
+  const context = useContext(BottomSheetContext);
+
+  if (context === null) {
+    throw "'useBottomSheet' cannot be used out of the BottomSheet!";
+  }
+
+  return context;
+};

package/src/hooks/useBottomSheetContentContainerStyle.ts

@@ -0,0 +1,88 @@
+import { useMemo, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { useBottomSheetInternal } from './useBottomSheetInternal';
+
+export function useBottomSheetContentContainerStyle(
+  enableFooterMarginAdjustment: boolean,
+  _style?: ViewProps['style']
+) {
+  const [footerHeight, setFooterHeight] = useState(0);
+  //#region hooks
+  const { animatedLayoutState } = useBottomSheetInternal();
+  //#endregion
+
+  //#region styles
+  const flattenStyle = useMemo<ViewStyle>(() => {
+    return !_style
+      ? {}
+      : Array.isArray(_style)
+        ? // @ts-ignore
+          (StyleSheet.compose(..._style) as ViewStyle)
+        : (_style as ViewStyle);
+  }, [_style]);
+  const style = useMemo<ViewProps['style']>(() => {
+    if (!enableFooterMarginAdjustment) {
+      return flattenStyle;
+    }
+
+    let currentBottomPadding = 0;
+    if (flattenStyle && typeof flattenStyle === 'object') {
+      const { paddingBottom, padding, paddingVertical } = flattenStyle;
+      if (paddingBottom !== undefined && typeof paddingBottom === 'number') {
+        currentBottomPadding = paddingBottom;
+      } else if (
+        paddingVertical !== undefined &&
+        typeof paddingVertical === 'number'
+      ) {
+        currentBottomPadding = paddingVertical;
+      } else if (padding !== undefined && typeof padding === 'number') {
+        currentBottomPadding = padding;
+      }
+    }
+
+    return [
+      flattenStyle,
+      {
+        paddingBottom: currentBottomPadding + footerHeight,
+        overflow: 'visible',
+      },
+    ];
+  }, [footerHeight, enableFooterMarginAdjustment, flattenStyle]);
+  //#endregion
+
+  //#region effects
+  useAnimatedReaction(
+    () => animatedLayoutState.get().footerHeight,
+    (result, previousFooterHeight) => {
+      if (!enableFooterMarginAdjustment) {
+        return;
+      }
+      runOnJS(setFooterHeight)(result);
+
+      if (Platform.OS === 'web') {
+        /**
+         * a reaction that will append the footer height to the content
+         * height if margin adjustment is true.
+         *
+         * This is needed due to the web layout the footer after the content.
+         */
+        if (result && !previousFooterHeight) {
+          animatedLayoutState.modify(state => {
+            'worklet';
+            state.contentHeight = state.contentHeight + result;
+            return state;
+          });
+        }
+      }
+    },
+    [animatedLayoutState, enableFooterMarginAdjustment]
+  );
+  //#endregion
+  return style;
+}

package/src/hooks/useBottomSheetGestureHandlers.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { BottomSheetGestureHandlersContext } from '../contexts/gesture';
+
+export const useBottomSheetGestureHandlers = () => {
+  const context = useContext(BottomSheetGestureHandlersContext);
+
+  if (context === null) {
+    throw "'useBottomSheetGestureHandlers' cannot be used out of the BottomSheet!";
+  }
+
+  return context;
+};

package/src/hooks/useBottomSheetInternal.ts

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+import {
+  BottomSheetInternalContext,
+  type BottomSheetInternalContextType,
+} from '../contexts/internal';
+
+export function useBottomSheetInternal(
+  unsafe?: false
+): BottomSheetInternalContextType;
+
+export function useBottomSheetInternal(
+  unsafe: true
+): BottomSheetInternalContextType | null;
+
+export function useBottomSheetInternal(
+  unsafe?: boolean
+): BottomSheetInternalContextType | null {
+  const context = useContext(BottomSheetInternalContext);
+
+  if (unsafe !== true && context === null) {
+    throw "'useBottomSheetInternal' cannot be used out of the BottomSheet!";
+  }
+
+  return context;
+}

package/src/hooks/useBottomSheetModal.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { BottomSheetModalContext } from '../contexts';
+
+export const useBottomSheetModal = () => {
+  const context = useContext(BottomSheetModalContext);
+
+  if (context === null) {
+    throw "'BottomSheetModalContext' cannot be null!";
+  }
+
+  return context;
+};

package/src/hooks/useBottomSheetModalInternal.ts

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+import {
+  BottomSheetModalInternalContext,
+  type BottomSheetModalInternalContextType,
+} from '../contexts';
+
+export function useBottomSheetModalInternal(
+  unsafe?: false
+): BottomSheetModalInternalContextType;
+
+export function useBottomSheetModalInternal(
+  unsafe: true
+): BottomSheetModalInternalContextType | null;
+
+export function useBottomSheetModalInternal(
+  unsafe?: boolean
+): BottomSheetModalInternalContextType | null {
+  const context = useContext(BottomSheetModalInternalContext);
+
+  if (unsafe !== true && context === null) {
+    throw "'BottomSheetModalInternalContext' cannot be null!";
+  }
+
+  return context;
+}

package/src/hooks/useBottomSheetScrollableCreator.tsx

@@ -0,0 +1,60 @@
+import { type ReactElement, useCallback } from 'react';
+import {
+  type BottomSheetScrollableProps,
+  BottomSheetScrollView,
+} from '../components/bottomSheetScrollable';
+
+type BottomSheetScrollableCreatorConfigs = {} & BottomSheetScrollableProps;
+
+/**
+ * A custom hook that creates a scrollable component for third-party libraries
+ * like `LegendList` or `FlashList` to integrate the interaction and scrolling
+ * behaviors with th BottomSheet component.
+ *
+ * @param configs - Configuration options for the scrollable creator.
+ * @param configs.focusHook - This needed when bottom sheet used with multiple scrollables to allow bottom sheet
+ * detect the current scrollable ref, especially when used with `React Navigation`.
+ * You will need to provide `useFocusEffect` from `@react-navigation/native`.
+ * @param configs.scrollEventsHandlersHook - Custom hook to provide scroll events handler, which will allow advance and
+ * customize handling for scrollables.
+ * @param configs.enableFooterMarginAdjustment - Adjust the scrollable bottom margin to avoid the animated footer.
+ *
+ * @example
+ * ```tsx
+ * const BottomSheetLegendListScrollable = useBottomSheetScrollableCreator();
+ *
+ * // Usage in JSX
+ * <LegendList
+ *  renderScrollComponent={BottomSheetLegendListScrollable}
+ * />
+ * ```
+ */
+// biome-ignore lint/suspicious/noExplicitAny: out of my control
+export function useBottomSheetScrollableCreator<T = any>({
+  focusHook,
+  scrollEventsHandlersHook,
+  enableFooterMarginAdjustment,
+}: BottomSheetScrollableCreatorConfigs = {}): (
+  props: T,
+  ref?: never
+) => ReactElement<T> {
+  return useCallback(
+    function useBottomSheetScrollableCreator(
+      // @ts-expect-error
+      { data: _, ...props }: T,
+      ref?: never
+    ): ReactElement<T> {
+      return (
+        // @ts-expect-error
+        <BottomSheetScrollView
+          ref={ref}
+          {...props}
+          focusHook={focusHook}
+          scrollEventsHandlersHook={scrollEventsHandlersHook}
+          enableFooterMarginAdjustment={enableFooterMarginAdjustment}
+        />
+      );
+    },
+    [focusHook, scrollEventsHandlersHook, enableFooterMarginAdjustment]
+  );
+}

package/src/hooks/useBottomSheetSpringConfigs.ts

@@ -0,0 +1,11 @@
+import type { WithSpringConfig } from 'react-native-reanimated';
+
+/**
+ * Generate spring animation configs.
+ * @param configs overridable configs.
+ */
+export const useBottomSheetSpringConfigs = (
+  configs: Omit<WithSpringConfig, 'velocity'>
+) => {
+  return configs;
+};

package/src/hooks/useBottomSheetTimingConfigs.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import type { EasingFunction } from 'react-native';
+import type {
+  EasingFunctionFactory,
+  ReduceMotion,
+} from 'react-native-reanimated';
+import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
+
+/**
+ * this is needed to avoid TS4023
+ * https://github.com/microsoft/TypeScript/issues/5711
+ */
+interface TimingConfig {
+  duration?: number;
+  easing?: EasingFunction | EasingFunctionFactory;
+  reduceMotion?: ReduceMotion;
+}
+
+/**
+ * Generate timing animation configs.
+ * @default
+ * - easing: Easing.out(Easing.exp)
+ * - duration: 250
+ * @param configs overridable configs.
+ */
+export const useBottomSheetTimingConfigs = (configs: TimingConfig) => {
+  return useMemo(() => {
+    const _configs: TimingConfig = {
+      easing: configs.easing || ANIMATION_EASING,
+      duration: configs.duration || ANIMATION_DURATION,
+      reduceMotion: configs.reduceMotion,
+    };
+
+    return _configs;
+  }, [configs.duration, configs.easing, configs.reduceMotion]);
+};