@shaquillehinds/react-native-bottom-sheet 0.0.1

package/src/BottomSheet/config/bottomSheet.constants.ts

@@ -0,0 +1,31 @@
+import { isIOS, relativeY } from '@shaquillehinds/react-native-essentials';
+import { Easing } from 'react-native-reanimated';
+
+export const extraHeightPercent = 10;
+export const extraHeight = relativeY(extraHeightPercent);
+export const modalHeight = relativeY(100) + extraHeight;
+export const modalContentMaxHeight = modalHeight;
+
+// Needed for bottomModal.styles
+export const modalBottomOffset = -modalHeight * 2;
+
+export const modalTimingConfig = (duration = 500) => ({
+  duration,
+  easing: Easing.bezier(0.2, 0.32, 0, 1),
+});
+export const modalTransitionTimingConfig = modalTimingConfig();
+export const animateOpenTimingConfig = modalTimingConfig();
+
+export const animateCloseTimingConfig = {
+  duration: 300,
+  easing: Easing.linear,
+};
+
+export const openKeyboardTimingConfig = {
+  duration: isIOS ? 330 : 500,
+  easing: isIOS ? Easing.bezier(0, 0.7, 0, 1) : Easing.bezier(0, 0.2, 0, 1),
+};
+export const closeKeyboardTimingConfig = {
+  duration: isIOS ? 450 : 500,
+  easing: Easing.bezier(0, 0.2, 0, 1),
+};

package/src/BottomSheet/config/bottomSheet.styles.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { modalBottomOffset, modalHeight } from './bottomSheet.constants';
+import {
+  relativeShort,
+  relativeX,
+  relativeY,
+  maxZIndex,
+} from '@shaquillehinds/react-native-essentials';
+
+export const bottomModalStyle = StyleSheet.create({
+  bottomSheet: {
+    backgroundColor: 'white',
+    width: relativeX(100),
+    height: modalHeight,
+    borderRadius: relativeShort(7),
+    position: 'absolute',
+    bottom: modalBottomOffset,
+    zIndex: maxZIndex,
+    overflow: 'hidden',
+  },
+  contentContainer: {
+    paddingBottom: relativeY(10),
+  },
+  bumper: {
+    backgroundColor: 'rgba(156,170,180,0.3)',
+    width: relativeX(15),
+    borderRadius: 5,
+    height: relativeY(0.2),
+    alignSelf: 'center',
+    marginVertical: relativeY(1.4),
+  },
+  bumperContainer: {
+    zIndex: maxZIndex + 5,
+  },
+
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: maxZIndex,
+    backgroundColor: 'rgba(0,0,0,.1)',
+    opacity: 1,
+  },
+});

package/src/BottomSheet/config/bottomSheet.types.ts

