refactor and added test

app/containers/message/Message.stories.tsx

@@ -634,6 +634,28 @@ export const URL = () => (
 	</>
 );
 
+export const URLImagePreview = () => (
+	<>
+		<Message
+			urls={[
+				{
+					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif',
+					title: 'Google',
+					description:
+						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
+				}
+			]}
+		/>
+		<Message
+			urls={[
+				{
+					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif'
+				}
+			]}
+		/>
+	</>
+);
+
 export const CustomFields = () => (
 	<>
 		<Message

app/containers/message/Urls.tsx

@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
 });
 
 const UrlImage = React.memo(
-	({ image }: { image: string }) => {
+	({ image, hasContent }: { image: string; hasContent: boolean }) => {
 		const { baseUrl, user } = useContext(MessageContext);
 
 		if (!image) {
@@ -61,7 +61,13 @@ const UrlImage = React.memo(
 		}
 
 		image = image.includes('http') ? image : `${baseUrl}/${image}?rc_uid=${user.id}&rc_token=${user.token}`;
-		return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
+		return (
+			<FastImage
+				source={{ uri: image }}
+				style={[styles.image, !hasContent && { borderRadius: 4 }]}
+				resizeMode={FastImage.resizeMode.cover}
+			/>
+		);
 	},
 	(prevProps, nextProps) => prevProps.image === nextProps.image
 );
@@ -116,6 +122,9 @@ const Url = React.memo(
 			imageUrl = isImage(url.url) && isValidURL(url.url) ? url.url : '';
 		}
 
+		const hasContent = !!url.title || !!url.description;
+		console.log('🚀 ~ file: Urls.tsx:126 ~ hasContent', hasContent);
+
 		return (
 			<Touchable
 				onPress={onPress}
@@ -132,8 +141,8 @@ const Url = React.memo(
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<>
-					<UrlImage image={imageUrl} />
-					{url.title || url.description ? <UrlContent title={url.title} description={url.description} theme={theme} /> : null}
+					<UrlImage image={imageUrl} hasContent={hasContent} />
+					{hasContent ? <UrlContent title={url.title} description={url.description} theme={theme} /> : null}
 				</>
 			</Touchable>
 		);

app/lib/methods/helpers/image.ts

@@ -1,2 +1,6 @@
-const regExpUrlImage = new RegExp(/\.(jpg|jpeg|png|webp|avif|gif|svg)$/);
+// Fast Image can't render a svg image from a uri yet, because of that we aren't test the svg within the RegEx
+const regExpUrlImage = new RegExp(
+	'.(jpg|jpeg|png|webp|avif|gif)' + // type of the URL
+		'(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+);
 export const isImage = (url: string) => regExpUrlImage.test(url);