@jobber/components-native 0.95.2-JOB-141866-acfcddc.7 → 0.95.2-JOB-141866-990fa70.9

package/dist/types/src/InputText/InputText.d.ts

@@ -6,6 +6,11 @@ import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldStyleOverride, InputFieldWrapperProps } from "../InputFieldWrapper/InputFieldWrapper";
+/**
+ * Buffer zone in pixels for offscreen detection.
+ * This makes the detection more sensitive by marking the component as offscreen
+ * even if it's technically still visible but within this buffer distance from the edge.
+ */
 export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" | "toolbarVisibility" | "loading" | "loadingType"> {
     /**
      * Highlights the field red and shows message below (if string) to indicate an error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.95.2-JOB-141866-acfcddc.7+acfcddc57",
+  "version": "0.95.2-JOB-141866-990fa70.9+990fa7081",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "acfcddc57c91d179ef43e2ed44fd25bd3cae6405"
+  "gitHead": "990fa708191391b1d9f973c5eccd4dd8ec532424"
 }

package/src/Form/Form.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, 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";
@@ -111,8 +111,12 @@ function InternalForm<T extends FieldValues, S>({
   const [isSecondaryActionLoading, setIsSecondaryActionLoading] =
     useState<boolean>(false);
 
-  const extraViewHeight = paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE;
-  const calculatedKeyboardHeight = keyboardHeight - extraViewHeight;
+  const { calculatedKeyboardHeight } = useMemo(() => {
+    return {
+      calculatedKeyboardHeight:
+        keyboardHeight - (paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE),
+    };
+  }, [paddingBottom, keyboardHeight]);
 
   useScrollToError({
     formState: formMethods.formState,

package/src/InputText/InputText.tsx

@@ -9,7 +9,6 @@ import React, {
 } from "react";
 import type {
   FocusEvent,
-  LayoutChangeEvent,
   ReturnKeyTypeOptions,
   StyleProp,
   TextInputProps,
@@ -30,7 +29,7 @@ import type {
 } from "../InputFieldWrapper/InputFieldWrapper";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
-import { useScreenInformation } from "../Form/hooks/useScreenInformation";
+// import { useScreenInformation } from "../Form/hooks/useScreenInformation";
 
 /**
  * Buffer zone in pixels for offscreen detection.
@@ -38,7 +37,7 @@ import { useScreenInformation } from "../Form/hooks/useScreenInformation";
  * even if it's technically still visible but within this buffer distance from the edge.
  */
 // 44 (accessory bar height) + 20 (buffer)
-const KEYBOARD_AWARE_DETECTION_BUFFER = 64;
+// const KEYBOARD_AWARE_DETECTION_BUFFER = 64;
 
 export interface InputTextProps
   extends Pick<
@@ -342,8 +341,8 @@ function InputTextInternal(
     unregister,
     setFocusedInput,
     canFocusNext,
-    onFocusNext,
     isScrolling,
+    onFocusNext,
   } = useInputAccessoriesContext();
   useEffect(() => {
     _name &&
@@ -383,10 +382,10 @@ function InputTextInternal(
 
   const styles = useStyles();
   const commonInputStyles = useCommonInputStyles();
-  const { headerHeight, windowHeight } = useScreenInformation();
+  // const { headerHeight, windowHeight } = useScreenInformation();
   // State to track if the InputText component can fully fit on screen
   // (i.e., it's completely visible). Use this state to handle visibility issues.
-  const [canFullyFitOnScreen, setCanFullyFitOnScreen] = useState(true);
+  // const [canFullyFitOnScreen, setCanFullyFitOnScreen] = useState(true);
 
   return (
     <InputFieldWrapper
@@ -409,20 +408,20 @@ function InputTextInternal(
       loadingType={loadingType}
     >
       <TextInput
-        onLayout={(event: LayoutChangeEvent) => {
-          event.target?.measureInWindow((_, y, __, height) => {
-            // Check if component can't fully fit on screen (height only)
-            // Account for headerHeight at the top of the screen and buffer zone
-            const visibleTop = headerHeight + KEYBOARD_AWARE_DETECTION_BUFFER; // Top of visible area (below header) with buffer
-            const visibleBottom =
-              windowHeight - KEYBOARD_AWARE_DETECTION_BUFFER; // Bottom of visible area with buffer
-            const isOffScreen =
-              y < visibleTop || // Top edge is behind or above the header (with buffer)
-              y + height > visibleBottom; // Bottom edge is below the window (with buffer)
-
-            setCanFullyFitOnScreen(!isOffScreen);
-          });
-        }}
+        // onLayout={(event: LayoutChangeEvent) => {
+        //   event.target?.measureInWindow((_, y, __, height) => {
+        //     // Check if component can't fully fit on screen (height only)
+        //     // Account for headerHeight at the top of the screen and buffer zone
+        //     const visibleTop = headerHeight + KEYBOARD_AWARE_DETECTION_BUFFER; // Top of visible area (below header) with buffer
+        //     const visibleBottom =
+        //       windowHeight - KEYBOARD_AWARE_DETECTION_BUFFER; // Bottom of visible area with buffer
+        //     const isOffScreen =
+        //       y < visibleTop || // Top edge is behind or above the header (with buffer)
+        //       y + height > visibleBottom; // Bottom edge is below the window (with buffer)
+
+        //     setCanFullyFitOnScreen(!isOffScreen);
+        //   });
+        // }}
         inputAccessoryViewID={inputAccessoryID || undefined}
         testID={testID}
         autoCapitalize={autoCapitalize}
@@ -456,7 +455,7 @@ function InputTextInternal(
         // State for tracking if the input should be scrollable.
         // This is tech debt related to an issue where keyboard aware scrollview doesn't work if `scrollEnabled` is true. However,
         // when `scrollEnabled` is false it causes an issue where super long text inputs will jump to the top when a new line is added to the bottom of the input.
-        scrollEnabled={Platform.OS === "ios" && !canFullyFitOnScreen}
+        scrollEnabled={Platform.OS === "ios"}
         textContentType={textContentType}
         onChangeText={handleChangeText}
         onSubmitEditing={handleOnSubmitEditing}