@jobber/components-native 0.97.2-edicleanu-753c899.26 → 0.98.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.97.2-edicleanu-753c899.26+753c89916",
+    "version": "0.98.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -45,7 +45,7 @@
         "lodash": "^4.17.21",
         "react-hook-form": "^7.52.0",
         "react-intl": "^7.1.11",
-        "react-native-keyboard-aware-scroll-view": "^0.9.5",
+        "react-native-keyboard-controller": "^1.20.7",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
         "react-native-toast-message": "^2.1.6",
@@ -54,8 +54,6 @@
     },
     "devDependencies": {
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "^0.92.1-edicleanu-753c899.11+753c89916",
-        "@jobber/hooks": "^2.19.4-edicleanu-753c899.153+753c89916",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "9.1.19",
@@ -83,7 +81,6 @@
         "@babel/core": "^7.4.5",
         "@gorhom/bottom-sheet": "^5.2.8",
         "@jobber/design": "*",
-        "@jobber/hooks": "*",
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
@@ -91,7 +88,7 @@
         "react-intl": "^6 || ^7",
         "react-native": ">=0.79.5",
         "react-native-gesture-handler": ">=2.22.0",
-        "react-native-keyboard-aware-scroll-view": "^0.9.5",
+        "react-native-keyboard-controller": "^1.20.7",
         "react-native-modal-datetime-picker": " >=13.0.0",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
@@ -99,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "753c89916463f315fb49fd21988a7b20e34f65f4"
+    "gitHead": "b74ecd2ea6e3aadd70bf9b46dd999bdb40458a13"
 }

package/dist/src/Form/Form.js

@@ -18,13 +18,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { FormProvider } from "react-hook-form";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { KeyboardAwareScrollView, KeyboardEvents, } from "react-native-keyboard-controller";
 import { Keyboard, Platform, View, findNodeHandle } from "react-native";
 import { useStyles } from "./Form.style";
 import { FormErrorBanner } from "./components/FormErrorBanner";
-import { KEYBOARD_SAVE_BUTTON_DISTANCE } from "./constants";
+import { KEYBOARD_SAVE_BUTTON_DISTANCE, KEYBOARD_TOP_PADDING_AUTO_SCROLL, } from "./constants";
 import { FormMessageBanner } from "./components/FormMessageBanner";
 import { FormSubmitErrorType } from "./types";
 import { FormMask } from "./components/FormMask";
@@ -68,7 +68,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         messageBannerHeight,
         UNSAFE_allowDiscardLocalCacheWhenOffline,
     });
-    const { windowHeight, headerHeight } = useScreenInformation();
+    const { windowHeight } = useScreenInformation();
     const [keyboardHeight, setKeyboardHeight] = useState(0);
     const [keyboardScreenY, setKeyboardScreenY] = useState(0);
     const [formContentHeight, setFormContentHeight] = useState(0);
@@ -88,19 +88,38 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         formState: formMethods.formState,
         refNode: findNodeHandle(scrollViewRef.current),
         setFocus: formMethods.setFocus,
-        scrollToPosition: (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition,
+        scrollTo: (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo,
     });
     const handleOfflineSubmit = useOfflineHandler();
-    const keyboardProps = Platform.select({
-        ios: {
-            onKeyboardWillHide: handleKeyboardHide,
-            onKeyboardWillShow: handleKeyboardShow,
-        },
-        android: {
-            onKeyboardDidHide: handleKeyboardHide,
-            onKeyboardDidShow: handleKeyboardShow,
-        },
-    });
+    const handleKeyboardShow = useCallback((event) => {
+        setKeyboardHeight(event.height);
+        setKeyboardScreenY(windowHeight - event.height);
+    }, [windowHeight]);
+    const handleKeyboardHide = useCallback(() => {
+        var _a;
+        (_a = bottomViewRef === null || bottomViewRef === void 0 ? void 0 : bottomViewRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_x, y, _width, _height) => {
+            var _a;
+            // 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) {
+                (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.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) => {
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
@@ -111,7 +130,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
             (isSubmitting || isSecondaryActionLoading) && React.createElement(FormMask, null),
             React.createElement(FormCache, { localCacheKey: localCacheKey, localCacheExclude: localCacheExclude, setLocalCache: setLocalCache }),
             React.createElement(FormBody, { keyboardHeight: calculateSaveButtonOffset(), submit: handleSubmit(internalSubmit), isFormSubmitting: isSubmitting, saveButtonLabel: saveButtonLabel, shouldRenderActionBar: saveButtonPosition === "sticky", renderStickySection: renderStickySection, secondaryActions: secondaryActions, setSecondaryActionLoading: setIsSecondaryActionLoading, setSaveButtonHeight: setSaveButtonHeight, saveButtonOffset: saveButtonOffset },
-                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: !disableKeyboardAwareScroll, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
+                React.createElement(KeyboardAwareScrollView, { disableScrollOnKeyboardHide: true, enabled: !disableKeyboardAwareScroll, keyboardShouldPersistTaps: "handled", ref: scrollViewRef, bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL, extraKeyboardSpace: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer },
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },
@@ -127,26 +146,6 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
                                 renderFooter))),
                     React.createElement(View, { style: styles.safeArea, ref: bottomViewRef })))),
         React.createElement(FormMessage, null)));
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function handleKeyboardShow(frames) {
-        setKeyboardScreenY(frames.endCoordinates.screenY);
-        setKeyboardHeight(frames.endCoordinates.height);
-    }
-    function handleKeyboardHide() {
-        var _a;
-        (_a = bottomViewRef === null || bottomViewRef === void 0 ? void 0 : bottomViewRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        (_x, y, _width, _height) => {
-            var _a;
-            // 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) {
-                (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd();
-            }
-        });
-        setKeyboardHeight(0);
-        setKeyboardScreenY(0);
-    }
     function internalSubmit(data) {
         return __awaiter(this, void 0, void 0, function* () {
             let performSubmit = true;

package/dist/src/Form/hooks/useFormViewRefs.js

@@ -4,7 +4,7 @@ export function useFormViewRefs() {
     const bottomViewRef = useRef(null);
     const scrollToTop = useCallback(() => {
         var _a;
-        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition(0, 0);
+        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: 0, y: 0, animated: true });
     }, [scrollViewRef]);
     return {
         scrollViewRef: scrollViewRef,

package/dist/src/Form/hooks/useScrollToError/useScrollToError.js

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { Keyboard, Platform } from "react-native";
 import { useIsScreenReaderEnabled } from "../../../hooks";
 import { useErrorMessageContext } from "../../../ErrorMessageWrapper";
-export function useScrollToError({ formState: { errors, isValid, submitCount }, refNode, setFocus, scrollToPosition, }) {
+export function useScrollToError({ formState: { errors, isValid, submitCount }, refNode, setFocus, scrollTo, }) {
     const [submitCounter, setSubmitCounter] = useState(submitCount);
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const manuallyScrollToElement = useManuallyScrollToElement(handleScroll, refNode);
@@ -36,7 +36,7 @@ export function useScrollToError({ formState: { errors, isValid, submitCount },
          */
         const isAndroidWithScreenReader = isScreenReaderEnabled && Platform.OS === "android";
         const shouldAnimateScroll = !isAndroidWithScreenReader;
-        scrollToPosition === null || scrollToPosition === void 0 ? void 0 : scrollToPosition(x, y, shouldAnimateScroll);
+        scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo({ x, y, animated: shouldAnimateScroll });
     }
 }
 function focusInputWithRHF(errors, setFocus) {