@mustmove/bottom-sheet 1.0.0

package/src/index.ts

@@ -0,0 +1,79 @@
+// bottom sheet
+export { default } from './components/bottomSheet';
+
+// bottom sheet modal
+export { default as BottomSheetModal } from './components/bottomSheetModal';
+export { default as BottomSheetModalProvider } from './components/bottomSheetModalProvider';
+
+//#region hooks
+export { useBottomSheet } from './hooks/useBottomSheet';
+export { useBottomSheetModal } from './hooks/useBottomSheetModal';
+export { useBottomSheetSpringConfigs } from './hooks/useBottomSheetSpringConfigs';
+export { useBottomSheetTimingConfigs } from './hooks/useBottomSheetTimingConfigs';
+export { useBottomSheetInternal } from './hooks/useBottomSheetInternal';
+export { useBottomSheetModalInternal } from './hooks/useBottomSheetModalInternal';
+export { useScrollEventsHandlersDefault } from './hooks/useScrollEventsHandlersDefault';
+export { useGestureEventsHandlersDefault } from './hooks/useGestureEventsHandlersDefault';
+export { useBottomSheetGestureHandlers } from './hooks/useBottomSheetGestureHandlers';
+export { useScrollHandler } from './hooks/useScrollHandler';
+export { useScrollableSetter } from './hooks/useScrollableSetter';
+export { useBottomSheetScrollableCreator } from './hooks/useBottomSheetScrollableCreator';
+//#endregion
+
+//#region components
+export {
+  BottomSheetScrollView,
+  BottomSheetSectionList,
+  BottomSheetFlatList,
+  BottomSheetVirtualizedList,
+  BottomSheetFlashList,
+} from './components/bottomSheetScrollable';
+export { BottomSheetHandle } from './components/bottomSheetHandle';
+export { default as BottomSheetDraggableView } from './components/bottomSheetDraggableView';
+export { default as BottomSheetView } from './components/bottomSheetView';
+export { default as BottomSheetTextInput } from './components/bottomSheetTextInput';
+export { BottomSheetBackdrop } from './components/bottomSheetBackdrop';
+export {
+  BottomSheetFooter,
+  BottomSheetFooterContainer,
+} from './components/bottomSheetFooter';
+
+// touchables
+import BottomSheetTouchable from './components/touchables';
+export const {
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} = BottomSheetTouchable;
+// utils
+export { createBottomSheetScrollableComponent } from './components/bottomSheetScrollable';
+//#endregion
+
+//#region types
+export type { BottomSheetProps } from './components/bottomSheet';
+export type { BottomSheetModalProps } from './components/bottomSheetModal';
+export type { BottomSheetHandleProps } from './components/bottomSheetHandle';
+export type { BottomSheetBackgroundProps } from './components/bottomSheetBackground';
+export type { BottomSheetBackdropProps } from './components/bottomSheetBackdrop';
+export type { BottomSheetFooterProps } from './components/bottomSheetFooter';
+
+export type {
+  BottomSheetFlatListMethods,
+  BottomSheetScrollViewMethods,
+  BottomSheetSectionListMethods,
+  BottomSheetVirtualizedListMethods,
+  BottomSheetScrollableProps,
+} from './components/bottomSheetScrollable';
+
+export type {
+  ScrollEventsHandlersHookType,
+  GestureEventsHandlersHookType,
+  ScrollEventHandlerCallbackType,
+  GestureEventHandlerCallbackType,
+} from './types';
+//#endregion
+
+//#region utilities
+export * from './constants';
+export { enableLogging } from './utilities/logger';
+//#endregion

package/src/types.d.ts

