[No QA] Console error cleanup pt3

patches/react-native-draggable-flatlist+4.0.1+002+fix-console-error-ref-measureLayout.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx b/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
+index 1559352..b84ee99 100644
+--- a/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
++++ b/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
+@@ -56,6 +56,11 @@ function NestableDraggableFlatListInner<T>(
+     const onFail = () => {
+       console.log("## nested draggable list measure fail");
+     };
++
++    if (typeof nodeHandle === "number" ) {
++      return;
++    }
++
+     //@ts-ignore
+     containerRef.current.measureLayout(nodeHandle, onSuccess, onFail);
+   });

src/components/AvatarWithDisplayName.tsx

@@ -29,6 +29,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
+import {getButtonRole} from './Button/utils';
 import CaretWrapper from './CaretWrapper';
 import DisplayNames from './DisplayNames';
 import {FallbackAvatar} from './Icon/Expensicons';
@@ -134,22 +135,24 @@ function AvatarWithDisplayName({policy, report, isAnonymous = false, size = CONS
                     <PressableWithoutFeedback
                         onPress={showActorDetails}
                         accessibilityLabel={title}
-                        role={CONST.ROLE.BUTTON}
+                        role={getButtonRole(true)}
                     >
-                        {shouldShowSubscriptAvatar ? (
-                            <SubscriptAvatar
-                                backgroundColor={avatarBorderColor}
-                                mainAvatar={icons.at(0) ?? fallbackIcon}
-                                secondaryAvatar={icons.at(1)}
-                                size={size}
-                            />
-                        ) : (
-                            <MultipleAvatars
-                                icons={icons}
-                                size={size}
-                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
-                            />
-                        )}
+                        <View accessibilityLabel={title}>
+                            {shouldShowSubscriptAvatar ? (
+                                <SubscriptAvatar
+                                    backgroundColor={avatarBorderColor}
+                                    mainAvatar={icons.at(0) ?? fallbackIcon}
+                                    secondaryAvatar={icons.at(1)}
+                                    size={size}
+                                />
+                            ) : (
+                                <MultipleAvatars
+                                    icons={icons}
+                                    size={size}
+                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
+                                />
+                            )}
+                        </View>
                     </PressableWithoutFeedback>
                     <View style={[styles.flex1, styles.flexColumn]}>
                         <CaretWrapper>

src/components/Button/index.tsx

@@ -17,6 +17,7 @@ import HapticFeedback from '@libs/HapticFeedback';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
+import {getButtonRole, getButtonStyle} from './utils';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonProps = Partial<ChildrenProps> & {
@@ -146,6 +147,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Whether the Enter keyboard listening is active whether or not the screen that contains the button is focused */
     isPressOnEnterActive?: boolean;
 
+    /** Whether is a nested button inside other button, since nesting buttons isn't valid html */
+    isNested?: boolean;
+
     /** The text displays under the first line */
     secondLineText?: string;
 };
@@ -249,6 +253,7 @@ function Button(
         link = false,
         isContentCentered = false,
         isPressOnEnterActive,
+        isNested = false,
         secondLineText = '',
         ...rest
     }: ButtonProps,
@@ -414,10 +419,10 @@ function Button(
                     isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                     link && styles.bgTransparent,
+                    getButtonStyle(styles, isNested),
                 ]}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -429,7 +434,7 @@ function Button(
                 id={id}
                 testID={testID}
                 accessibilityLabel={accessibilityLabel}
-                role={CONST.ROLE.BUTTON}
+                role={getButtonRole(isNested)}
                 hoverDimmingValue={1}
                 onHoverIn={() => setIsHovered(true)}
                 onHoverOut={() => setIsHovered(false)}

src/components/Button/utils/index.ts

@@ -0,0 +1,6 @@
+import CONST from '@src/CONST';
+import type {GetButtonRole, GetButtonStyle} from './types';
+
+const getButtonStyle: GetButtonStyle = () => undefined;
+const getButtonRole: GetButtonRole = () => CONST.ROLE.BUTTON;
+export {getButtonStyle, getButtonRole};

src/components/Button/utils/index.web.ts

@@ -0,0 +1,7 @@
+import CONST from '@src/CONST';
+import type {GetButtonRole, GetButtonStyle} from './types';
+
+const getButtonStyle: GetButtonStyle = (styles, isNested) => (isNested ? styles.cursorPointer : undefined);
+const getButtonRole: GetButtonRole = (isNested) => (isNested ? CONST.ROLE.PRESENTATION : CONST.ROLE.BUTTON);
+
+export {getButtonStyle, getButtonRole};

src/components/Button/utils/types.ts

@@ -0,0 +1,7 @@
+import type {Role, StyleProp, ViewStyle} from 'react-native';
+
+type GetButtonStyle = (styles: {cursorPointer: ViewStyle}, isNested: boolean) => StyleProp<ViewStyle> | undefined;
+
+type GetButtonRole = (isNested: boolean) => Role | undefined;
+
+export type {GetButtonStyle, GetButtonRole};

src/components/HTMLEngineProvider/HTMLRenderers/DeletedActionRenderer.tsx

@@ -43,7 +43,14 @@ function DeletedActionRenderer({tnode}: CustomRendererProps<TText | TPhrasing>)
                     const data = firstChild && 'data' in firstChild ? firstChild.data : null;
 
                     if (typeof data === 'string') {
-                        return <Text style={(styles.textLabelSupporting, styles.textStrong)}>{data}</Text>;
+                        return (
+                            <Text
+                                key={data}
+                                style={(styles.textLabelSupporting, styles.textStrong)}
+                            >
+                                {data}
+                            </Text>
+                        );
                     }
                     return props.childElement;
                 }}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -3,6 +3,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
