From c0751eb959ca2ba7dda7079b582f8ea7a397b7cf Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 15 Jan 2024 10:54:00 +0700
Subject: [PATCH 1/2] fix: svg icons do not show on native

---
 src/components/AttachmentModal.js                  |  5 +++++
 src/components/Attachments/AttachmentView/index.js | 10 ++++++++--
 src/components/AvatarWithImagePicker.js            |  1 +
 src/components/RoomHeaderAvatars.js                |  2 ++
 src/pages/DetailsPage.js                           |  1 +
 src/pages/ProfilePage.js                           |  1 +
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bd8d535e540f..02ff89e7d0d9 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -92,6 +92,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,
+
     /** Whether it is a receipt attachment or not */
     isReceiptAttachment: PropTypes.bool,
 
@@ -114,6 +117,7 @@ const defaultProps = {
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
     isWorkspaceAvatar: false,
+    maybeIcon: false,
     isReceiptAttachment: false,
     canEditReceipt: false,
 };
@@ -480,6 +484,7 @@ function AttachmentModal(props) {
                                     file={file}
                                     onToggleKeyboard={updateConfirmButtonVisibility}
                                     isWorkspaceAvatar={props.isWorkspaceAvatar}
+                                    maybeIcon={props.maybeIcon}
                                     fallbackSource={props.fallbackSource}
                                     isUsedInAttachmentModal
                                     transactionID={props.transaction.transactionID}
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index b0060afdb813..49951bed54a3 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -44,6 +44,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,
@@ -56,6 +59,7 @@ const defaultProps = {
     onToggleKeyboard: () => {},
     containerStyles: [],
     isWorkspaceAvatar: false,
+    maybeIcon: false,
     transactionID: '',
 };
 
@@ -77,6 +81,7 @@ function AttachmentView({
     carouselActiveItemIndex,
     isUsedInAttachmentModal,
     isWorkspaceAvatar,
+    maybeIcon,
     fallbackSource,
     transaction,
 }) {
@@ -88,8 +93,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) {
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 71193147c292..b5dad7fdbef9 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -333,6 +333,7 @@ function AvatarWithImagePicker({
                     source={previewSource}
                     originalFileName={originalFileName}
                     fallbackSource={fallbackIcon}
+                    maybeIcon={isUsingDefaultAvatar}
                 >
                     {({show}) => (
                         <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index a3394fe71539..a216e5f78b8a 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -35,6 +35,7 @@ function RoomHeaderAvatars(props) {
                 isAuthTokenRequired
                 isWorkspaceAvatar={props.icons[0].type === CONST.ICON_TYPE_WORKSPACE}
                 originalFileName={props.icons[0].name}
+                maybeIcon
             >
                 {({show}) => (
                     <PressableWithoutFocus
@@ -79,6 +80,7 @@ function RoomHeaderAvatars(props) {
                             isAuthTokenRequired
                             originalFileName={icon.name}
                             isWorkspaceAvatar={icon.type === CONST.ICON_TYPE_WORKSPACE}
+                            maybeIcon
                         >
                             {({show}) => (
                                 <PressableWithoutFocus
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index f215b4167ab6..e22efbf4deb1 100755
--- a/src/pages/DetailsPage.js
+++ b/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
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index c0c782f176ca..bd28555ed9a1 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -160,6 +160,7 @@ function ProfilePage(props) {
                                 isAuthTokenRequired
                                 originalFileName={originalFileName}
                                 fallbackSource={fallbackIcon}
+                                maybeIcon
                             >
                                 {({show}) => (
                                     <PressableWithoutFocus

From 5ea2e8c458a71e4d644d476307b95cf9fd442fcf Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 31 Jan 2024 14:24:51 +0700
Subject: [PATCH 2/2] fix lint

---
 src/components/AttachmentModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 6176746b2758..1b986098657f 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -131,7 +131,7 @@ type AttachmentModalProps = AttachmentModalOnyxProps & {
     isWorkspaceAvatar?: boolean;
 
     /** Denotes whether it can be an icon (ex: SVG) */
-    maybeIcon?: boolean,
+    maybeIcon?: boolean;
 
     /** Whether it is a receipt attachment or not */
     isReceiptAttachment?: boolean;