@@ -0,0 +1,336 @@
+import type React from 'react';
+import type {
+  AccessibilityProps,
+  FlatList,
+  Insets,
+  KeyboardEventEasing,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  SectionList,
+} from 'react-native';
+import type {
+  GestureEventPayload,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureChangeEventPayload,
+  PanGestureHandlerEventPayload,
+  State,
+} from 'react-native-gesture-handler';
+import type {
+  EasingFunction,
+  EasingFunctionFactory,
+  ReduceMotion,
+  SharedValue,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  ANIMATION_SOURCE,
+  ANIMATION_STATUS,
+  GESTURE_SOURCE,
+  KEYBOARD_STATUS,
+  SCROLLABLE_STATUS,
+  SCROLLABLE_TYPE,
+} from './constants';
+
+//#region Methods
+export interface BottomSheetMethods {
+  /**
+   * Snap to one of the provided points from `snapPoints`.
+   * @param index snap point index.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  snapToIndex: (
+    index: number,
+    animationConfigs?: WithSpringConfig | WithTimingConfig
+  ) => void;
+  /**
+   * Snap to a position out of provided  `snapPoints`.
+   * @param position position in pixel or percentage.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  snapToPosition: (
+    position: number | string,
+    animationConfigs?: WithSpringConfig | WithTimingConfig
+  ) => void;
+  /**
+   * Snap to the maximum provided point from `snapPoints`.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  expand: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
+  /**
+   * Snap to the minimum provided point from `snapPoints`.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  collapse: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
+  /**
+   * Close the bottom sheet.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  close: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
+  /**
+   * Force close the bottom sheet, this prevent any interruptions till the sheet is closed.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  forceClose: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: Using 'any' allows users to define their own strict types for 'data' property.
+export interface BottomSheetModalMethods<T = any> extends BottomSheetMethods {
+  /**
+   * Mount and present the bottom sheet modal to the initial snap point.
+   * @param data to be passed to the modal.
+   */
+  present: (data?: T) => void;
+  /**
+   * Close and unmount the bottom sheet modal.
+   * @param animationConfigs snap animation configs.
+   *
+   * @see {WithSpringConfig}
+   * @see {WithTimingConfig}
+   */
+  dismiss: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
+}
+//#endregion
+
+export interface BottomSheetVariables {
+  /**
+   * Current sheet position index.
+   * @type SharedValue<number>
+   */
+  animatedIndex: SharedValue<number>;
+  /**
+   * Current sheet position.
+   * @type SharedValue<number>
+   */
+  animatedPosition: SharedValue<number>;
+}
+
+//#region scrollable
+export type ScrollableState = {
+  type: SCROLLABLE_TYPE;
+  contentOffsetY: number;
+  refreshable: boolean;
+};
+export type Scrollable = FlatList | ScrollView | SectionList;
+export type ScrollableRef = {
+  id: number;
+  node: React.RefObject<Scrollable>;
+};
+export type ScrollableEvent = (
+  event: Pick<NativeSyntheticEvent<NativeScrollEvent>, 'nativeEvent'>
+) => void;
+//#endregion
+
+//#region utils
+export interface TimingConfig {
+  duration?: number;
+  reduceMotion?: ReduceMotion;
+  easing?: EasingFunction | EasingFunctionFactory;
+}
+
+export type SpringConfig = {
+  stiffness?: number;
+  overshootClamping?: boolean;
+  restDisplacementThreshold?: number;
+  restSpeedThreshold?: number;
+  velocity?: number;
+  reduceMotion?: ReduceMotion;
+} & (
+  | {
+      mass?: number;
+      damping?: number;
+      duration?: never;
+      dampingRatio?: never;
+      clamp?: never;
+    }
+  | {
+      mass?: never;
+      damping?: never;
+      duration?: number;
+      dampingRatio?: number;
+      clamp?: { min?: number; max?: number };
+    }
+);
+
+export type Primitive = string | number | boolean;
+//#endregion
+
+//#region hooks
+export type GestureEventPayloadType = GestureEventPayload &
+  PanGestureHandlerEventPayload;
+
+export type GestureEventContextType = {
+  didStart?: boolean;
+};
+
+export type GestureEventHandlerCallbackType = (
+  source: GESTURE_SOURCE,
+  payload: GestureEventPayloadType
+) => void;
+
+export type GestureEventsHandlersHookType = () => {
+  handleOnStart: GestureEventHandlerCallbackType;
+  handleOnChange: GestureEventHandlerCallbackType;
+  handleOnEnd: GestureEventHandlerCallbackType;
+  handleOnFinalize: GestureEventHandlerCallbackType;
+};
+
+export type GestureHandlersHookType = (
+  source: GESTURE_SOURCE,
+  state: SharedValue<State>,
+  gestureSource: SharedValue<GESTURE_SOURCE>,
+  onStart: GestureEventHandlerCallbackType,
+  onChange: GestureEventHandlerCallbackType,
+  onEnd: GestureEventHandlerCallbackType,
+  onFinalize: GestureEventHandlerCallbackType
+) => {
+  handleOnStart: (
+    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  handleOnChange: (
+    event: GestureUpdateEvent<
+      PanGestureHandlerEventPayload & PanGestureChangeEventPayload
+    >
+  ) => void;
+  handleOnEnd: (
+    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  handleOnFinalize: (
+    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+};
+
+type ScrollEventHandlerCallbackType<C = never> = (
+  payload: NativeScrollEvent,
+  context: C
+) => void;
+
+export type ScrollEventsHandlersHookType = (
+  ref: React.RefObject<Scrollable>,
+  contentOffsetY: SharedValue<number>
+) => {
+  handleOnScroll?: ScrollEventHandlerCallbackType;
+  handleOnBeginDrag?: ScrollEventHandlerCallbackType;
+  handleOnEndDrag?: ScrollEventHandlerCallbackType;
+  handleOnMomentumBegin?: ScrollEventHandlerCallbackType;
+  handleOnMomentumEnd?: ScrollEventHandlerCallbackType;
+};
+//#endregion
+
+//#region accessibility
+export interface NullableAccessibilityProps extends AccessibilityProps {
+  accessible?: AccessibilityProps['accessible'] | null;
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel'] | null;
+  accessibilityHint?: AccessibilityProps['accessibilityHint'] | null;
+  accessibilityRole?: AccessibilityProps['accessibilityRole'] | null;
+}
+//#endregion
+
+//#region states
+export type KeyboardState = {
+  target?: number;
+  status: KEYBOARD_STATUS;
+  height: number;
+  heightWithinContainer: number;
+  easing: KeyboardEventEasing;
+  duration: number;
+};
+
+/**
+ * Represents the state of an animation, including its current status and the source that triggered it.
+ */
+export type AnimationState = {
+  /**
+   * The current status of the animation, this can be one of the values defined in the `ANIMATION_STATUS` enum, such as 'idle', 'running', 'completed', etc.
+   */
+  status: ANIMATION_STATUS;
+  /**
+   * The source of the animation which indicates where the animation was initiated from, such as user interaction, system event, or programmatic trigger.
+   * It is represented by the `ANIMATION_SOURCE` enum, which includes values like 'user', 'system', etc.
+   */
+  source: ANIMATION_SOURCE;
+  /**
+   * The index of the next snap point that the animation is targeting.
+   */
+  nextIndex?: number;
+  /**
+   * The next position in pixels that the animation is targeting.
+   */
+  nextPosition?: number;
+  /**
+   * Indicates whether the animation is forced closing to prevent any interruptions.
+   */
+  isForcedClosing?: boolean;
+};
+
+/**
+ * Represents the layout state of the bottom sheet container.
+ */
+export type ContainerLayoutState = {
+  /**
+   * The height of the container in pixels.
+   */
+  height: number;
+  /**
+   * The required insets applied to the container, such as padding or safe area.
+   */
+  offset: Required<Insets>;
+};
+
+/**
+ * Represents the layout state of the bottom sheet components.
+ */
+export type LayoutState = {
+  /**
+   * The original height of the container before any adjustments.
+   */
+  rawContainerHeight: number;
+  /**
+   * The adjusted height of the container after applying insets or other modifications.
+   */
+  containerHeight: number;
+  /**
+   * The required insets applied to the container, such as padding or safe area.
+   */
+  containerOffset: Required<Insets>;
+  /**
+   * The height of the handle element used to drag the bottom sheet.
+   */
+  handleHeight: number;
+  /**
+   * The height of the footer section within the bottom sheet.
+   */
+  footerHeight: number;
+  /**
+   * The total height of the content inside the bottom sheet.
+   */
+  contentHeight: number;
+};
+
+export type DetentsState = {
+  detents?: number[];
+  dynamicDetentIndex?: number;
+  highestDetentPosition?: number;
+  closedDetentPosition?: number;
+};
+//#endregion

package/src/utilities/animate.ts

@@ -0,0 +1,56 @@
+import {
+  type AnimationCallback,
+  type ReduceMotion,
+  type WithSpringConfig,
+  type WithTimingConfig,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
+
+interface AnimateParams {
+  point: number;
+  velocity?: number;
+  configs?: WithSpringConfig | WithTimingConfig;
+  overrideReduceMotion?: ReduceMotion;
+  onComplete?: AnimationCallback;
+}
+
+export const animate = ({
+  point,
+  configs,
+  velocity = 0,
+  overrideReduceMotion,
+  onComplete,
+}: AnimateParams) => {
+  'worklet';
+
+  if (!configs) {
+    configs = ANIMATION_CONFIGS;
+  }
+
+  // Users might have an accessibility setting to reduce motion turned on.
+  // This prevents the animation from running when presenting the sheet, which results in
+  // the bottom sheet not even appearing so we need to override it to ensure the animation runs.
+  // configs.reduceMotion = ReduceMotion.Never;
+
+  if (overrideReduceMotion) {
+    configs.reduceMotion = overrideReduceMotion;
+  }
+
+  // detect animation type
+  const type =
+    'duration' in configs || 'easing' in configs
+      ? ANIMATION_METHOD.TIMING
+      : ANIMATION_METHOD.SPRING;
+
+  if (type === ANIMATION_METHOD.TIMING) {
+    return withTiming(point, configs as WithTimingConfig, onComplete);
+  }
+
+  return withSpring(
+    point,
+    Object.assign({ velocity }, configs) as WithSpringConfig,
+    onComplete
+  );
+};

package/src/utilities/clamp.ts

@@ -0,0 +1,8 @@
+export const clamp = (
+  value: number,
+  lowerBound: number,
+  upperBound: number
+) => {
+  'worklet';
+  return Math.min(Math.max(lowerBound, value), upperBound);
+};

package/src/utilities/easingExp.ts

@@ -0,0 +1,10 @@
+/**
+ * A modified version of the default AnimatedEasing.exp,
+ * to insure its value never goes below `0`.
+ * @see https://github.com/software-mansion/react-native-reanimated/issues/1610
+ * @param t number
+ */
+export const exp = (t: number) => {
+  'worklet';
+  return Math.min(Math.max(0, Math.pow(2, 10 * (t - 1))), 1);
+};

package/src/utilities/findNodeHandle.ts

@@ -0,0 +1 @@
+export { findNodeHandle } from 'react-native';

package/src/utilities/findNodeHandle.web.ts

@@ -0,0 +1,33 @@
+import {
+  type NodeHandle,
+  findNodeHandle as _findNodeHandle,
+} from 'react-native';
+
+export function findNodeHandle(
+  componentOrHandle: Parameters<typeof _findNodeHandle>['0']
+) {
+  let nodeHandle: NodeHandle | null;
+  try {
+    nodeHandle = _findNodeHandle(componentOrHandle);
+    if (nodeHandle) {
+      return nodeHandle;
+    }
+  } catch {}
+
+  try {
+    // @ts-ignore
+    nodeHandle = componentOrHandle.getNativeScrollRef();
+    if (nodeHandle) {
+      return nodeHandle;
+    }
+  } catch {}
+
+  // @ts-ignore https://github.com/facebook/react-native/blob/a314e34d6ee875830d36e4df1789a897c7262056/packages/virtualized-lists/Lists/VirtualizedList.js#L1252
+  nodeHandle = componentOrHandle._scrollRef;
+  if (nodeHandle) {
+    return nodeHandle;
+  }
+
+  console.warn('could not find scrollable ref!');
+  return componentOrHandle;
+}

package/src/utilities/getKeyboardAnimationConfigs.ts

@@ -0,0 +1,44 @@
+import type { KeyboardEventEasing } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+
+export const getKeyboardAnimationConfigs = (
+  easing: KeyboardEventEasing,
+  duration: number
+) => {
+  'worklet';
+  switch (easing) {
+    case 'easeIn':
+      return {
+        easing: Easing.in(Easing.ease),
+        duration,
+      };
+
+    case 'easeOut':
+      return {
+        easing: Easing.out(Easing.ease),
+        duration,
+      };
+
+    case 'easeInEaseOut':
+      return {
+        easing: Easing.inOut(Easing.ease),
+        duration,
+      };
+
+    case 'linear':
+      return {
+        easing: Easing.linear,
+        duration,
+      };
+
+    case 'keyboard':
+      return {
+        damping: 500,
+        stiffness: 1000,
+        mass: 3,
+        overshootClamping: true,
+        restDisplacementThreshold: 10,
+        restSpeedThreshold: 10,
+      };
+  }
+};

package/src/utilities/getRefNativeTag.web.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+import { findNodeHandle } from 'react-native';
+
+export function getRefNativeTag(ref: RefObject<never>) {
+  return findNodeHandle(ref?.current) || null;
+}

package/src/utilities/id.ts

@@ -0,0 +1,6 @@
+let current = 0;
+
+export const id = () => {
+  current = (current + 1) % Number.MAX_SAFE_INTEGER;
+  return current;
+};

package/src/utilities/index.ts

@@ -0,0 +1,7 @@
+export { normalizeSnapPoint } from './normalizeSnapPoint';
+export { animate } from './animate';
+export { getKeyboardAnimationConfigs } from './getKeyboardAnimationConfigs';
+export { print } from './logger';
+export { noop, workletNoop } from './noop';
+export { isFabricInstalled } from './isFabricInstalled';
+export { findNodeHandle } from './findNodeHandle';

package/src/utilities/isFabricInstalled.ts

@@ -0,0 +1,9 @@
+/**
+ * Checks if the Fabric renderer is installed in the current environment.
+ *
+ * @returns {boolean} `true` if Fabric is installed, otherwise `false`.
+ */
+export function isFabricInstalled() {
+  // @ts-ignore
+  return global?.nativeFabricUIManager != null;
+}

package/src/utilities/logger.ts

@@ -0,0 +1,55 @@
+interface PrintOptions {
+  component?: string;
+  category?: 'layout' | 'effect' | 'callback';
+  method?: string;
+  params?: Record<string, unknown> | string | number | boolean;
+}
+
+type Print = (options: PrintOptions) => void;
+
+let _isLoggingEnabled = false;
+let _excludeCategories: PrintOptions['category'][] | undefined;
+
+const enableLogging = (excludeCategories?: PrintOptions['category'][]) => {
+  if (!__DEV__) {
+    console.warn('[BottomSheet] could not enable logging on production!');
+    return;
+  }
+
+  _isLoggingEnabled = true;
+  _excludeCategories = excludeCategories;
+};
+
+let print: Print = () => {};
+
+if (__DEV__) {
+  print = ({ component, method, params, category }) => {
+    if (!_isLoggingEnabled) {
+      return;
+    }
+
+    if (
+      category &&
+      _excludeCategories &&
+      _excludeCategories.includes(category)
+    ) {
+      return;
+    }
+
+    let message = '';
+
+    if (typeof params === 'object') {
+      message = Object.keys(params)
+        .map(key => `${key}:${params[key]}`)
+        .join(' ');
+    } else {
+      message = `${params ?? ''}`;
+    }
+    // biome-ignore lint/suspicious/noConsole: used for debugging
+    console.log(`[${[component, method].filter(Boolean).join('::')}]`, message);
+  };
+}
+
+Object.freeze(print);
+
+export { print, enableLogging };

package/src/utilities/noop.ts

@@ -0,0 +1,7 @@
+const workletNoop = () => {
+  'worklet';
+};
+
+const noop = () => {};
+
+export { noop, workletNoop };

package/src/utilities/normalizeSnapPoint.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a snap point to fixed numbers.
+ */
+export const normalizeSnapPoint = (
+  snapPoint: number | string,
+  containerHeight: number
+) => {
+  'worklet';
+  let normalizedSnapPoint = snapPoint;
+
+  // percentage snap point
+  if (typeof normalizedSnapPoint === 'string') {
+    normalizedSnapPoint =
+      (Number(normalizedSnapPoint.split('%')[0]) * containerHeight) / 100;
+  }
+  return Math.max(0, containerHeight - normalizedSnapPoint);
+};