From 3965c7040f93b575a97b818954d6e399f0179d7c Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Wed, 1 Oct 2025 15:35:56 -0300
Subject: [PATCH 1/2] fix: quote image not loading

---
 .../message/Components/Attachments/Quote.tsx  |  2 +-
 .../message/hooks/useMediaAutoDownload.tsx    | 22 ++++++++++++++++++-
 .../methods/helpers/formatAttachmentUrl.ts    | 12 +++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/containers/message/Components/Attachments/Quote.tsx b/app/containers/message/Components/Attachments/Quote.tsx
index 16c77bd61b4..f7be8bdc872 100644
--- a/app/containers/message/Components/Attachments/Quote.tsx
+++ b/app/containers/message/Components/Attachments/Quote.tsx
@@ -11,7 +11,7 @@ import { getMessageFromAttachment } from '../../utils';
 const isQuoteAttachment = (file?: IAttachment): boolean => {
 	if (!file) return false;
 
-	if (file.image_url || file.audio_url || file.video_url || file.collapsed) {
+	if (!file.color && !file.text && (file.image_url || file.audio_url || file.video_url || file.collapsed)) {
 		return false;
 	}
 
diff --git a/app/containers/message/hooks/useMediaAutoDownload.tsx b/app/containers/message/hooks/useMediaAutoDownload.tsx
index f2e556feca4..06afbf5ccc7 100644
--- a/app/containers/message/hooks/useMediaAutoDownload.tsx
+++ b/app/containers/message/hooks/useMediaAutoDownload.tsx
@@ -35,6 +35,19 @@ const getFileProperty = (file: IAttachment, fileType: MediaTypes, property: 'url
 	}
 };
 
+const getOriginalURL = (file: IAttachment): string | null => {
+	if (file.image_url) {
+		return file.image_url;
+	}
+	if (file.video_url) {
+		return file.video_url;
+	}
+	if (file.audio_url) {
+		return file.audio_url;
+	}
+	return null;
+};
+
 export const useMediaAutoDownload = ({
 	file,
 	author,
@@ -48,7 +61,14 @@ export const useMediaAutoDownload = ({
 	const { id, baseUrl, user } = useContext(MessageContext);
 	const [status, setStatus] = useState<TDownloadState>('to-download');
 	const [currentFile, setCurrentFile] = useFile(file, id);
-	const url = formatAttachmentUrl(file.title_link || getFileProperty(currentFile, fileType, 'url'), user.id, user.token, baseUrl);
+	const originalUrl = getOriginalURL(file);
+	const url = formatAttachmentUrl(
+		file.title_link || getFileProperty(currentFile, fileType, 'url'),
+		user.id,
+		user.token,
+		baseUrl,
+		originalUrl
+	);
 	const isEncrypted = currentFile.e2e === 'pending';
 
 	useEffect(() => {
diff --git a/app/lib/methods/helpers/formatAttachmentUrl.ts b/app/lib/methods/helpers/formatAttachmentUrl.ts
index 14de73785e9..a4f47b0cc35 100644
--- a/app/lib/methods/helpers/formatAttachmentUrl.ts
+++ b/app/lib/methods/helpers/formatAttachmentUrl.ts
@@ -10,13 +10,23 @@ function setParamInUrl({ url, token, userId }: { url: string; token: string; use
 	return urlObj.toString();
 }
 
-export const formatAttachmentUrl = (attachmentUrl: string | undefined, userId: string, token: string, server: string): string => {
+export const formatAttachmentUrl = (
+	attachmentUrl: string | undefined,
+	userId: string,
+	token: string,
+	server: string,
+	_originalUrl?: string | null
+): string => {
 	const protectFiles = store.getState().settings.FileUpload_ProtectFiles;
 
 	if ((attachmentUrl && isImageBase64(attachmentUrl)) || attachmentUrl?.startsWith('file://')) {
 		return attachmentUrl;
 	}
 	if (attachmentUrl && attachmentUrl.startsWith('http')) {
+		if (_originalUrl && !_originalUrl.startsWith(server)) {
+			return _originalUrl;
+		}
+
 		if (attachmentUrl.includes('rc_token')) {
 			return encodeURI(attachmentUrl);
 		}

From 5bb26804a8a15b8eaf6dd9f02291d5a162239e71 Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Fri, 3 Oct 2025 17:09:25 -0300
Subject: [PATCH 2/2] chore: snapshot tests

---
 app/containers/message/Message.stories.tsx    |   14 +
 .../__snapshots__/Message.test.tsx.snap       | 1296 +++++++++++++++++
 2 files changed, 1310 insertions(+)

diff --git a/app/containers/message/Message.stories.tsx b/app/containers/message/Message.stories.tsx
index 234dfef1a57..8c1b25b3cf4 100644
--- a/app/containers/message/Message.stories.tsx
+++ b/app/containers/message/Message.stories.tsx
@@ -2017,3 +2017,17 @@ export const CollapsedAttachmentsLargeFont = () => (
 		<MessageLargeFont msg='Message' attachments={[{ ...collapsedAttachments, collapsed: false }]} />
 	</>
 );
+
+const attachmentWithTextAndLink = [
+	{
+		title: 'Rocket.Chat',
+		title_link: 'https://rocket.chat',
+		text: 'Rocket.Chat, the best open source chat',
+		image_url: 'https://rc.jena.de/images/integration-attachment-example.png',
+		color: '#764FA5'
+	}
+];
+
+export const AttachmentWithTextAndLink = () => <Message attachments={attachmentWithTextAndLink} />;
+
+export const AttachmentWithTextAndLinkLargeFont = () => <MessageLargeFont attachments={attachmentWithTextAndLink} />;
diff --git a/app/containers/message/__snapshots__/Message.test.tsx.snap b/app/containers/message/__snapshots__/Message.test.tsx.snap
index 2740ca0f68f..75c4b87fb50 100644
--- a/app/containers/message/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/__snapshots__/Message.test.tsx.snap
@@ -710,6 +710,1302 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
+exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "backgroundColor": undefined,
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM undefined.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
+          }
+        }
+        testID="message-undefined"
+      >
+        <View
+          style={
+            {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "flex-end",
+                "width": 36,
+              }
+            }
+          >
+            <View
+              accessible={true}
+              style={
+                [
+                  {
+                    "borderRadius": 4,
+                    "height": 36,
+                    "width": 36,
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+              testID="avatar"
+            >
+              <View
+                accessibilityLabel="diego.mello's avatar"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={"[React.ref]"}
+                  contentFit="cover"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={36}
+                  nativeViewRef={"[React.ref]"}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  priority="high"
+                  source={
+                    [
+                      {
+                        "headers": {
+                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                        },
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                      },
+                    ]
+                  }
+                  style={
+                    {
+                      "borderRadius": 4,
+                      "height": 36,
+                      "width": 36,
+                    }
+                  }
+                  transition={null}
+                  width={36}
+                />
+              </View>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "flex": 1,
+                "marginLeft": 10,
+              }
+            }
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "flexShrink": 1,
+                      "gap": 4,
+                      "opacity": 1,
+                    }
+                  }
+                  testID="username-header-diego.mello"
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "flexShrink": 1,
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontWeight": "600",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                  <Text
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 13,
+                          "fontWeight": "400",
+                          "lineHeight": 18,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    10:00 AM
+                  </Text>
+                </View>
+                <View
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                />
+              </View>
+              <View
+                style={
+                  {
+                    "gap": 4,
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "gap": 4,
+                      }
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": false,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      onClick={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "alignItems": "center",
+                          "alignSelf": "flex-start",
+                          "borderColor": "#764FA5",
+                          "borderLeftWidth": 2,
+                          "flex": 1,
+                          "flexDirection": "row",
+                          "opacity": 1,
+                        }
+                      }
+                      testID="reply-undefined-Rocket.Chat, the best open source chat"
+                    >
+                      <View
+                        style={
+                          {
+                            "borderRadius": 4,
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "paddingLeft": 8,
+                            "paddingVertical": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "flexDirection": "column",
+                              "gap": 4,
+                              "width": 200,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flex": 1,
+                                "flexDirection": "row",
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  onLongPress={[Function]}
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Rocket.Chat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=", the best open source chat"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  , the best open source chat
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "flexDirection": "column",
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          [
+                            {
+                              "borderRadius": 4,
+                              "minHeight": 200,
+                              "overflow": "hidden",
+                              "width": "100%",
+                            },
+                            {
+                              "borderColor": "#CBCED1",
+                              "borderRadius": 4,
+                              "borderWidth": 1,
+                              "overflow": "hidden",
+                            },
+                          ]
+                        }
+                      />
+                      <View
+                        style={
+                          [
+                            [
+                              {
+                                "borderRadius": 4,
+                                "minHeight": 200,
+                                "overflow": "hidden",
+                                "width": "100%",
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ],
+                            {
+                              "borderWidth": 0,
+                              "bottom": 0,
+                              "left": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            },
+                            {
+                              "backgroundColor": "#E4E7EA",
+                            },
+                          ]
+                        }
+                      />
+                      <View
+                        style={
+                          [
+                            [
+                              {
+                                "borderRadius": 4,
+                                "minHeight": 200,
+                                "overflow": "hidden",
+                                "width": "100%",
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ],
+                            {
+                              "alignItems": "center",
+                              "justifyContent": "center",
+                              "position": "absolute",
+                            },
+                          ]
+                        }
+                      >
+                        <Text
+                          allowFontScaling={false}
+                          selectable={false}
+                          style={
+                            [
+                              {
+                                "color": "#2F343D",
+                                "fontSize": 54,
+                              },
+                              [
+                                {
+                                  "lineHeight": 54,
+                                },
+                                undefined,
+                              ],
+                              {
+                                "fontFamily": "custom",
+                                "fontStyle": "normal",
+                                "fontWeight": "normal",
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          
+                        </Text>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "bottom": 8,
+                            "flexDirection": "row",
+                            "gap": 8,
+                            "position": "absolute",
+                            "right": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "backgroundColor": undefined,
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM undefined.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
+          }
+        }
+        testID="message-undefined"
+      >
+        <View
+          style={
+            {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "flex-end",
+                "width": 46.800000000000004,
+              }
+            }
+          >
+            <View
+              accessible={true}
+              style={
+                [
+                  {
+                    "borderRadius": 4,
+                    "height": 46.800000000000004,
+                    "width": 46.800000000000004,
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+              testID="avatar"
+            >
+              <View
+                accessibilityLabel="diego.mello's avatar"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={"[React.ref]"}
+                  contentFit="cover"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={46.800000000000004}
+                  nativeViewRef={"[React.ref]"}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  priority="high"
+                  source={
+                    [
+                      {
+                        "headers": {
+                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                        },
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                      },
+                    ]
+                  }
+                  style={
+                    {
+                      "borderRadius": 4,
+                      "height": 46.800000000000004,
+                      "width": 46.800000000000004,
+                    }
+                  }
+                  transition={null}
+                  width={46.800000000000004}
+                />
+              </View>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "flex": 1,
+                "marginLeft": 10,
+              }
+            }
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "flexShrink": 1,
+                      "gap": 4,
+                      "opacity": 1,
+                    }
+                  }
+                  testID="username-header-diego.mello"
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "flexShrink": 1,
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontWeight": "600",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                </View>
+                <View
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                />
+              </View>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 13,
+                      "fontWeight": "400",
+                      "lineHeight": 18,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+              <View
+                style={
+                  {
+                    "gap": 4,
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "gap": 4,
+                      }
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": false,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      onClick={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "alignItems": "center",
+                          "alignSelf": "flex-start",
+                          "borderColor": "#764FA5",
+                          "borderLeftWidth": 2,
+                          "flex": 1,
+                          "flexDirection": "row",
+                          "opacity": 1,
+                        }
+                      }
+                      testID="reply-undefined-Rocket.Chat, the best open source chat"
+                    >
+                      <View
+                        style={
+                          {
+                            "borderRadius": 4,
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "paddingLeft": 8,
+                            "paddingVertical": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "flexDirection": "column",
+                              "gap": 4,
+                              "width": 200,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flex": 1,
+                                "flexDirection": "row",
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  onLongPress={[Function]}
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Rocket.Chat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=", the best open source chat"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  , the best open source chat
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "flexDirection": "column",
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          [
+                            {
+                              "borderRadius": 4,
+                              "minHeight": 200,
+                              "overflow": "hidden",
+                              "width": "100%",
+                            },
+                            {
+                              "borderColor": "#CBCED1",
+                              "borderRadius": 4,
+                              "borderWidth": 1,
+                              "overflow": "hidden",
+                            },
+                          ]
+                        }
+                      />
+                      <View
+                        style={
+                          [
+                            [
+                              {
+                                "borderRadius": 4,
+                                "minHeight": 200,
+                                "overflow": "hidden",
+                                "width": "100%",
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ],
+                            {
+                              "borderWidth": 0,
+                              "bottom": 0,
+                              "left": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            },
+                            {
+                              "backgroundColor": "#E4E7EA",
+                            },
+                          ]
+                        }
+                      />
+                      <View
+                        style={
+                          [
+                            [
+                              {
+                                "borderRadius": 4,
+                                "minHeight": 200,
+                                "overflow": "hidden",
+                                "width": "100%",
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ],
+                            {
+                              "alignItems": "center",
+                              "justifyContent": "center",
+                              "position": "absolute",
+                            },
+                          ]
+                        }
+                      >
+                        <Text
+                          allowFontScaling={false}
+                          selectable={false}
+                          style={
+                            [
+                              {
+                                "color": "#2F343D",
+                                "fontSize": 70.2,
+                              },
+                              [
+                                {
+                                  "lineHeight": 70.2,
+                                },
+                                undefined,
+                              ],
+                              {
+                                "fontFamily": "custom",
+                                "fontStyle": "normal",
+                                "fontWeight": "normal",
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          
+                        </Text>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "bottom": 8,
+                            "flexDirection": "row",
+                            "gap": 8,
+                            "position": "absolute",
+                            "right": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`Story Snapshots: Avatar should match snapshot 1`] = `
 <RCTScrollView
   style={