+import {getButtonRole, getButtonStyle} from '@components/Button/utils';
 import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
@@ -11,9 +12,9 @@ import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getFileName, getFileType, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
+import {isArchivedNonExpenseReport} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -70,12 +71,12 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const imageHeight = (htmlAttribs['data-expensify-height'] && parseInt(htmlAttribs['data-expensify-height'], 10)) || undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
-    const fileType = FileUtils.getFileType(attachmentSourceAttribute);
+    const fileType = getFileType(attachmentSourceAttribute);
     const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound;
     const theme = useTheme();
 
-    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
-    const fileInfo = FileUtils.splitExtensionFromFileName(fileName);
+    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
+    const fileInfo = splitExtensionFromFileName(fileName);
     if (!fileInfo.fileExtension) {
         fileName = `${fileInfo?.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`;
     }
@@ -103,7 +104,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                 <AttachmentContext.Consumer>
                     {({reportID, accountID, type}) => (
                         <PressableWithoutFocus
-                            style={[styles.noOutline]}
+                            style={[styles.noOutline, getButtonStyle(styles, true)]}
                             onPress={() => {
                                 if (!source || !type) {
                                     return;
@@ -117,17 +118,10 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 if (isDisabled) {
                                     return;
                                 }
-                                showContextMenuForReport(
-                                    event,
-                                    anchor,
-                                    report?.reportID,
-                                    action,
-                                    checkIfContextMenuActive,
-                                    ReportUtils.isArchivedNonExpenseReport(report, reportNameValuePairs),
-                                );
+                                showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, reportNameValuePairs));
                             }}
                             shouldUseHapticsOnLongPress
-                            accessibilityRole={CONST.ROLE.BUTTON}
+                            role={getButtonRole(true)}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}
                         >
                             {thumbnailImageComponent}

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -328,33 +328,33 @@ function MoneyRequestConfirmationListFooter({
         },
         {
             item: (
-                <ShowContextMenuContext.Provider value={contextMenuContextValue}>
-                    <MentionReportContext.Provider
-                        key={translate('common.description')}
-                        value={mentionReportContextValue}
-                    >
-                        <MenuItemWithTopDescription
-                            key={translate('common.description')}
-                            shouldShowRightIcon={!isReadOnly}
-                            shouldParseTitle
-                            excludedMarkdownRules={!policy ? ['reportMentions'] : []}
-                            title={iouComment}
-                            description={translate('common.description')}
-                            onPress={() => {
-                                if (!transactionID) {
-                                    return;
-                                }
-
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID));
-                            }}
-                            style={[styles.moneyRequestMenuItem]}
-                            titleStyle={styles.flex1}
-                            disabled={didConfirm}
-                            interactive={!isReadOnly}
-                            numberOfLinesTitle={2}
-                        />
-                    </MentionReportContext.Provider>
-                </ShowContextMenuContext.Provider>
+                <View key={translate('common.description')}>
+                    <ShowContextMenuContext.Provider value={contextMenuContextValue}>
+                        <MentionReportContext.Provider value={mentionReportContextValue}>
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon={!isReadOnly}
+                                shouldParseTitle
+                                excludedMarkdownRules={!policy ? ['reportMentions'] : []}
+                                title={iouComment}
+                                description={translate('common.description')}
+                                onPress={() => {
+                                    if (!transactionID) {
+                                        return;
+                                    }
+
+                                    Navigation.navigate(
+                                        ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID),
+                                    );
+                                }}
+                                style={[styles.moneyRequestMenuItem]}
+                                titleStyle={styles.flex1}
+                                disabled={didConfirm}
+                                interactive={!isReadOnly}
+                                numberOfLinesTitle={2}
+                            />
+                        </MentionReportContext.Provider>
+                    </ShowContextMenuContext.Provider>
+                </View>
             ),
             shouldShow: true,
             isSupplementary: false,

