@shaquillehinds/react-native-bottom-sheet 0.0.1

package/src/BottomSheet/controller/keyboardAnimation.controller.ts

@@ -0,0 +1,148 @@
+import { useCallback, useRef } from 'react';
+import { runOnUI, type SharedValue, withTiming } from 'react-native-reanimated';
+import {
+  closeKeyboardTimingConfig,
+  openKeyboardTimingConfig,
+} from '../config/bottomSheet.constants';
+import { type KeyboardEvent, type TextInput } from 'react-native';
+import {
+  isAndroid,
+  isIOS,
+  useKeyboardListeners,
+  wait,
+} from '@shaquillehinds/react-native-essentials';
+
+type UseKeyboardAnimationProps = {
+  avoidKeyboard?: boolean;
+  screenHeight: number;
+  inputsForKeyboardToAvoid?: React.RefObject<TextInput>[];
+  keyboardHeight: SharedValue<number>;
+  translationY: SharedValue<number>;
+  prevTranslationY: SharedValue<number>;
+  modalContentTranslateY: SharedValue<number>;
+  setDisableLayoutAnimation: (bool: boolean) => void;
+};
+
+export function keyboardAnimationController(props: UseKeyboardAnimationProps) {
+  const {
+    translationY,
+    prevTranslationY,
+    modalContentTranslateY,
+    keyboardHeight,
+  } = props;
+
+  const keyboardHeightRef = useRef(0);
+
+  const setKeyboardHeight = useCallback((height: number) => {
+    keyboardHeight.value = height;
+    keyboardHeightRef.current = height;
+  }, []);
+
+  const adjustForKeyboardHeight = useCallback(
+    (
+      currentKeyboardHeight: number,
+      previousKeyboardHeight: number,
+      screenHeight: number
+    ) => {
+      'worklet';
+      const maxModalY = screenHeight * -1;
+      if (currentKeyboardHeight > 10) {
+        if (translationY.value <= maxModalY) {
+          modalContentTranslateY.value = withTiming(
+            -currentKeyboardHeight,
+            openKeyboardTimingConfig
+          );
+        } else {
+          const maxGap = maxModalY - translationY.value;
+          const height = translationY.value - currentKeyboardHeight;
+          if (height < maxModalY) {
+            const modalShift = translationY.value + maxGap;
+            translationY.value = withTiming(
+              modalShift,
+              openKeyboardTimingConfig
+            );
+            prevTranslationY.value = modalShift;
+            modalContentTranslateY.value = withTiming(
+              -currentKeyboardHeight - maxGap,
+              openKeyboardTimingConfig
+            );
+          } else {
+            translationY.value = withTiming(height, openKeyboardTimingConfig);
+            prevTranslationY.value = height;
+          }
+        }
+      } else {
+        const newTranslationY =
+          translationY.value +
+          (previousKeyboardHeight + modalContentTranslateY.value);
+        translationY.value = withTiming(
+          newTranslationY,
+          closeKeyboardTimingConfig
+        );
+        prevTranslationY.value = newTranslationY;
+        modalContentTranslateY.value = withTiming(0, closeKeyboardTimingConfig);
+      }
+    },
+    []
+  );
+
+  const keyBoardShowListener = useCallback(
+    async (e: KeyboardEvent, shouldAdjust?: boolean) => {
+      await wait(10);
+      if (keyboardHeightRef.current) return;
+      setKeyboardHeight(e.endCoordinates.height);
+      if (!shouldAdjust) return;
+      if (
+        props.inputsForKeyboardToAvoid &&
+        !props.inputsForKeyboardToAvoid.find((input) => {
+          return input.current?.isFocused();
+        })
+      )
+        return;
+      props.setDisableLayoutAnimation(true);
+      runOnUI(adjustForKeyboardHeight)(
+        keyboardHeightRef.current,
+        0,
+        props.screenHeight
+      );
+    },
+    [props.screenHeight]
+  );
+
+  const keyboardHideListener = useCallback(
+    async (shouldAdjust?: boolean) => {
+      if (!keyboardHeightRef.current) return;
+      const previousKeyboardHeight = keyboardHeightRef.current;
+      setKeyboardHeight(0);
+      if (!shouldAdjust) return;
+      props.setDisableLayoutAnimation(false);
+      runOnUI(adjustForKeyboardHeight)(
+        keyboardHeightRef.current,
+        previousKeyboardHeight,
+        props.screenHeight
+      );
+    },
+    [props.screenHeight]
+  );
+
+  const shouldAdjustForKeyboard = !!(
+    props.avoidKeyboard || props.inputsForKeyboardToAvoid?.length
+  );
+  useKeyboardListeners({
+    listeners: {
+      keyboardWillShow: (e) => {
+        isIOS && keyBoardShowListener(e, shouldAdjustForKeyboard);
+      },
+      keyboardWillHide: () => {
+        isIOS && keyboardHideListener(shouldAdjustForKeyboard);
+      },
+      keyboardDidShow: (e) => {
+        isAndroid && keyBoardShowListener(e, shouldAdjustForKeyboard);
+      },
+      keyboardDidHide: async () => {
+        isAndroid && keyboardHideListener(shouldAdjustForKeyboard);
+      },
+    },
+    subscribeCondition: () => true,
+  });
+}

