@react-native-ama/bottom-sheet 2.0.0-beta.0

package/src/hooks/useKeyboard.test.ts

@@ -0,0 +1,137 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { useKeyboard } from './useKeyboard';
+
+const rn = jest.requireMock('react-native');
+const reanimated = jest.requireMock('react-native-reanimated');
+
+// Easing is not in the jest.setup.js reanimated mock — patch it before tests run
+const mockEasingFn = jest.fn(() => jest.fn());
+beforeAll(() => {
+  reanimated.Easing = {
+    in: mockEasingFn,
+    out: mockEasingFn,
+    inOut: mockEasingFn,
+    ease: jest.fn(),
+    linear: jest.fn(),
+  };
+});
+
+type KeyboardCallback = (event: any) => void;
+
+let showCallback: KeyboardCallback | null = null;
+let hideCallback: KeyboardCallback | null = null;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  showCallback = null;
+  hideCallback = null;
+
+  rn.Keyboard.addListener = jest.fn((event: string, cb: KeyboardCallback) => {
+    if (event === 'keyboardWillShow' || event === 'keyboardDidShow') {
+      showCallback = cb;
+    } else if (event === 'keyboardWillHide' || event === 'keyboardDidHide') {
+      hideCallback = cb;
+    }
+    return { remove: jest.fn() };
+  });
+});
+
+const makeKeyboardEvent = (height: number, easing: string, duration: number) => ({
+  endCoordinates: { height },
+  duration,
+  easing,
+});
+
+describe('useKeyboard', () => {
+  it('does not register keyboard listeners when shouldHandleKeyboardEvents is false', () => {
+    renderHook(() => useKeyboard(false));
+    expect(rn.Keyboard.addListener).not.toHaveBeenCalled();
+  });
+
+  it('registers keyboard show and hide listeners when shouldHandleKeyboardEvents is true', () => {
+    renderHook(() => useKeyboard(true));
+    expect(rn.Keyboard.addListener).toHaveBeenCalledTimes(2);
+  });
+
+  it('updates keyboardHeight and isKeyboardVisible when keyboard shows', () => {
+    const { result } = renderHook(() => useKeyboard(true));
+
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'easeIn', 250));
+    });
+
+    expect(reanimated.withTiming).toHaveBeenCalledWith(300, expect.any(Object));
+    expect(result.current.keyboardFinalHeight.value).toBe(300);
+    expect(result.current.isKeyboardVisible.value).toBe(true);
+  });
+
+  it('resets keyboardHeight when keyboard hides', () => {
+    const { result } = renderHook(() => useKeyboard(true));
+
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'easeOut', 250));
+    });
+
+    act(() => {
+      hideCallback?.(makeKeyboardEvent(300, 'linear', 200));
+    });
+
+    expect(result.current.keyboardFinalHeight.value).toBe(0);
+    expect(result.current.isKeyboardVisible.value).toBe(false);
+  });
+
+  it('removes listeners on unmount', () => {
+    const removeMock = jest.fn();
+    rn.Keyboard.addListener = jest.fn(() => ({ remove: removeMock }));
+
+    const { unmount } = renderHook(() => useKeyboard(true));
+    unmount();
+
+    expect(removeMock).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('getKeyboardAnimationConfigs easing variants', () => {
+  it('uses easeIn config', () => {
+    renderHook(() => useKeyboard(true));
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'easeIn', 250));
+    });
+    expect(reanimated.withTiming).toHaveBeenCalledWith(300, expect.objectContaining({ duration: 250 }));
+  });
+
+  it('uses easeOut config', () => {
+    renderHook(() => useKeyboard(true));
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'easeOut', 200));
+    });
+    expect(reanimated.withTiming).toHaveBeenCalledWith(300, expect.objectContaining({ duration: 200 }));
+  });
+
+  it('uses easeInEaseOut config', () => {
+    renderHook(() => useKeyboard(true));
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'easeInEaseOut', 300));
+    });
+    expect(reanimated.withTiming).toHaveBeenCalledWith(300, expect.objectContaining({ duration: 300 }));
+  });
+
+  it('uses linear config', () => {
+    renderHook(() => useKeyboard(true));
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'linear', 150));
+    });
+    expect(reanimated.withTiming).toHaveBeenCalledWith(300, expect.objectContaining({ duration: 150 }));
+  });
+
+  it('uses keyboard spring config', () => {
+    renderHook(() => useKeyboard(true));
+    act(() => {
+      showCallback?.(makeKeyboardEvent(300, 'keyboard', 400));
+    });
+    expect(reanimated.withTiming).toHaveBeenCalledWith(
+      300,
+      expect.objectContaining({ damping: 500, stiffness: 1000 }),
+    );
+  });
+});

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,130 @@
+/*
+ * Based on: https://github.com/gorhom/react-native-bottom-sheet
+ */
+import { useCallback, useEffect } from 'react';
+import {
+  Keyboard,
+  KeyboardEvent,
+  KeyboardEventEasing,
+  KeyboardEventName,
+  Platform,
+} from 'react-native';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+
+const KEYBOARD_EVENT_SHOW: KeyboardEventName = Platform.select({
+  ios: 'keyboardWillShow',
+  default: 'keyboardDidShow',
+});
+
+const KEYBOARD_EVENT_HIDE: KeyboardEventName = Platform.select({
+  ios: 'keyboardWillHide',
+  default: 'keyboardDidHide',
+});
+
+export const useKeyboard = (shouldHandleKeyboardEvents: boolean = true) => {
+  const keyboardHeight = useSharedValue(0);
+  const keyboardFinalHeight = useSharedValue(0);
+  const isKeyboardVisible = useSharedValue(false);
+
+  const handleKeyboardEvent = useCallback(
+    (
+      isVisible: boolean,
+      endCoordinatesHeight: number,
+      duration: number,
+      easing: KeyboardEventEasing,
+    ) => {
+      const finalHeight = isVisible ? endCoordinatesHeight : 0;
+
+      const animationConfig = getKeyboardAnimationConfigs(easing, duration);
+
+      keyboardFinalHeight.value = finalHeight;
+      keyboardHeight.value = withTiming(
+        isVisible ? finalHeight : 0,
+        animationConfig,
+      );
+      isKeyboardVisible.value = isVisible;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
+    if (!shouldHandleKeyboardEvents) {
+      return;
+    }
+
+    const handleEvent = (isVisible: boolean) => {
+      return (event: KeyboardEvent) => {
+        return handleKeyboardEvent(
+          isVisible,
+          event.endCoordinates.height,
+          event.duration,
+          event.easing,
+        );
+      };
+    };
+
+    const showSubscription = Keyboard.addListener(
+      KEYBOARD_EVENT_SHOW,
+      handleEvent(true),
+    );
+
+    const hideSubscription = Keyboard.addListener(
+      KEYBOARD_EVENT_HIDE,
+      handleEvent(false),
+    );
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [handleKeyboardEvent, shouldHandleKeyboardEvents]);
+
+  return {
+    keyboardHeight,
+    keyboardFinalHeight,
+    isKeyboardVisible,
+  };
+};
+
+const getKeyboardAnimationConfigs = (
+  easing: KeyboardEventEasing,
+  duration: number,
+) => {
+  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,
+        duration,
+      };
+  }
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+// Components
+export { BottomSheet } from './components/BottomSheet';
+
+// Hooks
+export { useBottomSheetGestureHandler } from './hooks/useBottomSheetGestureHandler';
+export { useKeyboard } from './hooks/useKeyboard';