@@ -0,0 +1,246 @@
+import type React from 'react';
+import type {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  TextInput,
+  ViewStyle,
+} from 'react-native';
+import type {
+  AnimatedScrollViewProps,
+  EasingFunction,
+  EasingFunctionFactory,
+  FlatListPropsWithLayout,
+  SharedValue,
+} from 'react-native-reanimated';
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+import type { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import type { AnimatedScrollView } from 'react-native-reanimated/lib/typescript/component/ScrollView';
+import type {
+  PortalContextValue,
+  ModalWrapperProps,
+} from '@shaquillehinds/react-native-essentials';
+
+export type BottomSheetProps = {
+  showModal?: boolean;
+  setShowModal?:
+    | React.Dispatch<React.SetStateAction<boolean>>
+    | ((bool: boolean) => void);
+
+  _unMounter?: () => void;
+  /**
+   * Modal snaps to various positions of the screens overall height.
+   * Takes a percentage of the screen height.
+   * @example
+   * [25, "50", "75%"]
+   */
+  snapPoints?: (number | string)[];
+
+  /**
+   * Defines which part of the modal is draggable.
+   * "Full" makes the entire modal draggable.
+   * @default "bumper"
+   */
+  dragArea?: 'full' | 'bumper' | 'none';
+  /**
+   * Prevents full unmounting. Use with bottomOffset if you want to see the modal when it's "closed".
+   */
+  keepMounted?: boolean;
+  /**
+   * Removes the top part of the modal that is draggable.
+   */
+  hideBumper?: boolean;
+  /**
+   * Adds content bottom padding when the keyboard is visible. Use inputsForKeyboardToAvoid if you only want the padding to be adding when certain inputs are focused.
+   */
+  avoidKeyboard?: boolean;
+  /**
+   * By default the modal isn't draggable when the keyboard is visible to prevent weird behavior when avoidKeyboard is active.
+   * Add this prop to disable that behavior.
+   */
+  allowDragWhileKeyboardVisible?: boolean;
+  /**
+   * Function to run when the modal is mounting.
+   */
+  onModalShow?: () => Promise<void> | void;
+  /**
+   * Function to run when the modal is unmounting.
+   */
+  onModalClose?: () => Promise<void> | void;
+  /**
+   * Function to run when modal reaches a snapPoint
+   */
+  onSnapPointReach?: (snapPointIndex: number) => Promise<void> | void;
+  /**
+   * Style for the modal sheet itself, not the modal content.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style for the bumper itself, not it's container.
+   */
+  bumperStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style for the bumper container, not the actual bumper.
+   */
+  bumperContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Sets the background color of the modal and the bumper container.
+   */
+  backgroundColor?: string;
+  /**
+   * Style for the modal content container, not the modal sheet itself.
+   */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Provide a custom bumper component that replaces the default one. This component will be draggrable.
+   */
+  BumperComponent?: () => React.ReactNode;
+  /**
+   * Adds content bottom padding for the modal depending on if the provided inputRef is focused.
+   */
+  inputsForKeyboardToAvoid?: React.RefObject<TextInput>[];
+  /**
+   * Pushes the modal up. Useful when used with keepMounted prop and you want to still the modal in it's closed position.
+   */
+  bottomOffset?: number;
+  /**
+   * Delay as to when content should be shown.
+   * Use 'mount' type for heavy loaded content that causes sluggish modal entry to improve performance.
+   * Give the contentContainerStyle prop an appropriate minHeight or height when using type 'mount'.
+   */
+  showContentDelay?: {
+    /**
+     * @default - "opacity"
+     */
+    type?: 'mount' | 'opacity';
+    timeInMilliSecs: number;
+  };
+
+  /**
+   * Disables the use use of the portabl provider to render component
+   */
+  disablePortal?: boolean;
+
+  /**
+   * Provide a custom context in case you want to restrict your modal to particular portal
+   */
+  CustomPortalContext?: React.Context<PortalContextValue | undefined>;
+};
+
+export type BottomSheetModalProps = {
+  /**
+   * Custom backdrop component instead of the default blurview
+   */
+  BackdropComponent?: React.ReactNode;
+  onBackDropPress?: () => void;
+  disableCloseOnBackdropPress?: boolean;
+} & BottomSheetProps &
+  ModalWrapperProps;
+
+export type BottomSheetContextProps = {
+  scrollY: SharedValue<number>;
+  maxScrollOffset: SharedValue<number>;
+  inverted: SharedValue<boolean>;
+  onBeginScroll: (
+    e: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onUpdateScroll: (
+    e: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onEndScroll: (
+    e: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  scrollableComponentRef: ScrollComponentRef;
+};
+
+export type BottomModalContextProps = {
+  modalRef: BottomModalRef;
+};
+
+export type BottomSheetFlatlistProps<T> = Omit<
+  FlatListPropsWithLayout<T>,
+  'onScroll'
+> & {
+  onScroll?: ReanimatedOnScroll | DefaultOnScroll;
+  refFlatlist?: React.MutableRefObject<FlatList> | React.RefObject<FlatList>;
+};
+
+export type BottomSheetScrollViewProps = Omit<
+  AnimatedScrollViewProps,
+  'onScroll'
+> & {
+  onScroll?: ReanimatedOnScroll | DefaultOnScroll;
+  refScrollView?:
+    | React.MutableRefObject<AnimatedScrollView>
+    | React.RefObject<AnimatedScrollView>;
+};
+
+export type DefaultOnScroll = (
+  event: NativeSyntheticEvent<NativeScrollEvent>
+) => void;
+export type ReanimatedOnScroll = (event: ReanimatedScrollEvent) => void;
+
+export type ScrollComponentRef =
+  React.MutableRefObject<ScrollComponentRefProps>;
+
+export type ScrollComponentRefProps = FlatList | AnimatedScrollView | null;
+
+export enum ModalState {
+  CLOSED = 0,
+  OPENING = 1,
+  OPEN = 2,
+  CLOSING = 3,
+}
+
+export type SnapPoint = {
+  offset: number;
+};
+
+type SnapController = {
+  snapToIndex: (snapPointIndex: number) => void;
+  snapToPercentage: (percentage: number | string) => void;
+};
+
+export type AnimateCloseModalProps = {
+  duration?: number;
+  easing?: EasingFunction | EasingFunctionFactory;
+};
+
+export type BottomSheetRef = {
+  getModalState: () => ModalState;
+  animateCloseModal: (props?: AnimateCloseModalProps) => void;
+} & SnapController;
+
+export type BottomSheetRefObject = React.Ref<BottomSheetRef>;
+
+export type CloseModalProps = {
+  /**
+   * Instantly unmounts modal without animation.
+   * Useful for glitchy android navigation.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Reduces animation duration to 100ms
+   * Useful for glitchy android navigation.
+   */
+  isNavigating?: boolean;
+  onClose?: () => void;
+} & AnimateCloseModalProps;
+
+export type OpenModalProps = {
+  onOpen?: () => void;
+};
+
+export type BottomModalRef = {
+  getModalState: () => ModalState | undefined;
+  openModal: (props?: OpenModalProps) => void;
+  closeModal: (props?: CloseModalProps) => void;
+  closeWithoutAnimation: () => void;
+} & SnapController;
+
+export type BottomModalRefObject = React.Ref<BottomModalRef>;

package/src/BottomSheet/controller/bottomFlatlist.controller.ts

@@ -0,0 +1,87 @@
+//$lf-ignore
+import { useAnimatedScrollHandler } from 'react-native-reanimated';
+import { useContext, useRef } from 'react';
+import { BottomSheetContext } from '../components/BottomSheet';
+import type {
+  BottomSheetFlatlistProps,
+  ReanimatedOnScroll,
+} from '../config/bottomSheet.types';
+import type {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+export function bottomFlatlistController<T>(
+  props: BottomSheetFlatlistProps<T>
+) {
+  let { onScroll, refFlatlist, ...flatlistProps } = props;
+  const inverted = flatlistProps.inverted;
+
+  const context = useContext(BottomSheetContext);
+  const contentSize = useRef(0);
+  const layoutHeight = useRef(0);
+
+  const scrollY = context?.scrollY;
+
+  const animatedScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      if (scrollY) scrollY.value = event.contentOffset.y;
+      if (onScroll) {
+        onScroll = onScroll as ReanimatedOnScroll;
+        onScroll(event);
+      }
+    },
+  });
+
+  if (context && refFlatlist)
+    context.scrollableComponentRef.current = refFlatlist.current;
+
+  const onScrollBegin = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (!context) {
+      if (typeof flatlistProps.onScrollBeginDrag === 'function')
+        flatlistProps.onScrollBeginDrag &&
+          flatlistProps.onScrollBeginDrag(event);
+      return;
+    }
+    if (context.inverted.value !== inverted)
+      context!.inverted.value = !!inverted;
+    const maxScrollOffset = contentSize.current - layoutHeight.current;
+    if (context.maxScrollOffset.value !== maxScrollOffset)
+      context.maxScrollOffset.value = maxScrollOffset;
+    if (!context.scrollableComponentRef.current && refFlatlist)
+      context.scrollableComponentRef.current = refFlatlist.current;
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    layoutHeight.current = e.nativeEvent.layout.height;
+    inverted && (context!.inverted.value = true);
+    if (contentSize.current) {
+      context!.maxScrollOffset.value =
+        contentSize.current - e.nativeEvent.layout.height;
+    }
+    if (typeof flatlistProps.onLayout === 'function')
+      flatlistProps.onLayout && flatlistProps.onLayout(e);
+  };
+
+  const onContentSizeChange = (w: number, h: number) => {
+    contentSize.current = h;
+    if (layoutHeight.current) {
+      context!.maxScrollOffset.value = h - layoutHeight.current;
+    }
+    if (typeof flatlistProps.onContentSizeChange === 'function')
+      flatlistProps.onContentSizeChange &&
+        flatlistProps.onContentSizeChange(w, h);
+  };
+
+  return {
+    refFlatlist,
+    flatlistProps,
+    context,
+    onScroll,
+    onLayout,
+    onScrollBegin,
+    onContentSizeChange,
+    animatedScrollHandler,
+  };
+}

package/src/BottomSheet/controller/bottomScrollView.controller.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useAnimatedScrollHandler } from 'react-native-reanimated';
+import type {
+  BottomSheetScrollViewProps,
+  ReanimatedOnScroll,
+} from '../config/bottomSheet.types';
+import { BottomSheetContext } from '../components/BottomSheet';
+
+export function bottomScrollViewController(props: BottomSheetScrollViewProps) {
+  let { onScroll, refScrollView, ...scrollViewProps } = props;
+
+  const context = useContext(BottomSheetContext);
+
+  const scrollY = context?.scrollY;
+
+  const animatedScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      if (scrollY) scrollY.value = event.contentOffset.y;
+      if (onScroll) {
+        onScroll = onScroll as ReanimatedOnScroll;
+        onScroll(event);
+      }
+    },
+  });
+
+  if (context && refScrollView)
+    context.scrollableComponentRef.current = refScrollView.current;
+
+  const assignRef = () => {
+    if (!context) return;
+    if (!context.scrollableComponentRef.current && refScrollView)
+      context.scrollableComponentRef.current = refScrollView.current;
+  };
+
+  return {
+    context,
+    onScroll,
+    assignRef,
+    refScrollView,
+    scrollViewProps,
+    animatedScrollHandler,
+  };
+}

