@shaquillehinds/react-native-bottom-sheet 0.0.1

package/src/BottomSheet/controller/callbacks.controller.ts

@@ -0,0 +1,222 @@
+//$lf-ignore
+import {
+  runOnJS,
+  runOnUI,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { useCallback } from 'react';
+import {
+  animateOpenTimingConfig,
+  animateCloseTimingConfig,
+  modalTransitionTimingConfig,
+} from '../config/bottomSheet.constants';
+import { type LayoutChangeEvent } from 'react-native';
+import {
+  ModalState,
+  type AnimateCloseModalProps,
+  type SnapPoint,
+} from '../config/bottomSheet.types';
+import type { UseBottomSheetUtilsReturn } from './hooks/useBottomSheetUtils';
+
+type CallbackControllerProps = {
+  unMounter?: () => void;
+
+  snapPoints: SharedValue<SnapPoint[]>;
+  modalState: React.MutableRefObject<ModalState>;
+  translationX: SharedValue<number>;
+  translationY: SharedValue<number>;
+  currentSnapPoint: SharedValue<SnapPoint>;
+  prevTranslationY: SharedValue<number>;
+  backdropOpacity: SharedValue<number>;
+  closedYPosition: SharedValue<number>;
+  fullyOpenYPosition: SharedValue<number>;
+  disableLayoutAnimation: React.MutableRefObject<boolean>;
+  setDisableLayoutAnimation: (bool: boolean) => void;
+  disableCloseOnBackdropPress?: boolean;
+  onBackDropPress?: (animateModalClose?: () => void) => void;
+  setShowModal?:
+    | React.Dispatch<React.SetStateAction<boolean>>
+    | ((bool: boolean) => void);
+  utils: UseBottomSheetUtilsReturn;
+  onSnapPointReach?: (snapPointIndex: number) => Promise<void> | void;
+};
+
+export function callbackController(props: CallbackControllerProps) {
+  const {
+    unMounter,
+    snapPoints,
+    modalState,
+    backdropOpacity,
+    translationX,
+    translationY,
+    onBackDropPress,
+    closedYPosition,
+    currentSnapPoint,
+    prevTranslationY,
+    onSnapPointReach,
+    fullyOpenYPosition,
+    disableLayoutAnimation,
+    disableCloseOnBackdropPress,
+  } = props;
+  const {
+    orientation,
+    getMaxMinSnapPointsWorklet,
+    percentageToSnapPointWorklet,
+  } = props.utils;
+  const setModalState = useCallback((state: ModalState) => {
+    if (
+      modalState.current === ModalState.CLOSING &&
+      state !== ModalState.CLOSED
+    )
+      return;
+    modalState.current = state;
+  }, []);
+  const animateModalOpen = useCallback(
+    (height: number, modalHeight: number) => {
+      'worklet';
+      if (height > modalHeight) height = modalHeight;
+      const translateYHeight = -height;
+      translationY.value = withTiming(
+        translateYHeight,
+        animateOpenTimingConfig,
+        () => {
+          prevTranslationY.value = translateYHeight;
+          runOnJS(setModalState)(ModalState.OPEN);
+        }
+      );
+      if (snapPoints.value.length) {
+        let maxOpenPosition = fullyOpenYPosition.value;
+        if (!maxOpenPosition)
+          maxOpenPosition = getMaxMinSnapPointsWorklet(snapPoints).maxSnapPoint;
+        backdropOpacity.value = withTiming(
+          translateYHeight / maxOpenPosition,
+          animateOpenTimingConfig
+        );
+      } else backdropOpacity.value = withTiming(1, animateOpenTimingConfig);
+    },
+    [orientation]
+  );
+
+  const animateModalClose = useCallback((prop?: AnimateCloseModalProps) => {
+    'worklet';
+    const timing = {
+      duration: prop?.duration || animateCloseTimingConfig.duration,
+      easing: prop?.easing || animateCloseTimingConfig.easing,
+    };
+    translationY.value = withTiming(closedYPosition.value, timing);
+    backdropOpacity.value = withTiming(0, timing);
+  }, []);
+
+  const onPlatformViewLayout = useCallback((e: LayoutChangeEvent) => {
+    translationX.value = -e.nativeEvent.layout.x;
+  }, []);
+
+  const animateToSnapPoint = useCallback(
+    (snapPoint?: SnapPoint, index?: number) => {
+      'worklet';
+      if (!snapPoint) return;
+      currentSnapPoint.value = { offset: snapPoint.offset };
+      translationY.value = withTiming(
+        snapPoint.offset,
+        modalTransitionTimingConfig,
+        () => {
+          typeof index === 'number' &&
+            onSnapPointReach &&
+            runOnJS(onSnapPointReach)(index);
+        }
+      );
+      backdropOpacity.value = withTiming(
+        snapPoint.offset / fullyOpenYPosition.value,
+        modalTransitionTimingConfig
+      );
+    },
+    []
+  );
+
+  const animateToSnapPointIndex = useCallback((snapPointIndex: number) => {
+    'worklet';
+    const snapPoint = snapPoints.value[snapPointIndex];
+    animateToSnapPoint(snapPoint, snapPointIndex);
+  }, []);
+
+  const animateToPercentage = useCallback(
+    (percentage: string | number, screenHeight: number) => {
+      'worklet';
+      const snapPoint = percentageToSnapPointWorklet(percentage, screenHeight);
+      animateToSnapPoint(snapPoint);
+    },
+    [orientation]
+  );
+
+  const onModalContentLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (modalState.current === ModalState.OPENING) return;
+      if (!modalState.current) setModalState(ModalState.OPENING);
+      if (snapPoints.value.length && modalState.current === ModalState.OPEN)
+        return;
+      if (!snapPoints.value.length) {
+        if (e.nativeEvent.layout.height > props.utils.modalHeight)
+          fullyOpenYPosition.value = -props.utils.modalHeight;
+        else fullyOpenYPosition.value = -e.nativeEvent.layout.height;
+      }
+      if (!disableLayoutAnimation.current)
+        runOnUI(animateModalOpen)(
+          Math.abs(snapPoints.value[0]?.offset || e.nativeEvent.layout.height),
+          props.utils.modalHeight
+        );
+    },
+    [orientation]
+  );
+
+  const closeModal = useCallback(
+    (delayMS?: number) => {
+      setModalState(ModalState.CLOSING);
+      delayMS
+        ? setTimeout(
+            () =>
+              props.setShowModal ? props.setShowModal(false) : unMounter?.(),
+            delayMS
+          )
+        : props.setShowModal
+          ? props.setShowModal(false)
+          : unMounter?.();
+      props.setDisableLayoutAnimation(true);
+      setTimeout(() => {
+        setModalState(ModalState.CLOSED);
+      }, delayMS || animateCloseTimingConfig.duration);
+    },
+    [unMounter]
+  );
+
+  const onModalBackdropPress = useCallback(() => {
+    onBackDropPress?.();
+    if (disableCloseOnBackdropPress) return;
+    closeModal();
+    runOnUI(animateModalClose)();
+  }, []);
+
+  const onRequestClose = useCallback(() => {
+    disableLayoutAnimation.current = true;
+    runOnUI(animateModalClose)();
+    if (props.setShowModal) {
+      props.setShowModal(false);
+    } else {
+      props.unMounter?.();
+    }
+  }, []);
+
+  return {
+    closeModal,
+
+    animateModalOpen,
+    animateModalClose,
+    animateToPercentage,
+    animateToSnapPointIndex,
+
+    onRequestClose,
+    onPlatformViewLayout,
+    onModalContentLayout,
+    onModalBackdropPress,
+  };
+}

