@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/src/Form/Form.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
@@ -94,7 +94,7 @@ interface FormTestProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly initialLoading?: boolean;
   readonly initialValues?: FormFields;
   readonly bannerMessages?: FormBannerMessage[];
@@ -104,6 +104,7 @@ interface FormTestProps {
   readonly onBeforeSubmit?: jest.Mock;
   readonly renderFooter?: React.ReactNode;
   readonly saveButtonOffset?: number;
+  readonly UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
 }
 
 function FormTest(props: FormTestProps) {
@@ -125,6 +126,7 @@ function MockForm({
   localCacheId,
   renderFooter,
   saveButtonOffset,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
 
@@ -154,6 +156,9 @@ function MockForm({
         onBeforeSubmit={onBeforeSubmit}
         renderFooter={renderFooter}
         saveButtonOffset={saveButtonOffset}
+        UNSAFE_allowDiscardLocalCacheWhenOffline={
+          UNSAFE_allowDiscardLocalCacheWhenOffline
+        }
       >
         <InputText
           name={testInputTextName}
@@ -561,4 +566,142 @@ describe("Form", () => {
       expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
     });
   });
+
+  describe("Leaving the form", () => {
+    let mockUseConfirmBeforeBack: jest.Mock;
+    let mockRemoveLocalCache: jest.Mock;
+    const atlantisContextSpy = jest.spyOn(
+      atlantisContext,
+      "useAtlantisContext",
+    );
+
+    beforeEach(() => {
+      mockUseConfirmBeforeBack = jest
+        .fn()
+        .mockReturnValue({ current: jest.fn() });
+      mockRemoveLocalCache = jest.fn();
+
+      jest
+        .spyOn(
+          require("../Form/context/AtlantisFormContext"),
+          "useAtlantisFormContext",
+        )
+        .mockReturnValue({
+          useConfirmBeforeBack: mockUseConfirmBeforeBack,
+          useInternalFormLocalCache: () => ({
+            setLocalCache: jest.fn(),
+            removeLocalCache: mockRemoveLocalCache,
+          }),
+          edgeToEdgeEnabled: false,
+        });
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is false", () => {
+      it("should NOT pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBeUndefined();
+        expect(callArgs.showLostProgressMessage).toBe(false);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is true", () => {
+      it("should pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("without localCacheKey", () => {
+      it("should always show lost progress message when no cache key is provided", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+  });
 });

package/src/Form/Form.tsx

@@ -26,6 +26,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { useAtlantisFormContext } from "./context/AtlantisFormContext";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -33,7 +34,7 @@ import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form<T extends FieldValues, S>({
   initialLoading,
   ...rest
-}: FormProps<T, S>): JSX.Element {
+}: FormProps<T, S>) {
   const child = initialLoading ? <FormMask /> : <InternalForm {...rest} />;
 
   return (
@@ -65,6 +66,7 @@ function InternalForm<T extends FieldValues, S>({
   saveButtonOffset,
   showStickySaveButton = false,
   renderFooter,
+  UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -86,6 +88,7 @@ function InternalForm<T extends FieldValues, S>({
     scrollViewRef,
     saveButtonHeight,
     messageBannerHeight,
+    UNSAFE_allowDiscardLocalCacheWhenOffline,
   });
   const { windowHeight, headerHeight } = useScreenInformation();
   const [keyboardHeight, setKeyboardHeight] = useState(0);
@@ -134,6 +137,8 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
+  const { edgeToEdgeEnabled } = useAtlantisFormContext();
+
   return (
     <FormProvider {...formMethods}>
       <>
@@ -161,6 +166,7 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
+            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -168,6 +174,7 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
+            extraScrollHeight={edgeToEdgeEnabled ? tokens["space-large"] : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
@@ -18,7 +18,7 @@ export interface FormActionBarProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly secondaryActions?: SecondaryActionProp[];
   readonly setSecondaryActionLoading?: (bool: boolean) => void;
 }
@@ -32,7 +32,7 @@ export function FormActionBar({
   setSaveButtonHeight,
   secondaryActions,
   setSecondaryActionLoading,
-}: FormActionBarProps): JSX.Element {
+}: FormActionBarProps) {
   const styles = useStyles();
 
   const buttonStyle = StyleSheet.flatten([

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { type ReactElement, useMemo } from "react";
 import { View } from "react-native";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
@@ -7,7 +7,7 @@ import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  readonly children: JSX.Element;
+  readonly children: ReactElement;
   readonly shouldRenderActionBar?: boolean;
   readonly saveButtonOffset?: number;
 }
@@ -24,7 +24,7 @@ export function FormBody({
   setSecondaryActionLoading,
   setSaveButtonHeight,
   saveButtonOffset,
-}: FormBodyProps): JSX.Element {
+}: FormBodyProps) {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();

package/src/Form/components/FormCache/FormCache.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
@@ -7,18 +7,18 @@ interface FormCacheProps<T extends FieldValues> {
   readonly localCacheId?: string | string[];
   readonly localCacheKey?: string;
   readonly localCacheExclude?: string[];
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,
   setLocalCache,
-}: FormCacheProps<T>): JSX.Element {
+}: FormCacheProps<T>) {
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 
-  const formData = useWatch<T>({ control });
+  const formData = useWatch({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,5 +46,6 @@ export function FormCache<T extends FieldValues>({
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 }

package/src/Form/components/FormErrorBanner/FormErrorBanner.tsx

@@ -6,7 +6,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormErrorBanner({
   networkError,
   bannerError,
-}: FormBannerErrors): JSX.Element {
+}: FormBannerErrors) {
   const { t } = useAtlantisI18n();
 
   if (networkError) {

package/src/Form/components/FormMask/FormMask.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
-export function FormMask(): JSX.Element {
+export function FormMask() {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/Form/components/FormMessage/FormMessage.test.tsx

@@ -1,30 +1,41 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
 import { FormMessage } from ".";
 
 describe("FormMessage", () => {
   it("should render null when there are no message to show", () => {
-    const view = render(<FormMessage />);
-    expect(view.toJSON()).toMatchInlineSnapshot(`null`);
+    render(<FormMessage />);
+    expect(screen.toJSON()).toMatchInlineSnapshot(`null`);
   });
 
-  it("should show the message", () => {
-    const { getByText } = render(<FormMessage />);
+  it("should show the message", async () => {
+    render(<FormMessage />);
 
     const description = "🔥";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
   });
 
-  it("should close the message", () => {
-    const { getByText, queryByText } = render(<FormMessage />);
+  it("should close the message", async () => {
+    render(<FormMessage />);
 
     const description = "🌚";
     FormMessage.show({ description });
-    expect(getByText(description)).toBeDefined();
+    await waitFor(() => {
+      expect(screen.getByText(description)).toBeDefined();
+    });
 
     FormMessage.close();
-    expect(queryByText(description)).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByText(description)).toBeNull();
+    });
   });
 
   describe("Opening another message through a message", () => {
@@ -40,33 +51,35 @@ describe("FormMessage", () => {
         },
       });
 
-    it("should show the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should show the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
 
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
 
-      fireEvent.press(getByLabelText("Click me"));
+      fireEvent.press(screen.getByLabelText("Click me"));
 
-      expect(getByText(secondMessage)).toBeDefined();
-      expect(queryByText(firstMessage)).toBeNull();
+      expect(screen.getByText(secondMessage)).toBeDefined();
+      expect(screen.queryByText(firstMessage)).toBeNull();
     });
 
-    it("should close the most recent message", () => {
-      const { getByText, queryByText, getByLabelText } = render(
-        <FormMessage />,
-      );
+    it("should close the most recent message", async () => {
+      render(<FormMessage />);
 
       showMessage();
-      fireEvent.press(getByLabelText("Click me"));
+      await waitFor(() => {
+        expect(screen.getByText("Click me")).toBeDefined();
+      });
+      fireEvent.press(screen.getByLabelText("Click me"));
       FormMessage.close();
-
-      expect(getByText(firstMessage)).toBeDefined();
-      expect(queryByText(secondMessage)).toBeNull();
+      await waitFor(() => {
+        expect(screen.getByText(firstMessage)).toBeDefined();
+      });
+      expect(screen.queryByText(secondMessage)).toBeNull();
     });
   });
 });

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -17,7 +17,7 @@ let close: (() => void) | undefined;
  * message to the user. Use `FormMessage.close()` to close the most
  * recent message.
  */
-export const FormMessage = (): JSX.Element => {
+export const FormMessage = () => {
   const [data, setData] = useState<FormMessageData[]>([]);
 
   open = useCallback(

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -15,7 +15,7 @@ interface FormMessageProps {
 export function InternalFormMessage({
   data,
   onRequestClose,
-}: FormMessageProps): JSX.Element {
+}: FormMessageProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -8,9 +8,7 @@ interface FormMessageBannerProps {
   readonly bannerMessages?: FormBannerMessage[];
 }
 
-export function FormMessageBanner({
-  bannerMessages,
-}: FormMessageBannerProps): JSX.Element {
+export function FormMessageBanner({ bannerMessages }: FormMessageBannerProps) {
   return (
     <>
       {bannerMessages?.map((message, index) => (

package/src/Form/components/FormSaveButton/FormSaveButton.test.tsx

@@ -127,7 +127,7 @@ describe("when a secondaryActions is passed in", () => {
     const beforeSubmitMock = jest.fn().mockImplementation(() => {
       return Promise.resolve(true);
     });
-    const { getByLabelText } = render(
+    const { findByLabelText, getByLabelText } = render(
       <ButtonGroupForTest
         primaryAction={pressHandler}
         loading={false}
@@ -145,7 +145,7 @@ describe("when a secondaryActions is passed in", () => {
       />,
     );
     fireEvent.press(getByLabelText("More"));
-    expect(getByLabelText("hi")).toBeDefined();
+    expect(await findByLabelText("hi")).toBeDefined();
     fireEvent.press(getByLabelText("hi"));
     expect(beforeSubmitMock).toHaveBeenCalled();
     await waitFor(() => {

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -13,7 +13,7 @@ export function FormSaveButton({
   setSecondaryActionLoading,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: FormSaveButtonProps): JSX.Element {
+}: FormSaveButtonProps) {
   const { t } = useAtlantisI18n();
   const formContext = useFormContext();
   const buttonActions = useButtonGroupAction(secondaryActions);

package/src/Form/context/AtlantisFormContext.test.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import type { AtlantisFormContextProps } from "./types";
 import {
   AtlantisFormContext,

package/src/Form/context/AtlantisFormContext.tsx

@@ -11,6 +11,7 @@ export const atlantisFormContextDefaultValues = {
     setLocalCache: () => undefined,
     removeLocalCache: () => undefined,
   }),
+  edgeToEdgeEnabled: false,
 };
 
 export const AtlantisFormContext = createContext<AtlantisFormContextProps>(

package/src/Form/context/types.ts

@@ -1,5 +1,5 @@
-import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { RefObject } from "react";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -21,13 +21,14 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
   useConfirmBeforeBack: (
     props: UseConfirmBeforeBackProps,
-  ) => MutableRefObject<() => void>;
+  ) => RefObject<() => void>;
   useInternalFormLocalCache: <TData extends FieldValues>(
     formMethods: UseFormReturn<TData>,
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: TData) => void;
+    setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
+  edgeToEdgeEnabled?: boolean;
 }

package/src/Form/hooks/useFormViewRefs.ts

@@ -4,15 +4,14 @@ import type { View } from "react-native";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 interface UseFormViewRefsReturn {
-  readonly scrollViewRef: RefObject<KeyboardAwareScrollView>;
-  readonly bottomViewRef: RefObject<View>;
+  readonly scrollViewRef: RefObject<KeyboardAwareScrollView | null>;
+  readonly bottomViewRef: RefObject<View | null>;
   readonly scrollToTop: () => void;
 }
 
 export function useFormViewRefs(): UseFormViewRefsReturn {
-  const scrollViewRef: RefObject<KeyboardAwareScrollView> =
-    useRef<KeyboardAwareScrollView>(null);
-  const bottomViewRef: RefObject<View> = useRef<View>(null);
+  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
+  const bottomViewRef = useRef<View>(null);
   const scrollToTop = useCallback(() => {
     scrollViewRef.current?.scrollToPosition(0, 0);
   }, [scrollViewRef]);

package/src/Form/hooks/useInternalForm.ts

@@ -1,10 +1,11 @@
 import type {
+  DeepPartial,
   FieldValues,
   UseFormHandleSubmit,
   UseFormReturn,
 } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
@@ -19,8 +20,9 @@ type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<
   | "localCacheKey"
   | "localCacheExclude"
   | "localCacheId"
+  | "UNSAFE_allowDiscardLocalCacheWhenOffline"
 > & {
-  scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+  scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
   readonly saveButtonHeight: number;
   readonly messageBannerHeight: number;
 };
@@ -30,8 +32,8 @@ interface UseInternalForm<T extends FieldValues> {
   readonly handleSubmit: UseFormHandleSubmit<T>;
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
-  readonly removeListenerRef: MutableRefObject<() => void>;
-  readonly setLocalCache: (data: T) => void;
+  readonly removeListenerRef: RefObject<() => void>;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function useInternalForm<T extends FieldValues, SubmitResponseType>({
@@ -44,6 +46,7 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
   scrollViewRef,
   saveButtonHeight,
   messageBannerHeight,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T> {
   const { useConfirmBeforeBack, useInternalFormLocalCache } =
     useAtlantisFormContext();
@@ -81,11 +84,16 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
     };
   }
 
+  const shouldRemoveCacheOnBack = UNSAFE_allowDiscardLocalCacheWhenOffline
+    ? true
+    : isOnline;
+
   const removeListenerRef = useConfirmBeforeBack({
     alwaysPreventBack: isSubmitting,
     shouldShowAlert: isDirty,
-    onAcceptEvent: isOnline ? removeLocalCache : undefined,
-    showLostProgressMessage: isOnline || !clientSideSaveOn ? true : false,
+    onAcceptEvent: shouldRemoveCacheOnBack ? removeLocalCache : undefined,
+    showLostProgressMessage:
+      shouldRemoveCacheOnBack || !clientSideSaveOn ? true : false,
   });
 
   return {

package/src/Form/hooks/useScrollToError/useScrollToError.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { useScrollToError } from "./useScrollToError";
 
 const mockFormState = {
@@ -25,6 +25,7 @@ jest.mock("../../../ErrorMessageWrapper", () => ({
       el: {
         measure: jest.fn((_, callback) => callback()),
         hasErrorMessage: true,
+        accessibilityFocus: jest.fn(),
       },
     },
     register: jest.fn(),