src/components/MultiGestureCanvas/usePinchGesture.ts

@@ -125,6 +125,8 @@ const usePinchGesture = ({
             pinchOrigin.y.set(adjustedFocal.y);
         })
         .onChange((evt) => {
+            'worklet';
+
             // Disable the pinch gesture if one finger is released,
             // to prevent the content from shaking/jumping
             if (evt.numberOfPointers !== 2) {

src/components/MultiGestureCanvas/useTapGestures.ts

@@ -122,6 +122,8 @@ const useTapGestures = ({
     const doubleTapGesture = Gesture.Tap()
         // The first argument is not used, but must be defined
         .onTouchesDown((_evt, state) => {
+            'worklet';
+
             if (!shouldDisableTransformationGestures.get()) {
                 return;
             }
@@ -132,6 +134,8 @@ const useTapGestures = ({
         .maxDelay(150)
         .maxDistance(20)
         .onEnd((evt) => {
+            'worklet';
+
             const triggerScaleChangedEvent = () => {
                 'worklet';
 
@@ -153,9 +157,13 @@ const useTapGestures = ({
         .numberOfTaps(1)
         .maxDuration(125)
         .onBegin(() => {
+            'worklet';
+
             stopAnimation();
         })
         .onFinalize((_evt, success) => {
+            'worklet';
+
             if (!success || onTap === undefined) {
                 return;
             }

src/components/ReceiptAudit.tsx

@@ -50,7 +50,19 @@ function ReceiptAudit({notes, shouldShowAuditResult}: ReceiptAuditProps) {
 
 function ReceiptAuditMessages({notes = []}: {notes?: string[]}) {
     const styles = useThemeStyles();
-    return <View style={[styles.mtn1, styles.mb2, styles.ph5, styles.gap1]}>{notes.length > 0 && notes.map((message) => <Text style={[styles.textLabelError]}>{message}</Text>)}</View>;
+    return (
+        <View style={[styles.mtn1, styles.mb2, styles.ph5, styles.gap1]}>
+            {notes.length > 0 &&
+                notes.map((message) => (
+                    <Text
+                        style={[styles.textLabelError]}
+                        key={message}
+                    >
+                        {message}
+                    </Text>
+                ))}
+        </View>
+    );
 }
 
 export {ReceiptAuditMessages};

src/components/ReferralProgramCTA.tsx

@@ -7,6 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Navigation from '@src/libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
+import {getButtonRole, getButtonStyle} from './Button/utils';
 import Icon from './Icon';
 import {Close} from './Icon/Expensicons';
 import {PressableWithoutFeedback} from './Pressable';
@@ -52,9 +53,19 @@ function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralPro
             onPress={() => {
                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
             }}
-            style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
+            style={[
+                styles.br2,
+                styles.highlightBG,
+                styles.flexRow,
+                styles.justifyContentBetween,
+                styles.alignItemsCenter,
+                {gap: 10, padding: 10},
+                styles.pl5,
+                getButtonStyle(styles, true),
+                style,
+            ]}
             accessibilityLabel="referral"
-            role={CONST.ROLE.BUTTON}
+            role={getButtonRole(true)}
         >
             <Text>
                 {translate(`referralProgram.${referralContentType}.buttonText1`)}

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -79,11 +79,11 @@ function ReportActionItemImages({images, size, total, isHovered = false, onPress
                     const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
                     const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
                     return (
-                        <ImageBehaviorContextProvider shouldSetAspectRatioInStyle={numberOfShownImages === 1 ? true : Str.isPDF(filename ?? '')}>
-                            <View
-                                key={`${index}-${image}`}
-                                style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
-                            >
+                        <ImageBehaviorContextProvider
+                            key={`${index}-${image}`}
+                            shouldSetAspectRatioInStyle={numberOfShownImages === 1 ? true : Str.isPDF(filename ?? '')}
+                        >
+                            <View style={[styles.reportActionItemImage, borderStyle, hoverStyle]}>
                                 <ReportActionItemImage
                                     thumbnail={thumbnail}
                                     fileExtension={fileExtension}