package/src/BottomSheet/controller/scrollContent.controller.ts

@@ -0,0 +1,120 @@
+//$lf-ignore
+import {
+  runOnJS,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+import type { DragGestureProps } from '@shaquillehinds/react-native-essentials';
+import type { ScrollComponentRef } from '../config/bottomSheet.types';
+import { useCallback } from 'react';
+
+type ScrollContentControllerType = {
+  scrollY: SharedValue<number>;
+  maxScrollOffset: SharedValue<number>;
+  inverted: SharedValue<boolean>;
+  scrollActive: SharedValue<boolean>;
+  onDragStartGesture: (
+    e: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onDragEndGesture: (
+    e: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onDragGesture: (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+  scrollableComponentRef?: ScrollComponentRef;
+};
+
+export function scrollContentController({
+  scrollActive,
+  scrollY,
+  onDragStartGesture,
+  onDragEndGesture,
+  onDragGesture,
+  maxScrollOffset,
+  inverted,
+  scrollableComponentRef,
+}: ScrollContentControllerType) {
+  const enableScroll = (scrollEnabled: boolean, timeout?: number) => {
+    if (timeout)
+      setTimeout(
+        () =>
+          scrollableComponentRef?.current?.setNativeProps({ scrollEnabled }),
+        timeout
+      );
+    else scrollableComponentRef?.current?.setNativeProps({ scrollEnabled });
+  };
+  const dragEnabled = useSharedValue(false);
+  const initDragPos = useSharedValue(0);
+  const beginDragInit = useSharedValue(false);
+
+  const scrollEnabled = useSharedValue(true);
+
+  const onBeginScroll: DragGestureProps['onDragStart'] = useCallback((e) => {
+    'worklet';
+    const maxPositionFromTopToEnableScroll = 15;
+    const isPositionFarFromTop = inverted.value
+      ? scrollY.value < maxScrollOffset.value - maxPositionFromTopToEnableScroll
+      : scrollY.value > maxPositionFromTopToEnableScroll;
+
+    if (isPositionFarFromTop) {
+      scrollActive.value = true;
+    } else {
+      beginDragInit.value = true;
+      onDragStartGesture(e);
+    }
+  }, []);
+  const onUpdateScroll: DragGestureProps['onDrag'] = useCallback(
+    (e) => {
+      'worklet';
+      if (scrollActive.value) return;
+      if (dragEnabled.value) {
+        if (scrollEnabled.value) {
+          if (e.translationY < initDragPos.value) {
+            scrollEnabled.value = false;
+            runOnJS(enableScroll)(false);
+          }
+          initDragPos.value = e.translationY;
+        }
+        return onDragGesture(e);
+      }
+      if (beginDragInit.value) {
+        beginDragInit.value = false;
+        return;
+      }
+      if (
+        e.translationY > -400 &&
+        (inverted.value
+          ? Math.round(scrollY.value) >= Math.round(maxScrollOffset.value)
+          : scrollY.value <= 0)
+      ) {
+        if (!dragEnabled.value) {
+          initDragPos.value = e.translationY;
+          dragEnabled.value = true;
+          onDragGesture(e);
+        }
+      } else if (scrollY.value > 0) {
+        scrollActive.value = true;
+      }
+    },
+    [enableScroll]
+  );
+  const onEndScroll: NonNullable<DragGestureProps['onDragEnd']> = useCallback(
+    (e) => {
+      'worklet';
+      if (!scrollActive.value) {
+        onDragEndGesture(e);
+        runOnJS(enableScroll)(true);
+      } else runOnJS(enableScroll)(true);
+      scrollActive.value = false;
+      dragEnabled.value = false;
+      scrollEnabled.value = true;
+    },
+    [enableScroll]
+  );
+
+  return { onBeginScroll, onUpdateScroll, onEndScroll };
+}

package/src/BottomSheet/index.tsx

@@ -0,0 +1,139 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type PropsWithChildren,
+} from 'react';
+import { BottomSheetModal as BottomSheetModalComponent } from './components/BottomSheetModal';
+import {
+  type BottomSheetProps,
+  type BottomSheetModalProps,
+  type BottomModalRefObject,
+  type BottomSheetRefObject,
+  type BottomModalContextProps,
+} from './config/bottomSheet.types';
+import { BottomSheet as BottomSheetComponent } from './components/BottomSheet';
+import { BottomSheetFlatlist } from './components/BottomSheetFlatlist';
+import { BottomSheetScrollView } from './components/BottomSheetScrollView';
+import { bottomSheetController } from './controller';
+import { useBottomSheetRef as useBottomSheetRefs } from './controller/hooks/useBottomSheetRef';
+import { animateCloseTimingConfig } from './config/bottomSheet.constants';
+import {
+  usePortalComponent,
+  ComponentMounter,
+  ModalWrapper,
+} from '@shaquillehinds/react-native-essentials';
+
+export const BottomModalContext = createContext<BottomModalContextProps | null>(
+  null
+);
+
+const BottomSheetModal = forwardRef(
+  (
+    props: PropsWithChildren<BottomSheetModalProps>,
+    ref: BottomModalRefObject
+  ) => {
+    const { mounterRef, sheetRef, modalRef } = useBottomSheetRefs({
+      ref,
+      showModal: props.showModal,
+      setShowModal: props.setShowModal,
+    });
+    const Modal = (
+      <BottomModalContext.Provider value={{ modalRef }}>
+        <ComponentMounter
+          ref={mounterRef}
+          showComponent={props.showModal}
+          setShowComponent={props.setShowModal}
+          unMountDelayInMilliSeconds={animateCloseTimingConfig.duration}
+          onComponentShow={props.onModalShow}
+          onComponentClose={props.onModalClose}
+          component={
+            <BottomSheetModalComponent
+              {...props}
+              _unMounter={() => mounterRef.current?.unMountComponent()}
+              ref={sheetRef}
+            />
+          }
+        />
+      </BottomModalContext.Provider>
+    );
+    const portal = usePortalComponent({
+      Component: Modal,
+      name: 'smooth-bottom-modal',
+      disable: props.disablePortal || props.useNativeModal,
+      CustomPortalContext: props.CustomPortalContext,
+    });
+    if (portal && !props.disablePortal && !props.useNativeModal) {
+      return <></>;
+    } else {
+      return Modal;
+    }
+  }
+);
+
+const BottomSheetControl = forwardRef(
+  (props: PropsWithChildren<BottomSheetProps>, ref: BottomSheetRefObject) => {
+    const controller = bottomSheetController(props);
+    return (
+      <ModalWrapper enableBackgroundContentPress>
+        <BottomSheetComponent {...props} controller={controller} ref={ref} />
+      </ModalWrapper>
+    );
+  }
+);
+
+const BottomSheet = forwardRef(
+  (
+    props: PropsWithChildren<BottomSheetModalProps>,
+    ref: BottomModalRefObject
+  ) => {
+    const { mounterRef, sheetRef, modalRef } = useBottomSheetRefs({
+      ref,
+      showModal: props.showModal,
+      setShowModal: props.setShowModal,
+    });
+    const Modal = (
+      <BottomModalContext.Provider value={{ modalRef }}>
+        <ComponentMounter
+          ref={mounterRef}
+          showComponent={props.showModal}
+          setShowComponent={props.setShowModal}
+          unMountDelayInMilliSeconds={animateCloseTimingConfig.duration}
+          onComponentShow={props.onModalShow}
+          onComponentClose={props.onModalClose}
+          component={
+            <BottomSheetControl
+              {...props}
+              _unMounter={() => mounterRef.current?.unMountComponent()}
+              ref={sheetRef}
+            />
+          }
+        />
+      </BottomModalContext.Provider>
+    );
+    const portal = usePortalComponent({
+      Component: Modal,
+      name: 'smooth-bottom-modal',
+      disable: props.disablePortal || props.useNativeModal,
+      CustomPortalContext: props.CustomPortalContext,
+    });
+    if (portal && !props.disablePortal && !props.useNativeModal) {
+      return <></>;
+    } else {
+      return Modal;
+    }
+  }
+);
+
+const useBottomSheetRef = () => {
+  const context = useContext(BottomModalContext);
+  return { modalRef: context?.modalRef };
+};
+
+export {
+  BottomSheet,
+  BottomSheetModal,
+  BottomSheetFlatlist,
+  BottomSheetScrollView,
+  useBottomSheetRef,
+};

package/src/index.tsx

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