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

package/src/Form/types.ts

@@ -1,17 +1,16 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { ReactElement, RefObject } from "react";
 import type {
   ControllerProps,
-  DeepPartial,
+  DefaultValues,
   FieldPath,
   FieldValues,
   Mode,
-  UnpackNestedValue,
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -55,7 +54,7 @@ interface FormNoticeMessage {
 
 export type FormRef<T extends FieldValues = FieldValues> =
   | (UseFormReturn<T> & {
-      scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+      scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
       saveButtonHeight?: number;
       messageBannerHeight?: number;
     })
@@ -109,7 +108,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * The initial values of the form inputs
    * This should be available as soon as initialLoading is set to false
    */
-  initialValues?: FormValues<DeepPartial<T>>;
+  initialValues?: DefaultValues<T>;
 
   /**
    * When the validation should happen.
@@ -128,7 +127,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
   /**
    * ref object to access react hook form methods and state
    */
-  formRef?: MutableRefObject<FormRef<T> | undefined>;
+  formRef?: RefObject<FormRef<T> | undefined>;
 
   /**
    * Label to be displayed for the save button
@@ -143,7 +142,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
 
   /**
    * Adding a key will save a local copy of the form data that will be used to
@@ -172,6 +171,13 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    */
   localCacheId?: string | string[];
 
+  /**
+   * If true, the local cache will be removed when the user navigates away from
+   * the dirty form even when offline. By default, cache is only removed on back when online.
+   * Defaults to false.
+   */
+  UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
+
   /**
    * Secondary Action for ButtonGroup
    */

package/src/FormField/FormField.tsx

@@ -39,7 +39,7 @@ export function FormField<T>({
   children,
   defaultValue: value,
   validations,
-}: FormFieldProps<T>): JSX.Element {
+}: FormFieldProps<T>) {
   const { error, field } = useFormController({
     name,
     value,

package/src/FormatFile/FormatFile.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert } from "react-native";
+import { Host } from "react-native-portalize";
 import type { File } from ".";
 import { FormatFile } from ".";
 import {
@@ -117,12 +117,12 @@ function basicRenderTestWithValue() {
       );
     });
 
-    it("renders ProgressBar state advancing with the upload percentage", () => {
+    it("renders ProgressBar state advancing with the upload percentage", async () => {
       jest.useFakeTimers();
       const { getByTestId } = renderFormatFile(file);
       jest.advanceTimersByTime(progressBarAnimationTime);
-      const formatFileInnerProgressBar = getByTestId(
-        "format-file-inner-progress-bar",
+      const formatFileInnerProgressBar = await waitFor(() =>
+        getByTestId("format-file-inner-progress-bar"),
       );
       const innerProgressBarWidth = parseInt(
         formatFileInnerProgressBar.props.style.width,
@@ -210,59 +210,59 @@ function basicRenderTestWithValue() {
         jest.advanceTimersByTime(progressBarAnimationTime);
       });
 
-      it("shows a BottomSheet with a remove option when tapped", () => {
-        const { getByTestId, getByLabelText } = tree;
+      it("shows a BottomSheet with a remove option when tapped", async () => {
+        const { getByTestId, findByLabelText } = tree;
         fireEvent.press(getByTestId(testId));
-        expect(getByLabelText(removeLabel)).toBeDefined();
+        expect(await findByLabelText(removeLabel)).toBeDefined();
       });
 
       describe("when the BottomSheet remove option is tapped", () => {
-        it("calls the onRemove action", () => {
-          const { getByTestId, getByLabelText } = tree;
+        it("calls the onRemove action", async () => {
+          const { getByTestId, findByLabelText } = tree;
           fireEvent.press(getByTestId(testId));
-          fireEvent.press(getByLabelText(removeLabel));
+          fireEvent.press(await findByLabelText(removeLabel));
           expect(onRemove).toHaveBeenCalledTimes(1);
         });
       });
 
       it("creates a thumbnail when a media file is used", () => {
-        const expectedCalls = testId.includes("image") ? 2 : 0;
+        const expectedCalls = testId.includes("image") ? 1 : 0;
         expect(mockCreateThumbnail).toHaveBeenCalledTimes(expectedCalls);
       });
     },
   );
 
   describe("when the preview option is tapped", () => {
-    it("calls onPreview with a valid image", () => {
+    it("calls onPreview with a valid image", async () => {
       const previewLabel = "Preview image";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
         "image",
       );
       fireEvent.press(getByTestId("test-image"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 
-    it("calls onPreview with a valid pdf file", () => {
+    it("calls onPreview with a valid pdf file", async () => {
       const previewLabel = "Preview file";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_PDF({ progress: 1, status: StatusCode.Completed }),
         "file",
       );
       fireEvent.press(getByTestId("test-file"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 
-    it("calls onPreview with a valid external PDF file", () => {
+    it("calls onPreview with a valid external PDF file", async () => {
       const previewLabel = "Preview file";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_MOCK_PDF,
         "file",
       );
       fireEvent.press(getByTestId("test-file"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 

package/src/FormatFile/FormatFile.tsx

@@ -88,7 +88,7 @@ function FormatFileContent({
   styleInGrid,
   onUploadComplete,
   isMedia,
-}: FormatFileContentProps): JSX.Element {
+}: FormatFileContentProps) {
   const styles = useStyles();
 
   return (
@@ -204,7 +204,7 @@ export function FormatFile<T extends File | FileUpload>({
   showFileTypeIndicator = true,
   createThumbnail,
   onPreviewPress,
-}: FormatFileProps<T>): JSX.Element {
+}: FormatFileProps<T>) {
   const onTapModified = onTap ? () => onTap(file) : () => undefined;
 
   const formattedFile = parseFile(file, showFileTypeIndicator);
@@ -236,7 +236,7 @@ function FormatFileInternal({
   onPreviewPress,
   testID,
   createThumbnail: createThumbnailProp,
-}: FormatFileInternalProps): JSX.Element {
+}: FormatFileInternalProps) {
   const [showOverlay, setShowOverlay] = useState<boolean>(
     file.status !== StatusCode.Completed,
   );

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 
-export function ErrorIcon(): JSX.Element {
+export function ErrorIcon() {
   const styles = useStyles();
 
   return (

package/src/FormatFile/components/FileView/FileView.tsx

@@ -27,7 +27,7 @@ export function FileView({
   showOverlay,
   showError,
   onUploadComplete,
-}: FileViewProps): JSX.Element {
+}: FileViewProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.test.tsx

@@ -39,11 +39,11 @@ const basicRenderTestWithValue = () => {
       const removeLabel = `Remove ${bottomSheetOptionsSuffix}`;
       let tree: RenderAPI;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         tree = renderBottomSheet(
           bottomSheetOptionsSuffix as BottomSheetOptionsSuffix,
         );
-        act(() => {
+        await act(async () => {
           bottomSheetRef.current?.open();
         });
       });
@@ -52,29 +52,29 @@ const basicRenderTestWithValue = () => {
       });
 
       describe("onPreviewPress", () => {
-        it("renders the preview option", () => {
-          const { getByLabelText } = tree;
+        it("renders the preview option", async () => {
+          const { findByLabelText } = tree;
 
-          expect(getByLabelText(previewLabel)).toBeDefined();
+          expect(await findByLabelText(previewLabel)).toBeDefined();
         });
 
-        it("is called when pressed", () => {
-          const { getByLabelText } = tree;
-          fireEvent.press(getByLabelText(previewLabel));
+        it("is called when pressed", async () => {
+          const { findByLabelText } = tree;
+          fireEvent.press(await findByLabelText(previewLabel));
           expect(onPreview).toHaveBeenCalledTimes(1);
         });
       });
 
       describe("onRemovePress", () => {
-        it("renders the remove option", () => {
-          const { getByLabelText } = tree;
+        it("renders the remove option", async () => {
+          const { findByLabelText } = tree;
 
-          expect(getByLabelText(removeLabel)).toBeDefined();
+          expect(await findByLabelText(removeLabel)).toBeDefined();
         });
 
-        it("is called when pressed", () => {
-          const { getByLabelText } = tree;
-          fireEvent.press(getByLabelText(removeLabel));
+        it("is called when pressed", async () => {
+          const { findByLabelText } = tree;
+          fireEvent.press(await findByLabelText(removeLabel));
 
           expect(onRemove).toHaveBeenCalledTimes(1);
         });

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -9,7 +9,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
 
 interface FormatFileBottomSheetProps {
-  readonly bottomSheetRef: RefObject<BottomSheetRef>;
+  readonly bottomSheetRef: RefObject<BottomSheetRef | null>;
   readonly onPreviewPress?: () => void;
   readonly onRemovePress?: () => void;
   readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
@@ -20,7 +20,7 @@ export const FormatFileBottomSheet = ({
   onPreviewPress,
   onRemovePress,
   bottomSheetOptionsSuffix,
-}: FormatFileBottomSheetProps): JSX.Element => {
+}: FormatFileBottomSheetProps) => {
   const { t } = useAtlantisI18n();
 
   const handlePress = (onPressAction: () => void) => {

package/src/FormatFile/components/MediaView/MediaView.test.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { MediaView } from "./MediaView";
+import type { FormattedFile } from "../../types";
+import { StatusCode } from "../../types";
+import { AtlantisFormatFileContext } from "../../context/FormatFileContext";
+
+jest.mock("../../../hooks/useAtlantisI18n", () => ({
+  useAtlantisI18n: () => ({ t: (key: string) => key }),
+}));
+
+describe("MediaView", () => {
+  const mockFile: FormattedFile = {
+    showPreview: true,
+    source: "https://example.com/image1.jpg",
+    thumbnailUrl: undefined,
+    name: "test.jpg",
+    size: 1024,
+    external: false,
+    progress: 0,
+    status: StatusCode.Completed,
+    error: false,
+    type: "image/jpeg",
+    isMedia: true,
+    showFileTypeIndicator: false,
+  };
+
+  const defaultProps = {
+    accessibilityLabel: "Test image",
+    showOverlay: false,
+    showError: false,
+    file: mockFile,
+    styleInGrid: false,
+    onUploadComplete: jest.fn(),
+  };
+
+  const mockContextValue = {
+    useCreateThumbnail: () => ({ thumbnail: undefined, error: false }),
+  };
+
+  const renderWithContext = (props = defaultProps) => {
+    return render(
+      <AtlantisFormatFileContext.Provider value={mockContextValue}>
+        <MediaView {...props} />
+      </AtlantisFormatFileContext.Provider>,
+    );
+  };
+
+  describe("Normal loading flow", () => {
+    it("shows loading indicator when onLoadStart fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+    });
+
+    it("hides loading indicator when onLoadEnd fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("Race condition handling (cached images)", () => {
+    it("does not get stuck loading when onLoadEnd fires before onLoadStart", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Simulate cached image: LoadEnd fires BEFORE LoadStart
+      fireEvent(image, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+
+    it("does not show infinite spinner when load events fire out of order", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Race condition scenario
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("URI changes", () => {
+    it("shows loading indicator when URI changes to a new image", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // First image: simulate cached load (LoadEnd before LoadStart)
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Change URI to a new image
+      const newFile = {
+        ...mockFile,
+        source: "https://example.com/image2.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={newFile} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const updatedImage = getByTestId("test-image");
+
+        // New image starts loading
+        fireEvent(updatedImage, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on second URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on third URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+      const image2 = getByTestId("test-image");
+      fireEvent(image2, "loadEnd");
+
+      const file3 = { ...mockFile, source: "https://example.com/image3.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file3} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image3 = getByTestId("test-image");
+        fireEvent(image3, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("handles URI change from cached to uncached image correctly", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First image: cached (LoadEnd before LoadStart)
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadEnd");
+      fireEvent(image1, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Second image: uncached (normal LoadStart then LoadEnd)
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+        fireEvent(image2, "loadEnd");
+        expect(queryByTestId("ActivityIndicator")).toBeNull();
+      });
+    });
+  });
+
+  describe("thumbnailUrl changes", () => {
+    it("shows loading indicator when thumbnailUrl changes", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Thumbnail URL changes (common when thumbnail generation completes)
+      const fileWithThumbnail = {
+        ...mockFile,
+        thumbnailUrl: "https://example.com/thumbnail.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={fileWithThumbnail} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+
+  describe("Context thumbnail changes", () => {
+    it("shows loading indicator when context thumbnail changes", async () => {
+      const mockContextWithThumbnail = {
+        useCreateThumbnail: () => ({
+          thumbnail: "https://example.com/context-thumbnail.jpg",
+          error: false,
+        }),
+      };
+
+      const { getByTestId, queryByTestId, rerender } = render(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Context provides a new thumbnail
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextWithThumbnail}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+});

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ImageBackground, View } from "react-native";
 import { useStyles } from "./MediaView.style";
 import type { FormattedFile } from "../../types";
@@ -27,11 +27,17 @@ export function MediaView({
   file,
   styleInGrid,
   onUploadComplete,
-}: MediaViewProps): JSX.Element {
+}: MediaViewProps) {
   const { t } = useAtlantisI18n();
   const { useCreateThumbnail } = useAtlantisFormatFileContext();
   const { thumbnail, error } = useCreateThumbnail(file);
   const [isLoading, setIsLoading] = useState(false);
+  /**
+   * Tracks whether onLoadEnd has fired to prevent race conditions.
+   * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
+   * which would cause isLoading to get stuck at true, showing an infinite spinner.
+   */
+  const hasLoadedRef = useRef(false);
 
   const a11yLabel = computeA11yLabel({
     accessibilityLabel,
@@ -40,10 +46,25 @@ export function MediaView({
     t,
   });
 
-  const hasError = showError || error;
-  const uri = thumbnail || file.thumbnailUrl || file.source;
+  const hasError = showError || error,
+    uri = thumbnail || file.thumbnailUrl || file.source,
+    styles = useStyles();
 
-  const styles = useStyles();
+  const handleLoadStart = () => {
+    if (!hasLoadedRef.current) {
+      setIsLoading(true);
+    }
+  };
+
+  const handleLoadEnd = () => {
+    hasLoadedRef.current = true;
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    hasLoadedRef.current = false;
+    setIsLoading(false);
+  }, [uri]);
 
   return (
     <View accessible={true} accessibilityLabel={a11yLabel}>
@@ -55,8 +76,8 @@ export function MediaView({
         resizeMode={styleInGrid ? "cover" : "contain"}
         source={{ uri }}
         testID={"test-image"}
-        onLoadStart={() => setIsLoading(true)}
-        onLoadEnd={() => setIsLoading(false)}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       >
         <Overlay
           isLoading={isLoading}

package/src/FormatFile/components/ProgressBar/ProgressBar.tsx

@@ -22,7 +22,7 @@ export const ProgressBar = ({
   progress,
   status,
   onComplete,
-}: ProgressBarProps): JSX.Element => {
+}: ProgressBarProps) => {
   const barWidth = useRef(new Animated.Value(0)).current;
   const progressPercentage = barWidth.interpolate({
     inputRange: [0, 1],

package/src/FormatFile/utils/createUseCreateThumbnail.ts

@@ -1,4 +1,4 @@
-import { useIsMounted } from "@jobber/hooks/useIsMounted";
+import { useIsMounted } from "@jobber/hooks";
 import { useCallback, useEffect, useState } from "react";
 import type { UseCreateThumbnail } from "../context/types";
 import type { CreateThumbnail, FormattedFile } from "../types";