swap out the old library with react-native-keyboard-controller

Author: edison-cy-yang

packages/components-native/src/Form/Form.test.tsx

@@ -32,14 +32,14 @@ const onChangeMock = jest.fn();
 const onChangeSelectMock = jest.fn();
 const onChangeSwitchMock = jest.fn();
 
-const mockScrollToPosition = jest.fn();
+const mockScrollTo = jest.fn();
 const mockScrollToTop = jest.fn();
 
 jest.mock("./hooks/useFormViewRefs", () => ({
   useFormViewRefs: () => {
     return {
       scrollViewRef: {
-        current: { scrollToPosition: mockScrollToPosition },
+        current: { scrollTo: mockScrollTo },
       },
       bottomViewRef: { current: {} },
       scrollToTop: mockScrollToTop,

packages/components-native/src/Form/Form.tsx

@@ -1,7 +1,11 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import type { FieldValues } from "react-hook-form";
 import { FormProvider } from "react-hook-form";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import {
+  KeyboardAwareScrollView,
+  KeyboardEvents,
+} from "react-native-keyboard-controller";
+import type { KeyboardEventData } from "react-native-keyboard-controller";
 import type { LayoutChangeEvent } from "react-native";
 import { Keyboard, Platform, View, findNodeHandle } from "react-native";
 import { useStyles } from "./Form.style";
@@ -117,21 +121,54 @@ function InternalForm<T extends FieldValues, S>({
     formState: formMethods.formState,
     refNode: findNodeHandle(scrollViewRef.current),
     setFocus: formMethods.setFocus,
-    scrollToPosition: scrollViewRef.current?.scrollToPosition,
+    scrollTo: scrollViewRef.current?.scrollTo,
   });
 
   const handleOfflineSubmit = useOfflineHandler();
 
-  const keyboardProps = Platform.select({
-    ios: {
-      onKeyboardWillHide: handleKeyboardHide,
-      onKeyboardWillShow: handleKeyboardShow,
+  const handleKeyboardShow = useCallback(
+    (event: KeyboardEventData) => {
+      setKeyboardHeight(event.height);
+      setKeyboardScreenY(windowHeight - event.height);
     },
-    android: {
-      onKeyboardDidHide: handleKeyboardHide,
-      onKeyboardDidShow: handleKeyboardShow,
-    },
-  });
+    [windowHeight],
+  );
+
+  const handleKeyboardHide = useCallback(() => {
+    bottomViewRef?.current?.measureInWindow(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      (_x: number, y: number, _width: number, _height: number) => {
+        // This fixes extra whitespace below the form if it was scrolled down while the keyboard was open
+        // i.e. a View below the form is higher than the bottom of the window
+        if (y < windowHeight) {
+          scrollViewRef?.current?.scrollToEnd();
+        }
+      },
+    );
+    setKeyboardHeight(0);
+    setKeyboardScreenY(0);
+  }, [bottomViewRef, scrollViewRef, windowHeight]);
+
+  useEffect(() => {
+    const showEvent =
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent =
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showListener = KeyboardEvents.addListener(
+      showEvent,
+      handleKeyboardShow,
+    );
+    const hideListener = KeyboardEvents.addListener(
+      hideEvent,
+      handleKeyboardHide,
+    );
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, [handleKeyboardHide, handleKeyboardShow]);
 
   const onLayout = (event: LayoutChangeEvent) => {
     setMessageBannerHeight(event.nativeEvent.layout.height);
@@ -166,17 +203,12 @@ function InternalForm<T extends FieldValues, S>({
           saveButtonOffset={saveButtonOffset}
         >
           <KeyboardAwareScrollView
-            enableResetScrollToCoords={false}
-            enableAutomaticScroll={!disableKeyboardAwareScroll}
-            enableOnAndroid={edgeToEdgeEnabled}
-            keyboardOpeningTime={
-              Platform.OS === "ios" ? tokens["timing-slowest"] : 0
-            }
+            disableScrollOnKeyboardHide={true}
+            enabled={!disableKeyboardAwareScroll}
             keyboardShouldPersistTaps={"handled"}
             ref={scrollViewRef}
-            {...keyboardProps}
-            extraHeight={headerHeight}
-            extraScrollHeight={edgeToEdgeEnabled ? tokens["space-large"] : 0}
+            bottomOffset={headerHeight}
+            extraKeyboardSpace={edgeToEdgeEnabled ? tokens["space-large"] : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }
@@ -235,26 +267,6 @@ function InternalForm<T extends FieldValues, S>({
   );
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function handleKeyboardShow(frames: Record<string, any>) {
-    setKeyboardScreenY(frames.endCoordinates.screenY);
-    setKeyboardHeight(frames.endCoordinates.height);
-  }
-
-  function handleKeyboardHide() {
-    bottomViewRef?.current?.measureInWindow(
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (_x: number, y: number, _width: number, _height: number) => {
-        // This fixes extra whitespace below the form if it was scrolled down while the keyboard was open
-        // i.e. a View below the form is higher than the bottom of the window
-        if (y < windowHeight) {
-          scrollViewRef?.current?.scrollToEnd();
-        }
-      },
-    );
-    setKeyboardHeight(0);
-    setKeyboardScreenY(0);
-  }
-
   async function internalSubmit(data: FormValues<T>) {
     let performSubmit = true;
 

packages/components-native/src/Form/hooks/useFormViewRefs.ts

@@ -1,19 +1,19 @@
 import type { RefObject } from "react";
 import { useCallback, useRef } from "react";
 import type { View } from "react-native";
-import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
 
 interface UseFormViewRefsReturn {
-  readonly scrollViewRef: RefObject<KeyboardAwareScrollView | null>;
+  readonly scrollViewRef: RefObject<KeyboardAwareScrollViewRef | null>;
   readonly bottomViewRef: RefObject<View | null>;
   readonly scrollToTop: () => void;
 }
 
 export function useFormViewRefs(): UseFormViewRefsReturn {
-  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
+  const scrollViewRef = useRef<KeyboardAwareScrollViewRef>(null);
   const bottomViewRef = useRef<View>(null);
   const scrollToTop = useCallback(() => {
-    scrollViewRef.current?.scrollToPosition(0, 0);
+    scrollViewRef.current?.scrollTo({ x: 0, y: 0, animated: true });
   }, [scrollViewRef]);
 
   return {

packages/components-native/src/Form/hooks/useInternalForm.ts

@@ -6,7 +6,7 @@ import type {
 } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type { RefObject } from "react";
-import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
 import type { InternalFormProps } from "../types";
@@ -22,7 +22,7 @@ type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<
   | "localCacheId"
   | "UNSAFE_allowDiscardLocalCacheWhenOffline"
 > & {
-  scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
+  scrollViewRef?: RefObject<KeyboardAwareScrollViewRef | null>;
   readonly saveButtonHeight: number;
   readonly messageBannerHeight: number;
 };

packages/components-native/src/Form/hooks/useScrollToError/useScrollToError.test.tsx

@@ -1,8 +1,14 @@
 import { renderHook } from "@testing-library/react-native";
+import type { FieldValues, FormState } from "react-hook-form";
 import { useScrollToError } from "./useScrollToError";
+import type { UseScrollToErrorParams } from "./useScrollToError";
 
-const mockFormState = {
+const mockFormState: FormState<FieldValues> = {
   isDirty: true,
+  isLoading: false,
+  isReady: true,
+  disabled: false,
+  validatingFields: {},
   dirtyFields: {},
   isSubmitted: false,
   isSubmitSuccessful: false,
@@ -33,38 +39,47 @@ jest.mock("../../../ErrorMessageWrapper", () => ({
   }),
 }));
 
-const handleScrollToPosition = jest.fn();
+const handleScrollTo = jest.fn();
 const handleSetFocus = jest.fn();
 
-const initialProps = {
+type UseScrollToErrorProps = UseScrollToErrorParams<FieldValues>;
+
+const initialProps: UseScrollToErrorProps = {
   formState: mockFormState,
   refNode: 1,
-  scrollToPosition: handleScrollToPosition,
+  scrollTo: handleScrollTo,
   setFocus: handleSetFocus,
 };
 
 afterEach(() => {
-  handleScrollToPosition.mockClear();
+  handleScrollTo.mockClear();
   handleSetFocus.mockClear();
 });
 
 describe("useScrollToError", () => {
   it("should do nothing if everything is valid", () => {
-    renderHook(useScrollToError, { initialProps });
+    renderHook((props: UseScrollToErrorProps) => useScrollToError(props), {
+      initialProps,
+    });
 
     expect(handleSetFocus).not.toHaveBeenCalled();
-    expect(handleScrollToPosition).not.toHaveBeenCalled();
+    expect(handleScrollTo).not.toHaveBeenCalled();
   });
 
   it("should focus with RHF if it can", () => {
-    const { rerender } = renderHook(useScrollToError, { initialProps });
+    const { rerender } = renderHook(
+      (props: UseScrollToErrorProps) => useScrollToError(props),
+      {
+        initialProps,
+      },
+    );
     rerender({
       ...initialProps,
       formState: { ...mockFormState, isValid: false, submitCount: 1 },
     });
 
     expect(handleSetFocus).toHaveBeenCalled();
-    expect(handleScrollToPosition).not.toHaveBeenCalled();
+    expect(handleScrollTo).not.toHaveBeenCalled();
   });
 
   it("should manually scroll", () => {
@@ -74,31 +89,39 @@ describe("useScrollToError", () => {
     const failedSetFocus = jest.fn(() => failingFn());
     const manualScrollProps = { ...initialProps, setFocus: failedSetFocus };
 
-    const { rerender } = renderHook(useScrollToError, {
-      initialProps: manualScrollProps,
-    });
+    const { rerender } = renderHook(
+      (props: UseScrollToErrorProps) => useScrollToError(props),
+      {
+        initialProps: manualScrollProps,
+      },
+    );
     rerender({
       ...manualScrollProps,
       formState: { ...mockFormState, isValid: false, submitCount: 1 },
     });
 
     expect(failedSetFocus).toHaveBeenCalled();
     expect(failedSetFocus).toThrow();
-    expect(handleScrollToPosition).toHaveBeenCalled();
+    expect(handleScrollTo).toHaveBeenCalled();
   });
 
   describe("With screen readers", () => {
     it("should not fire the setFocus", () => {
       mockScreenReaderEnabled.mockReturnValue(true);
 
-      const { rerender } = renderHook(useScrollToError, { initialProps });
+      const { rerender } = renderHook(
+        (props: UseScrollToErrorProps) => useScrollToError(props),
+        {
+          initialProps,
+        },
+      );
       rerender({
         ...initialProps,
         formState: { ...mockFormState, isValid: false, submitCount: 1 },
       });
 
       expect(handleSetFocus).not.toHaveBeenCalled();
-      expect(handleScrollToPosition).toHaveBeenCalled();
+      expect(handleScrollTo).toHaveBeenCalled();
     });
   });
 });

packages/components-native/src/Form/hooks/useScrollToError/useScrollToError.ts

@@ -5,24 +5,24 @@ import type {
   Path,
   UseFormSetFocus,
 } from "react-hook-form";
-import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { MeasureInWindowOnSuccessCallback } from "react-native";
+import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
 import { Keyboard, Platform } from "react-native";
 import { useIsScreenReaderEnabled } from "../../../hooks";
 import { useErrorMessageContext } from "../../../ErrorMessageWrapper";
 
-interface UseScrollToErrorParams<T extends FieldValues> {
+export interface UseScrollToErrorParams<T extends FieldValues> {
   readonly formState: FormState<T>;
   readonly refNode: number | null;
   readonly setFocus: UseFormSetFocus<T>;
-  readonly scrollToPosition?: KeyboardAwareScrollView["scrollToPosition"];
+  readonly scrollTo?: KeyboardAwareScrollViewRef["scrollTo"];
 }
 
 export function useScrollToError<T extends FieldValues>({
   formState: { errors, isValid, submitCount },
   refNode,
   setFocus,
-  scrollToPosition,
+  scrollTo,
 }: UseScrollToErrorParams<T>): void {
   const [submitCounter, setSubmitCounter] = useState(submitCount);
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
@@ -66,7 +66,7 @@ export function useScrollToError<T extends FieldValues>({
       isScreenReaderEnabled && Platform.OS === "android";
     const shouldAnimateScroll = !isAndroidWithScreenReader;
 
-    scrollToPosition?.(x, y, shouldAnimateScroll);
+    scrollTo?.({ x, y, animated: shouldAnimateScroll });
   }
 }
 

packages/components-native/src/Form/types.ts

@@ -8,7 +8,7 @@ import type {
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
-import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
 
 export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
@@ -54,7 +54,7 @@ interface FormNoticeMessage {
 
 export type FormRef<T extends FieldValues = FieldValues> =
   | (UseFormReturn<T> & {
-      scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
+      scrollViewRef?: RefObject<KeyboardAwareScrollViewRef | null>;
       saveButtonHeight?: number;
       messageBannerHeight?: number;
     })

packages/components-native/src/__mocks__/__mocks.ts

@@ -79,8 +79,13 @@ jest.doMock("react-native", () => {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const KeyboardAwareScrollView = ({ children }, _ref) => children;
 const mockRef = React.forwardRef(KeyboardAwareScrollView);
-jest.mock("react-native-keyboard-aware-scroll-view", () => {
-  return { KeyboardAwareScrollView: mockRef };
+jest.mock("react-native-keyboard-controller", () => {
+  return {
+    KeyboardAwareScrollView: mockRef,
+    KeyboardEvents: {
+      addListener: jest.fn(() => ({ remove: jest.fn() })),
+    },
+  };
 });
 
 jest.mock("react-native-modalize", () => {