Fix: SVG icons do not show on native

src/components/AttachmentModal.tsx

@@ -130,6 +130,9 @@ type AttachmentModalProps = AttachmentModalOnyxProps & {
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar?: boolean;
 
+    /** Denotes whether it can be an icon (ex: SVG) */
+    maybeIcon?: boolean;
+
     /** Whether it is a receipt attachment or not */
     isReceiptAttachment?: boolean;
 
@@ -154,6 +157,7 @@ function AttachmentModal({
     onCarouselAttachmentChange = () => {},
     isReceiptAttachment = false,
     isWorkspaceAvatar = false,
+    maybeIcon = false,
     transaction,
     parentReport,
     parentReportActions,
@@ -531,6 +535,7 @@ function AttachmentModal({
                                     file={file}
                                     onToggleKeyboard={updateConfirmButtonVisibility}
                                     isWorkspaceAvatar={isWorkspaceAvatar}
+                                    maybeIcon={maybeIcon}
                                     fallbackSource={fallbackSource}
                                     isUsedInAttachmentModal
                                     transactionID={transaction?.transactionID}

src/components/Attachments/AttachmentView/index.js

@@ -48,6 +48,9 @@ const propTypes = {
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar: PropTypes.bool,
 
+    /** Denotes whether it is an icon (ex: SVG) */
+    maybeIcon: PropTypes.bool,
+
     /** The id of the transaction related to the attachment */
     // eslint-disable-next-line react/no-unused-prop-types
     transactionID: PropTypes.string,
@@ -60,6 +63,7 @@ const defaultProps = {
     onToggleKeyboard: () => {},
     containerStyles: [],
     isWorkspaceAvatar: false,
+    maybeIcon: false,
     transactionID: '',
 };
 
@@ -80,6 +84,7 @@ function AttachmentView({
     carouselActiveItemIndex,
     isUsedInAttachmentModal,
     isWorkspaceAvatar,
+    maybeIcon,
     fallbackSource,
     transaction,
 }) {
@@ -91,8 +96,9 @@ function AttachmentView({
 
     useNetwork({onReconnect: () => setImageError(false)});
 
-    // Handles case where source is a component (ex: SVG)
-    if (_.isFunction(source)) {
+    // Handles case where source is a component (ex: SVG) or a number
+    // Number may represent a SVG or an image
+    if ((maybeIcon && typeof source === 'number') || _.isFunction(source)) {
         let iconFillColor = '';
         let additionalStyles = [];
         if (isWorkspaceAvatar) {

src/components/AvatarWithImagePicker.js

@@ -338,6 +338,7 @@ function AvatarWithImagePicker({
                     source={previewSource}
                     originalFileName={originalFileName}
                     fallbackSource={fallbackIcon}
+                    maybeIcon={isUsingDefaultAvatar}
                 >
                     {({show}) => (
                         <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>

src/pages/DetailsPage.js

@@ -138,6 +138,7 @@ function DetailsPage(props) {
                                     source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
                                     isAuthTokenRequired
                                     originalFileName={details.originalFileName}
+                                    maybeIcon
                                 >
                                     {({show}) => (
                                         <PressableWithoutFocus

src/pages/ReportAvatar.tsx

@@ -35,6 +35,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
                 Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? ''));
             }}
             isWorkspaceAvatar
+            maybeIcon
             originalFileName={policy?.originalFileName ?? policyName}
             shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
             isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}