@jobber/components-native 0.95.2-JOB-141866-acfcddc.7 → 0.95.2-JOB-141866-80fe04c.8

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-80fe04c.8+80fe04c86",
   "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": "80fe04c86fc91e07591231460c32bc3194072bdc"
 }

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";
@@ -26,10 +26,7 @@ import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
 import { useAtlantisFormContext } from "./context/AtlantisFormContext";
-import {
-  InputAccessoriesProvider,
-  useInputAccessoriesContext,
-} from "../InputText";
+import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 
@@ -73,7 +70,7 @@ function InternalForm<T extends FieldValues, S>({
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
   const [messageBannerHeight, setMessageBannerHeight] = useState(0);
-  const { setIsScrolling } = useInputAccessoriesContext();
+  // const { setIsScrolling } = useInputAccessoriesContext();
   const {
     formMethods,
     handleSubmit,
@@ -111,8 +108,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,
@@ -177,12 +178,12 @@ function InternalForm<T extends FieldValues, S>({
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }
-            onScrollBeginDrag={() => {
-              setIsScrolling(true);
-            }}
-            onScrollEndDrag={() => {
-              setIsScrolling(false);
-            }}
+            // onScrollBeginDrag={() => {
+            //   setIsScrolling(true);
+            // }}
+            // onScrollEndDrag={() => {
+            //   setIsScrolling(false);
+            // }}
           >
             <View
               onLayout={({ nativeEvent }) => {

package/src/InputText/InputText.tsx

@@ -9,7 +9,6 @@ import React, {
 } from "react";
 import type {
   FocusEvent,
-  LayoutChangeEvent,
   ReturnKeyTypeOptions,
   StyleProp,
   TextInputProps,
@@ -343,7 +342,6 @@ function InputTextInternal(
     setFocusedInput,
     canFocusNext,
     onFocusNext,
-    isScrolling,
   } = useInputAccessoriesContext();
   useEffect(() => {
     _name &&
@@ -383,10 +381,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 +407,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}
@@ -444,8 +442,8 @@ function InputTextInternal(
         ]}
         // Prevent focus during scroll for multiline inputs to avoid
         // the input focusing when the user is trying to scroll the form
-        readOnly={readonly || (multiline && isScrolling && !focused)}
-        // readOnly={readonly}
+        // readOnly={readonly || (multiline && isScrolling && !focused)}
+        readOnly={readonly}
         editable={!disabled}
         keyboardType={keyboard}
         value={inputTransform(internalValue)}
@@ -456,7 +454,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}