package/src/BottomSheet/controller/bottomSheet.controller.ts

@@ -0,0 +1,238 @@
+import { useDragAnimation } from '../animations/drag.animation';
+import {
+  runOnUI,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ModalState,
+  type BottomSheetModalProps,
+  type ScrollComponentRefProps,
+  type SnapPoint,
+} from '../config/bottomSheet.types';
+import { keyboardAnimationController } from './keyboardAnimation.controller';
+import { dragAnimationController } from './dragAnimation.controller';
+import { callbackController } from './callbacks.controller';
+import { scrollContentController } from './scrollContent.controller';
+import { strToNumPercentage } from '@shaquillehinds/react-native-essentials';
+import { useBottomSheetUtils } from './hooks/useBottomSheetUtils';
+
+export function bottomSheetController(props: BottomSheetModalProps) {
+  const utils = useBottomSheetUtils();
+
+  const modalState = useRef(ModalState.CLOSED);
+  const fullyOpenYPosition = useSharedValue(0);
+  const lowestSnapPointPosition = useSharedValue(0);
+  const closedYPosition = useSharedValue(0);
+
+  const currentSnapPoint = useSharedValue<SnapPoint>({
+    offset: 0,
+  });
+  const snapPoints = useSharedValue<SnapPoint[]>(
+    (props.snapPoints || []).map((p) => utils.percentageToSnapPoint(p))
+  );
+
+  const translationX = useSharedValue(0);
+  const translationY = useSharedValue(0);
+  const prevTranslationY = useSharedValue(0);
+
+  const keyboardHeight = useSharedValue(0);
+
+  const backdropOpacity = useSharedValue(0);
+  const contentOpacity = useSharedValue(0);
+  const modalContentTranslateY = useSharedValue(0);
+
+  const scrollY = useSharedValue(0);
+  const scrollActive = useSharedValue(false);
+  const inverted = useSharedValue(false);
+  const maxScrollOffset = useSharedValue(0);
+
+  const scrollableComponentRef = useRef<ScrollComponentRefProps>(null);
+
+  const disableLayoutAnimation = useRef(false);
+  const setDisableLayoutAnimation = useCallback((bool: boolean) => {
+    disableLayoutAnimation.current = bool;
+  }, []);
+
+  const backdropOpacityStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+  const contentOpacityStyle = useAnimatedStyle(() => ({
+    opacity: contentOpacity.value,
+  }));
+  const modalContentAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: modalContentTranslateY.value }],
+  }));
+  const { dragAnimatedStyle, onDrag, onDragStart } = useDragAnimation({
+    translationX,
+    translationY,
+    prevTranslationY,
+  });
+
+  const {
+    closeModal,
+    animateModalOpen,
+    animateModalClose,
+    animateToPercentage,
+    animateToSnapPointIndex,
+    onModalBackdropPress,
+    onModalContentLayout,
+    onPlatformViewLayout,
+    onRequestClose,
+  } = callbackController({
+    utils,
+    unMounter: props._unMounter,
+    snapPoints,
+    modalState,
+    translationX,
+    translationY,
+    onBackDropPress: props.onBackDropPress,
+    backdropOpacity,
+    closedYPosition,
+    currentSnapPoint,
+    prevTranslationY,
+    fullyOpenYPosition,
+    disableLayoutAnimation,
+    setDisableLayoutAnimation,
+    onSnapPointReach: props.onSnapPointReach,
+    disableCloseOnBackdropPress: props.disableCloseOnBackdropPress,
+    setShowModal: props.setShowModal,
+  });
+
+  const [modalDimensionsStyle, setModalDimensionsStyle] = useState({
+    width: utils.screenWidth,
+    height: utils.modalHeight,
+    bottom: utils.modalBottomOffset,
+  });
+
+  useEffect(() => {
+    const percentToSnapPoint = (p: string | number) => {
+      const percentage = strToNumPercentage(p);
+      return {
+        percentage: percentage / 100,
+        offset: -(utils.relativeY(percentage) + utils.extraHeight),
+      };
+    };
+    const newSnapPoints = (props.snapPoints || []).map((p) =>
+      percentToSnapPoint(p)
+    );
+    snapPoints.value = newSnapPoints;
+    setModalDimensionsStyle({
+      height: utils.modalHeight,
+      bottom: -utils.modalHeight * 2,
+      width: utils.relativeX(100),
+    });
+    if (newSnapPoints.length) {
+      const { firstSnapPoint, maxSnapPoint, minSnapPoint } =
+        utils.getMaxMinSnapPoints(newSnapPoints);
+      currentSnapPoint.value = firstSnapPoint;
+      fullyOpenYPosition.value = maxSnapPoint;
+      lowestSnapPointPosition.value = minSnapPoint;
+      setTimeout(() => {
+        if (!modalState.current || modalState.current === ModalState.CLOSING)
+          return;
+        animateToSnapPointIndex(0);
+      }, 500);
+    }
+  }, [utils.orientation]);
+
+  const { onDragEndGesture, onDragGesture, onDragStartGesture } =
+    dragAnimationController({
+      onDrag,
+      onDragStart,
+      closeModal,
+      snapPoints,
+      currentSnapPoint,
+      keyboardHeight,
+      translationY,
+      prevTranslationY,
+      closedYPosition,
+      fullyOpenYPosition,
+      backdropOpacity,
+      keepMounted: props.keepMounted,
+      onSnapPointReach: props.onSnapPointReach,
+      lowestSnapPointPosition,
+      allowDragWhileKeyboardVisible: props.allowDragWhileKeyboardVisible,
+    });
+
+  keyboardAnimationController({
+    keyboardHeight,
+    translationY,
+    screenHeight: utils.screenHeight,
+    prevTranslationY,
+    modalContentTranslateY,
+    setDisableLayoutAnimation,
+    avoidKeyboard: props.avoidKeyboard,
+    inputsForKeyboardToAvoid: props.inputsForKeyboardToAvoid,
+  });
+
+  const { onBeginScroll, onUpdateScroll, onEndScroll } =
+    scrollContentController({
+      scrollableComponentRef,
+      onDragStartGesture,
+      onDragGesture,
+      onDragEndGesture,
+      maxScrollOffset,
+      scrollActive,
+      inverted,
+      scrollY,
+    });
+
+  useEffect(() => {
+    const animateContentDelay = () => {
+      if (props.showContentDelay) {
+        setTimeout(() => {
+          contentOpacity.value = withTiming(1, { duration: 500 });
+        }, props.showContentDelay.timeInMilliSecs);
+      }
+    };
+    if (props.showModal === undefined) animateContentDelay();
+    else if (!props.showModal && !disableLayoutAnimation.current) {
+      setDisableLayoutAnimation(true);
+      runOnUI(animateModalClose)();
+    } else if (props.showModal) animateContentDelay();
+  }, [props.showModal]);
+
+  return {
+    modalState,
+
+    scrollY,
+    inverted,
+    onEndScroll,
+    onBeginScroll,
+    onUpdateScroll,
+    maxScrollOffset,
+    scrollableComponentRef,
+
+    disableLayoutAnimation,
+
+    animateModalOpen,
+    animateModalClose,
+    animateToPercentage,
+    animateToSnapPointIndex,
+
+    onDragGesture,
+    onDragStartGesture,
+    onDragEndGesture,
+
+    onPlatformViewLayout,
+    onModalContentLayout,
+
+    onRequestClose,
+    onModalBackdropPress,
+
+    dragAnimatedStyle,
+    modalContentAnimatedStyle,
+    backdropOpacityStyle,
+    contentOpacityStyle,
+    modalDimensionsStyle,
+
+    screenHeight: utils.screenHeight,
+  };
+}
+
+export type BottomSheetControllerReturn = ReturnType<
+  typeof bottomSheetController
+>;