package/src/BottomSheet/controller/dragAnimation.controller.ts

@@ -0,0 +1,211 @@
+//$lf-ignore
+import {
+  runOnJS,
+  withTiming,
+  type WithTimingConfig,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { type DragGestureProps } from '@shaquillehinds/react-native-essentials';
+import { useCallback } from 'react';
+import { modalTransitionTimingConfig } from '../config/bottomSheet.constants';
+import { type OnMoveAnimationProps } from '../animations/drag.animation';
+import type { SnapPoint } from '../config/bottomSheet.types';
+
+type DragAnimationControllerProps = {
+  snapPoints: SharedValue<SnapPoint[]>;
+  currentSnapPoint: SharedValue<SnapPoint>;
+  keyboardHeight: SharedValue<number>;
+  translationY: SharedValue<number>;
+  prevTranslationY: SharedValue<number>;
+  fullyOpenYPosition: SharedValue<number>;
+  lowestSnapPointPosition: SharedValue<number>;
+  backdropOpacity: SharedValue<number>;
+  closedYPosition: SharedValue<number>;
+
+  keepMounted?: boolean;
+  allowDragWhileKeyboardVisible?: boolean;
+
+  onDrag: (props: OnMoveAnimationProps) => void;
+  onDragStart: () => void;
+  closeModal: (delayMS?: number) => void;
+  onSnapPointReach?: (snapPointIndex: number) => Promise<void> | void;
+};
+
+export function dragAnimationController(props: DragAnimationControllerProps) {
+  const {
+    snapPoints,
+    currentSnapPoint,
+    allowDragWhileKeyboardVisible,
+    keyboardHeight,
+    backdropOpacity,
+    closeModal,
+    keepMounted,
+    closedYPosition,
+    onSnapPointReach,
+    onDragStart,
+    lowestSnapPointPosition,
+    translationY,
+    prevTranslationY,
+    fullyOpenYPosition,
+  } = props;
+  // Gesture event handlers
+  const onDragStartGesture: DragGestureProps['onDragStart'] =
+    useCallback(() => {
+      'worklet';
+      if (keyboardHeight.value && !allowDragWhileKeyboardVisible) return;
+      onDragStart();
+    }, []);
+  const onDragGesture: DragGestureProps['onDrag'] = useCallback((e) => {
+    'worklet';
+    if (keyboardHeight.value && !allowDragWhileKeyboardVisible) return;
+    const val = prevTranslationY.value + e.translationY;
+    const stretch = 100;
+    translationY.value =
+      val >= fullyOpenYPosition.value
+        ? val
+        : fullyOpenYPosition.value -
+          stretch +
+          stretch / ((fullyOpenYPosition.value - val) / stretch + 1);
+    if (snapPoints.value.length)
+      backdropOpacity.value =
+        -(currentSnapPoint.value.offset + e.translationY) /
+        -fullyOpenYPosition.value;
+    else {
+      if (prevTranslationY.value === fullyOpenYPosition.value)
+        backdropOpacity.value =
+          -(e.translationY + fullyOpenYPosition.value) /
+          -fullyOpenYPosition.value;
+      else if (e.translationY < 0)
+        backdropOpacity.value = e.translationY / -fullyOpenYPosition.value;
+    }
+  }, []);
+
+  const onDragEndGesture: NonNullable<DragGestureProps['onDragEnd']> =
+    useCallback((e) => {
+      'worklet';
+      if (keyboardHeight.value && !allowDragWhileKeyboardVisible) return;
+      const animate = (
+        to: number,
+        timing: WithTimingConfig,
+        opacity: number,
+        index?: number
+      ) => {
+        translationY.value = withTiming(to, timing, () => {
+          typeof index === 'number' &&
+            onSnapPointReach &&
+            runOnJS(onSnapPointReach)(index);
+        });
+        backdropOpacity.value = withTiming(
+          opacity,
+          modalTransitionTimingConfig
+        );
+      };
+      if (snapPoints.value.length) {
+        const fullyOpenIndex = snapPoints.value.length - 1;
+        if (e.velocityY > 1500) {
+          if (
+            currentSnapPoint.value.offset === lowestSnapPointPosition.value &&
+            !keepMounted
+          ) {
+            animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+            return runOnJS(closeModal)(175);
+          }
+          if (e.velocityY > 3500 && !keepMounted) {
+            animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+            return runOnJS(closeModal)(175);
+          }
+          if (e.velocityY > 1500) {
+            animate(
+              lowestSnapPointPosition.value,
+              modalTransitionTimingConfig,
+              lowestSnapPointPosition.value / fullyOpenYPosition.value,
+              0
+            );
+            currentSnapPoint.value = {
+              offset: lowestSnapPointPosition.value,
+            };
+            return;
+          }
+        } else if (e.velocityY < -1500) {
+          animate(
+            fullyOpenYPosition.value,
+            modalTransitionTimingConfig,
+            1,
+            fullyOpenIndex
+          );
+          currentSnapPoint.value = {
+            offset: fullyOpenYPosition.value,
+          };
+          return;
+        }
+        let closestSnapPointValue = Math.abs(
+          currentSnapPoint.value.offset + e.translationY + 100
+        );
+        let closestSnapPointOffset = 0;
+        let closestSnapPointIndex = 0;
+        for (let i = 0; i < snapPoints.value.length; i++) {
+          const snapPoint = snapPoints.value[i];
+          if (!snapPoint)
+            return animate(
+              fullyOpenYPosition.value,
+              modalTransitionTimingConfig,
+              1,
+              fullyOpenIndex
+            );
+          const currSnapPointValue = Math.abs(
+            currentSnapPoint.value.offset + e.translationY - snapPoint.offset
+          );
+          if (currSnapPointValue < closestSnapPointValue) {
+            closestSnapPointValue = currSnapPointValue;
+            closestSnapPointOffset = snapPoint.offset;
+            closestSnapPointIndex = i;
+          }
+        }
+        if (closestSnapPointOffset) {
+          currentSnapPoint.value = {
+            offset: closestSnapPointOffset,
+          };
+          return animate(
+            closestSnapPointOffset,
+            modalTransitionTimingConfig,
+            closestSnapPointOffset / fullyOpenYPosition.value,
+            closestSnapPointIndex
+          );
+        }
+        if (!keepMounted) {
+          runOnJS(closeModal)(175);
+          return animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+        } else
+          return animate(
+            lowestSnapPointPosition.value,
+            modalTransitionTimingConfig,
+            lowestSnapPointPosition.value / fullyOpenYPosition.value,
+            0
+          );
+      }
+      const halfContentHeight = -(fullyOpenYPosition.value / 2);
+      const isClosed = prevTranslationY.value === closedYPosition.value;
+      const isMovedPastHalf = Math.abs(e.translationY) > halfContentHeight;
+      const isHighVelocity = isClosed
+        ? e.velocityY < -1000
+        : e.velocityY > 1000;
+      if (isClosed) {
+        if (e.translationY > 50 || isMovedPastHalf)
+          animate(fullyOpenYPosition.value, modalTransitionTimingConfig, 1);
+        else if (isHighVelocity)
+          animate(fullyOpenYPosition.value, modalTransitionTimingConfig, 1);
+        else animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+        return;
+      }
+      if (isMovedPastHalf || isHighVelocity) {
+        if (e.velocityY > 1000)
+          animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+        else animate(closedYPosition.value, modalTransitionTimingConfig, 0);
+        runOnJS(closeModal)(175);
+      } else if (e.translationY <= halfContentHeight) {
+        animate(fullyOpenYPosition.value, modalTransitionTimingConfig, 1);
+      }
+    }, []);
+
+  return { onDragGesture, onDragEndGesture, onDragStartGesture };
+}

package/src/BottomSheet/controller/hooks/useBottomSheetRef.ts

@@ -0,0 +1,73 @@
+import { useImperativeHandle, useMemo, useRef } from 'react';
+import type {
+  BottomSheetRef,
+  BottomModalRef,
+  BottomModalRefObject,
+  BottomSheetProps,
+} from '../../config/bottomSheet.types';
+import type { ComponentMounterController } from '@shaquillehinds/react-native-essentials';
+import { animateCloseTimingConfig } from '../../config/bottomSheet.constants';
+
+type UseBottomModalRefProps = {
+  ref: BottomModalRefObject;
+} & Pick<BottomSheetProps, 'showModal' | 'setShowModal'>;
+
+export function useBottomSheetRef({
+  ref,
+  showModal,
+  setShowModal,
+}: UseBottomModalRefProps) {
+  const mounterRef = useRef<ComponentMounterController | null>(null);
+  const sheetRef = useRef<BottomSheetRef | null>(null);
+  const modalRef: BottomModalRef = useMemo(() => {
+    const hasState = setShowModal && typeof showModal === 'boolean';
+    return {
+      getModalState: () => sheetRef.current?.getModalState(),
+      openModal: (openModalProps) => {
+        if (hasState && !openModalProps?.onOpen) setShowModal(true);
+        else mounterRef.current?.mountComponent(openModalProps);
+      },
+      closeModal: (closeModalProps) => {
+        if (closeModalProps?.skipAnimation) {
+          mounterRef.current?.hardUnMountComponent(closeModalProps);
+          hasState && setShowModal(false);
+          return;
+        }
+        if (closeModalProps?.isNavigating) {
+          const closeProps = {
+            duration: closeModalProps.duration || 100,
+            easing: closeModalProps?.easing,
+            onClose: closeModalProps?.onClose,
+          };
+          sheetRef.current?.animateCloseModal(closeProps);
+          mounterRef.current?.unMountComponent(closeProps);
+          if (hasState)
+            setTimeout(() => setShowModal(false), closeProps.duration);
+          return;
+        }
+        if (hasState && !closeModalProps?.duration && !closeModalProps?.onClose)
+          return setShowModal(false);
+        sheetRef.current?.animateCloseModal(closeModalProps);
+        mounterRef.current?.unMountComponent(closeModalProps);
+        if (hasState)
+          setTimeout(
+            () => setShowModal(false),
+            animateCloseTimingConfig.duration
+          );
+      },
+      closeWithoutAnimation: () => {
+        mounterRef.current?.hardUnMountComponent();
+        hasState && setShowModal(false);
+      },
+      snapToIndex: (index) => sheetRef.current?.snapToIndex(index),
+      snapToPercentage: (percentage) =>
+        sheetRef.current?.snapToPercentage(percentage),
+    };
+  }, []);
+  useImperativeHandle(ref, () => modalRef, []);
+  return {
+    mounterRef,
+    sheetRef,
+    modalRef,
+  };
+}

package/src/BottomSheet/controller/hooks/useBottomSheetUtils.ts

@@ -0,0 +1,75 @@
+import {
+  useDeviceOrientation,
+  strToNumPercentage,
+  strToNumPercentageWorklet,
+} from '@shaquillehinds/react-native-essentials';
+import type { SharedValue } from 'react-native-reanimated';
+import type { SnapPoint } from '../../config/bottomSheet.types';
+import { extraHeightPercent } from '../../config/bottomSheet.constants';
+
+export function useBottomSheetUtils() {
+  const deviceOrientation = useDeviceOrientation();
+
+  const extraHeight = deviceOrientation.relativeY(extraHeightPercent);
+  const modalHeight = deviceOrientation.relativeY(100) + extraHeight;
+  const modalBottomOffset = -modalHeight * 2;
+
+  const getMaxMinSnapPoints = (snapPoints: SnapPoint[]) => {
+    const firstSnapPoint = snapPoints[0]!;
+    let maxSnapPoint = firstSnapPoint.offset;
+    let minSnapPoint = firstSnapPoint.offset;
+    for (const snapPoint of snapPoints) {
+      if (snapPoint.offset < maxSnapPoint) maxSnapPoint = snapPoint.offset;
+      if (snapPoint.offset > minSnapPoint) minSnapPoint = snapPoint.offset;
+    }
+    return { maxSnapPoint, minSnapPoint, firstSnapPoint };
+  };
+
+  const getMaxMinSnapPointsWorklet = (snapPoints: SharedValue<SnapPoint[]>) => {
+    'worklet';
+    const firstSnapPoint = snapPoints.value[0]!;
+    let maxSnapPoint = firstSnapPoint.offset;
+    let minSnapPoint = firstSnapPoint.offset;
+    for (const snapPoint of snapPoints.value) {
+      if (snapPoint.offset < maxSnapPoint) maxSnapPoint = snapPoint.offset;
+      if (snapPoint.offset > minSnapPoint) minSnapPoint = snapPoint.offset;
+    }
+    return { maxSnapPoint, minSnapPoint, firstSnapPoint };
+  };
+
+  const percentageToSnapPoint = (p: string | number) => {
+    const percentage = strToNumPercentage(p);
+    return {
+      percentage: percentage / 100,
+      offset: -(deviceOrientation.relativeY(percentage) + extraHeight),
+    };
+  };
+
+  const percentageToSnapPointWorklet = (
+    p: string | number,
+    screenHeight: number
+  ) => {
+    'worklet';
+    const percentage = strToNumPercentageWorklet(p);
+    const decimal = percentage / 100;
+    const snapPointOffset = screenHeight * decimal;
+    const extraSnapPointHeight = screenHeight * (extraHeightPercent / 100);
+    return {
+      percentage: decimal,
+      offset: -(snapPointOffset + extraSnapPointHeight),
+    };
+  };
+
+  return {
+    ...deviceOrientation,
+    extraHeight,
+    modalHeight,
+    modalBottomOffset,
+    getMaxMinSnapPoints,
+    getMaxMinSnapPointsWorklet,
+    percentageToSnapPoint,
+    percentageToSnapPointWorklet,
+  };
+}
+
+export type UseBottomSheetUtilsReturn = ReturnType<typeof useBottomSheetUtils>;

package/src/BottomSheet/controller/index.ts

@@ -0,0 +1 @@
+export * from './bottomSheet.controller';