@jobber/components-native 0.44.2 → 0.45.0

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

@@ -1,18 +1,14 @@
 import React from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { styles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
-import { messages } from "../../messages";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export function FormMask(): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   return (
-    <View
-      style={styles.mask}
-      accessibilityLabel={formatMessage(messages.loadingA11YLabel)}
-    >
+    <View style={styles.mask} accessibilityLabel={t("loading")}>
       <ActivityIndicator />
     </View>
   );

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

@@ -2,10 +2,9 @@ import React, { useMemo } from "react";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Modal, StatusBar, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useIntl } from "react-intl";
 import { styles } from "./InternalFormMessage.style";
-import { messages } from "./messages";
 import { EmptyState, EmptyStateProps } from "../../../../../EmptyState";
+import { useAtlantisI18n } from "../../../../../hooks/useAtlantisI18n";
 
 interface FormMessageProps {
   readonly data: EmptyStateProps;
@@ -16,7 +15,7 @@ export function InternalFormMessage({
   data,
   onRequestClose,
 }: FormMessageProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const emptyStateData: EmptyStateProps = useMemo(() => {
     if (data.secondaryAction) {
       return data;
@@ -24,12 +23,12 @@ export function InternalFormMessage({
       return {
         ...data,
         secondaryAction: {
-          label: formatMessage(messages.goBackButton),
+          label: t("goBack"),
           onPress: onRequestClose,
         },
       };
     }
-  }, [data, formatMessage, onRequestClose]);
+  }, [data, t, onRequestClose]);
 
   return (
     <Modal

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

@@ -3,8 +3,6 @@ import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { IconNames } from "@jobber/design";
 import { FormSaveButton } from "./FormSaveButton";
-import { messages } from "./messages";
-import { messages as buttonGroupMessage } from "../../../ButtonGroup/messages";
 
 interface TestSecondaryActionProp {
   label: string;
@@ -62,7 +60,7 @@ describe("the form save button is enabled", () => {
 
   it("renders a save button and calls the onPress handler when pressed", () => {
     const pressHandler = jest.fn();
-    const saveButtonText = messages.saveButton.defaultMessage;
+    const saveButtonText = "Save";
     const { getByLabelText } = render(
       <ButtonGroupForTest
         primaryAction={pressHandler}
@@ -121,9 +119,7 @@ describe("when a secondaryActions is passed in", () => {
       />,
     );
 
-    expect(
-      getByLabelText(buttonGroupMessage.more.defaultMessage),
-    ).toBeDefined();
+    expect(getByLabelText("More")).toBeDefined();
   });
 
   it("renders a secondaryAction element with and fires the onSubmit and beforeSubmit if available", async () => {
@@ -148,7 +144,7 @@ describe("when a secondaryActions is passed in", () => {
         ]}
       />,
     );
-    fireEvent.press(getByLabelText(buttonGroupMessage.more.defaultMessage));
+    fireEvent.press(getByLabelText("More"));
     expect(getByLabelText("hi")).toBeDefined();
     fireEvent.press(getByLabelText("hi"));
     expect(beforeSubmitMock).toHaveBeenCalled();

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

@@ -1,12 +1,11 @@
 import React from "react";
-import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
-import { messages } from "./messages";
 import { FormSaveButtonProps, SecondaryActionProp } from "../../types";
 import {
   ButtonGroup,
   ButtonGroupSecondaryActionProps,
 } from "../../../ButtonGroup";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export function FormSaveButton({
   primaryAction,
@@ -17,7 +16,7 @@ export function FormSaveButton({
   onOpenBottomSheet,
   onCloseBottomSheet,
 }: FormSaveButtonProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const formContext = useFormContext();
   const buttonActions = useButtonGroupAction(secondaryActions);
 
@@ -34,7 +33,7 @@ export function FormSaveButton({
               <ButtonGroup.PrimaryAction
                 key={index}
                 onPress={primaryAction}
-                label={label ?? formatMessage(messages.saveButton)}
+                label={label ?? t("save")}
                 loading={loading}
               />
             );
@@ -69,7 +68,7 @@ export function FormSaveButton({
       : [];
 
     buttonGroupActionProps.unshift({
-      label: label ?? formatMessage(messages.saveButton),
+      label: label ?? t("save"),
       onPress: primaryAction,
       loading: loading,
       icon: undefined,

package/src/Form/hooks/useOfflineHandler.ts

@@ -1,28 +1,27 @@
 import { useCallback } from "react";
-import { useIntl } from "react-intl";
 import { Alert } from "react-native";
-import { messages } from "../messages";
+import { useAtlantisI18n } from "../../hooks/useAtlantisI18n";
 
 export function useOfflineHandler(): (
   callback: () => void,
   dismiss: () => void,
 ) => () => void {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   const handleOfflineSubmit = useCallback(
     (callback: () => void, dismiss: () => void) => {
       return () => {
         Alert.alert(
-          formatMessage(messages.unavailableNetworkTitle),
-          formatMessage(messages.unavailableNetworkMessage),
+          t("networkUnavailableTitle"),
+          t("networkUnavailableDescription"),
           [
             {
-              text: formatMessage(messages.dismissAlertButton),
+              text: t("dismiss"),
               style: "cancel",
               onPress: dismiss,
             },
             {
-              text: formatMessage(messages.retryAlertButton),
+              text: t("tryAgain"),
               style: "default",
               onPress: callback,
             },
@@ -30,7 +29,7 @@ export function useOfflineHandler(): (
         );
       };
     },
-    [formatMessage],
+    [t],
   );
   return handleOfflineSubmit;
 }

package/src/FormatFile/FormatFile.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { Alert } from "react-native";
-import { useIntl } from "react-intl";
 import { File, FormatFile } from ".";
 import {
   FILE_MOCK_FILE,
@@ -13,8 +12,6 @@ import {
   FILE_UPLOAD_MOCK_IMAGE,
   FILE_UPLOAD_MOCK_PDF,
 } from "./components/_mocks/mockFiles";
-import { messages } from "./components/FormatFileBottomSheet/messages";
-import { messages as formatFileMessages } from "./messages";
 import { BottomSheetOptionsSuffix } from "./components/FormatFileBottomSheet";
 import { FileUpload, StatusCode } from "./types";
 import { tokens } from "../utils/design";
@@ -94,11 +91,7 @@ function basicRenderTestWithValue() {
 
     it("renders a helpful accessibility label", () => {
       const tree = renderFormatFile(file);
-      expect(
-        tree.getByLabelText(
-          formatFileMessages.inProgressAccessibilityLabel.defaultMessage,
-        ),
-      ).toBeDefined();
+      expect(tree.getByLabelText("Upload in progress.")).toBeDefined();
     });
 
     it("renders an overlay on the image when upload status is not completed", () => {
@@ -166,11 +159,7 @@ function basicRenderTestWithValue() {
 
     it("renders a helpful accessibility label", () => {
       const tree = renderFormatFile(file);
-      expect(
-        tree.getByLabelText(
-          formatFileMessages.errorAccessibilityLabel.defaultMessage,
-        ),
-      ).toBeDefined();
+      expect(tree.getByLabelText("Failed to upload.")).toBeDefined();
     });
 
     it("does not render an overlay", () => {
@@ -206,10 +195,7 @@ function basicRenderTestWithValue() {
     "when a uploaded %s is being used",
     (bottomSheetOptionsSuffix, testId, file) => {
       let tree: RenderAPI;
-      const { formatMessage } = useIntl();
-      const removeLabel = formatMessage(messages.removeButton, {
-        bottomSheetOptionsSuffix: bottomSheetOptionsSuffix,
-      });
+      const removeLabel = `Remove ${bottomSheetOptionsSuffix}`;
 
       beforeEach(() => {
         jest.clearAllMocks();
@@ -244,12 +230,8 @@ function basicRenderTestWithValue() {
   );
 
   describe("when the preview option is tapped", () => {
-    const { formatMessage } = useIntl();
-
     it("calls onPreview with a valid image", () => {
-      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
-        bottomSheetOptionsSuffix: "image",
-      });
+      const previewLabel = "Preview image";
       const { getByTestId, getByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
         "image",
@@ -260,9 +242,7 @@ function basicRenderTestWithValue() {
     });
 
     it("calls onPreview with a valid pdf file", () => {
-      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
-        bottomSheetOptionsSuffix: "file",
-      });
+      const previewLabel = "Preview file";
       const { getByTestId, getByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_PDF({ progress: 1, status: StatusCode.Completed }),
         "file",
@@ -273,9 +253,7 @@ function basicRenderTestWithValue() {
     });
 
     it("calls onPreview with a valid external PDF file", () => {
-      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
-        bottomSheetOptionsSuffix: "file",
-      });
+      const previewLabel = "Preview file";
       const { getByTestId, getByLabelText } = renderFormatFile(
         FILE_MOCK_PDF,
         "file",
@@ -286,9 +264,7 @@ function basicRenderTestWithValue() {
     });
 
     it("does not show the preview option with an unaccepted file", () => {
-      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
-        bottomSheetOptionsSuffix: "file",
-      });
+      const previewLabel = "Preview file";
       const { getByTestId, queryByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_FILE({ progress: 1, status: StatusCode.Completed }),
         "file",

package/src/FormatFile/FormatFile.tsx

@@ -1,7 +1,5 @@
 import React, { createRef, useCallback, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { useIntl } from "react-intl";
-import { messages } from "./messages";
 import { styles } from "./FormatFile.style";
 import { MediaView } from "./components/MediaView";
 import {
@@ -20,6 +18,7 @@ import {
 import { AtlantisFormatFileContext } from "./context/FormatFileContext";
 import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
 import { BottomSheetRef } from "../BottomSheet/BottomSheet";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface FormatFileProps<T> {
   /**
@@ -247,7 +246,7 @@ function FormatFileInternal({
     file.status !== StatusCode.Completed,
   );
 
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const bottomSheetRef = createRef<BottomSheetRef>();
 
   const handlePreviewPress = useCallback(() => {
@@ -263,10 +262,7 @@ function FormatFileInternal({
       <View>
         <TouchableOpacity
           accessibilityRole="imagebutton"
-          accessibilityHint={
-            accessibilityHint ??
-            formatMessage(messages.defaultAccessibilityHint)
-          }
+          accessibilityHint={accessibilityHint ?? t("FormatFile.hint")}
           onPress={handleOnPress}
           testID={testID}
         >

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { IconNames } from "@jobber/design";
 import { styles } from "./FileView.style";
 import { Icon } from "../../../Icon";
@@ -9,6 +8,7 @@ import { FormattedFile, StatusCode } from "../../types";
 import { computeA11yLabel } from "../../utils";
 import { ProgressBar } from "../ProgressBar";
 import { ErrorIcon } from "../ErrorIcon";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 interface FileViewProps {
   accessibilityLabel?: string;
@@ -27,12 +27,12 @@ export function FileView({
   showError,
   onUploadComplete,
 }: FileViewProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const a11yLabel = computeA11yLabel({
     accessibilityLabel,
     showOverlay,
     showError,
-    formatMessage,
+    t,
   });
 
   const freezeProgressBar =

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

@@ -1,13 +1,11 @@
 import React, { createRef } from "react";
 import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
-import { useIntl } from "react-intl";
 import { act } from "react-test-renderer";
 import {
   BottomSheetOptionsSuffix,
   FormatFileBottomSheet,
 } from "./FormatFileBottomSheet";
-import { messages } from "./messages";
 import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 
 let Platform: { OS: "ios" | "android" };
@@ -38,13 +36,8 @@ const basicRenderTestWithValue = () => {
   describe.each([["image"], ["receipt"], ["file"], ["video"]])(
     "when FormatFileBottomSheet for %s is opened",
     bottomSheetOptionsSuffix => {
-      const { formatMessage } = useIntl();
-      const previewLabel = formatMessage(messages.lightBoxPreviewButton, {
-        bottomSheetOptionsSuffix,
-      });
-      const removeLabel = formatMessage(messages.removeButton, {
-        bottomSheetOptionsSuffix,
-      });
+      const previewLabel = `Preview ${bottomSheetOptionsSuffix}`;
+      const removeLabel = `Remove ${bottomSheetOptionsSuffix}`;
       let tree: RenderAPI;
 
       beforeEach(() => {

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

@@ -1,9 +1,8 @@
 import React, { RefObject } from "react";
 import { Portal } from "react-native-portalize";
-import { useIntl } from "react-intl";
-import { messages } from "./messages";
 import { BottomSheet, BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
 
@@ -20,7 +19,7 @@ export const FormatFileBottomSheet = ({
   onRemovePress,
   bottomSheetOptionsSuffix,
 }: FormatFileBottomSheetProps): JSX.Element => {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   const handlePress = (onPressAction: () => void) => {
     onPressAction();
@@ -34,8 +33,8 @@ export const FormatFileBottomSheet = ({
         {onPreviewPress ? (
           <BottomSheetOption
             icon={"eye"}
-            text={formatMessage(messages.lightBoxPreviewButton, {
-              bottomSheetOptionsSuffix,
+            text={t("FormatFile.preview", {
+              item: bottomSheetOptionsSuffix || "",
             })}
             onPress={() => handlePress(onPreviewPress)}
           />
@@ -44,8 +43,8 @@ export const FormatFileBottomSheet = ({
           <BottomSheetOption
             icon={"trash"}
             destructive={true}
-            text={formatMessage(messages.removeButton, {
-              bottomSheetOptionsSuffix,
+            text={t("FormatFile.remove", {
+              item: bottomSheetOptionsSuffix || "",
             })}
             onPress={() => handlePress(onRemovePress)}
           />

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { ImageBackground, View } from "react-native";
-import { useIntl } from "react-intl";
 import { styles } from "./MediaView.style";
 import { FormattedFile, StatusCode } from "../../types";
 import { computeA11yLabel } from "../../utils";
@@ -9,6 +8,7 @@ import { Icon } from "../../../Icon";
 import { ProgressBar } from "../ProgressBar";
 import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 interface MediaViewProps {
   accessibilityLabel?: string;
@@ -27,7 +27,7 @@ export function MediaView({
   styleInGrid,
   onUploadComplete,
 }: MediaViewProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const { useCreateThumbnail } = useAtlantisFormatFileContext();
   const { thumbnail, error } = useCreateThumbnail(file);
   const [isLoading, setIsLoading] = useState(false);
@@ -36,7 +36,7 @@ export function MediaView({
     accessibilityLabel,
     showOverlay,
     showError,
-    formatMessage,
+    t,
   });
 
   const hasError = showError || error;

package/src/FormatFile/utils/computeA11yLabel.ts

@@ -1,26 +1,23 @@
-import { MessageDescriptor } from "react-intl";
-import { messages } from "../messages";
+import { useAtlantisI18nValue } from "../../hooks/useAtlantisI18n";
 
 interface params {
-  accessibilityLabel?: string;
-  showOverlay: boolean;
-  showError: boolean;
-  formatMessage: (message: MessageDescriptor) => string;
+  readonly accessibilityLabel?: string;
+  readonly showOverlay: boolean;
+  readonly showError: boolean;
+  readonly t: useAtlantisI18nValue["t"];
 }
 
 export function computeA11yLabel({
   accessibilityLabel,
   showOverlay,
   showError,
-  formatMessage,
+  t,
 }: params): string {
   if (!showError && showOverlay) {
-    return formatMessage(messages.inProgressAccessibilityLabel);
+    return t("upload.inProgress");
   } else if (showError) {
-    return formatMessage(messages.errorAccessibilityLabel);
+    return t("upload.failed");
   } else {
-    return (
-      accessibilityLabel || formatMessage(messages.defaultAccessibilityLabel)
-    );
+    return accessibilityLabel || t("FormatFile.label");
   }
 }

package/src/InputCurrency/InputCurrency.test.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { InputCurrency } from "./InputCurrency";
-import { AtlantisContext, AtlantisContextProps } from "../AtlantisContext";
+import {
+  AtlantisContext,
+  AtlantisContextProps,
+  defaultValues,
+} from "../AtlantisContext";
 
 const mockCurrencySymbol = "£";
 const atlantisContext: AtlantisContextProps = {
+  ...defaultValues,
   currencySymbol: mockCurrencySymbol,
   timeFormat: "p",
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,

package/src/InputCurrency/InputCurrency.tsx

@@ -11,10 +11,10 @@ import {
   limitInputWholeDigits,
   parseGivenInput,
 } from "./utils";
-import { messages } from "./messages";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputText, InputTextProps } from "../InputText";
 import { useFormController } from "../hooks/useFormController";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface InputCurrencyProps
   extends Omit<
@@ -164,7 +164,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
     }
   };
 
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   return (
     <>
@@ -186,7 +186,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
         validations={{
           pattern: {
             value: NUMBER_VALIDATION_REGEX,
-            message: formatMessage(messages.notANumberError),
+            message: t("errors.notANumber"),
           },
           ...props.validations,
         }}

package/src/InputDate/InputDate.tsx

@@ -3,14 +3,13 @@ import DateTimePicker from "react-native-modal-datetime-picker";
 import { Platform } from "react-native";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { useIntl } from "react-intl";
 import { utcToZonedTime } from "date-fns-tz";
 import { format as formatDate } from "date-fns";
-import { messages } from "./messages";
 import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisContext } from "../AtlantisContext";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface BaseInputDateProps
   extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
@@ -154,7 +153,7 @@ function InternalInputDate({
   accessibilityHint,
 }: InputDateProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { formatMessage } = useIntl();
+  const { t, locale } = useAtlantisI18n();
   const { timeZone, dateFormat } = useAtlantisContext();
 
   const date = useMemo(() => {
@@ -173,8 +172,7 @@ function InternalInputDate({
 
   const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
 
-  const placeholderLabel =
-    placeholder ?? formatMessage(messages.datePlaceholder);
+  const placeholderLabel = placeholder ?? t("date");
 
   return (
     <>
@@ -198,6 +196,9 @@ function InternalInputDate({
         maximumDate={maxDate}
         minimumDate={minDate}
         mode="date"
+        confirmTextIOS={t("confirm")}
+        cancelTextIOS={t("cancel")}
+        locale={locale}
         onCancel={handleCancel}
         onConfirm={handleConfirm}
       />

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
 // eslint-disable-next-line no-restricted-imports
 import { Text, ViewStyle } from "react-native";
-import { useIntl } from "react-intl";
 import {
   InputFieldWrapper,
   InputFieldWrapperProps,
   commonInputStyles,
 } from ".";
-import { messages as clearMessages } from "./components/ClearAction";
 import { styles } from "./InputFieldWrapper.style";
 import { typographyStyles } from "../Typography";
 
@@ -32,6 +30,7 @@ function renderWithSuffixLabel(hasValue: boolean): RenderAPI {
   return renderInputFieldWrapper({ suffix: mockLabel, hasValue });
 }
 
+const clearInput = "Clear input";
 describe("InputFieldWrapper", () => {
   it("renders an invalid InputFieldWrapper", () => {
     const { getByTestId } = renderInputFieldWrapper({ invalid: true });
@@ -120,36 +119,26 @@ describe("InputFieldWrapper", () => {
 
   describe("ClearAction", () => {
     it("renders the Clear Action Button when showClearAction is true", () => {
-      const { formatMessage } = useIntl();
       const { getByLabelText } = renderInputFieldWrapper({
         showClearAction: true,
       });
-      expect(
-        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
-      ).toBeDefined();
+      expect(getByLabelText(clearInput)).toBeDefined();
     });
 
     it("does not render the Clear Action Button when showClearAction is false", () => {
-      const { formatMessage } = useIntl();
       const { queryByLabelText } = renderInputFieldWrapper({
         showClearAction: false,
       });
-      expect(
-        queryByLabelText(formatMessage(clearMessages.clearTextLabel)),
-      ).toBeNull();
+      expect(queryByLabelText(clearInput)).toBeNull();
     });
 
     it("calls onClear when the Clear Action button is pressed", () => {
-      const { formatMessage } = useIntl();
       const onClear = jest.fn();
       const { getByLabelText } = renderInputFieldWrapper({
         showClearAction: true,
         onClear: onClear,
       });
-      fireEvent(
-        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
-        "press",
-      );
+      fireEvent(getByLabelText(clearInput), "press");
       expect(onClear).toHaveBeenCalled();
     });
   });

package/src/InputFieldWrapper/components/ClearAction/ClearAction.test.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { ClearAction } from "./ClearAction";
-import { messages } from "./messages";
 
 it("should call the handler", () => {
   const pressHandler = jest.fn();
-  const { formatMessage } = useIntl();
-
   const { getByLabelText } = render(<ClearAction onPress={pressHandler} />);
 
-  fireEvent.press(getByLabelText(formatMessage(messages.clearTextLabel)));
+  fireEvent.press(getByLabelText("Clear input"));
   expect(pressHandler).toHaveBeenCalled();
 });