refactor how to test if it's an image

app/containers/message/Urls.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import FastImage from 'react-native-fast-image';
@@ -14,7 +14,7 @@ import EventEmitter from '../../lib/methods/helpers/events';
 import I18n from '../../i18n';
 import MessageContext from './Context';
 import { IUrl } from '../../definitions';
-import { isImage, isValidURL } from '../../lib/methods/helpers';
+import { isImageURL } from '../../lib/methods/helpers';
 
 const styles = StyleSheet.create({
 	button: {
@@ -103,6 +103,18 @@ const UrlContent = React.memo(
 
 const Url = React.memo(
 	({ url, index, theme }: { url: IUrl; index: number; theme: TSupportedThemes }) => {
+		const [isImageUrlFromParamUrl, setIsImageUrlFromParamUrl] = useState(false);
+
+		useEffect(() => {
+			if (!url.image && url.url) {
+				const testImageUrl = async () => {
+					const result = await isImageURL(url.url);
+					setIsImageUrlFromParamUrl(result);
+				};
+				testImageUrl();
+			}
+		}, []);
+
 		if (!url || url?.ignoreParse) {
 			return null;
 		}
@@ -114,12 +126,13 @@ const Url = React.memo(
 			EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
 		};
 
-		let imageUrl;
+		let imageUrl = '';
 
 		if (url.image) {
 			imageUrl = url.image;
-		} else {
+		}
-			imageUrl = isImage(url.url) && isValidURL(url.url) ? url.url : '';
+		if (isImageUrlFromParamUrl) {
+			imageUrl = url.url;
 		}
 
 		const hasContent = !!url.title || !!url.description;

app/lib/methods/helpers/image.test.ts

@@ -1,26 +0,0 @@
-import { isImage } from './image';
-
-const imageJPG = 'https://i.redd.it/t2mul61342l91.jpg';
-const imagePNG = 'https://user-images.githubusercontent.com/47038980/205175493-fc1f7fdd-d10a-4099-88c4-146bac69e223.png';
-const imageSVG = 'https://i.redd.it/t2mul61342l91.svg';
-const imageUrlWithQueryParams =
-	'https://i.ytimg.com/vi/suFuJZCfC7g/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIGUoZTAP&rs=AOn4CLB_0OCFNuoCRBlaTJEa2PPOOHxkbQ';
-
-describe("Evaluate if the link is returning an image's type", () => {
-	test('return true when the link ends with .jpg', () => {
-		const result = isImage(imageJPG);
-		expect(result).toBe(true);
-	});
-	test('return true when the link ends with .png', () => {
-		const result = isImage(imagePNG);
-		expect(result).toBe(true);
-	});
-	test('return false when the link ends with .svg', () => {
-		const result = isImage(imageSVG);
-		expect(result).toBe(false);
-	});
-	test('return true when the link ends with .jpg and query params', () => {
-		const result = isImage(imageUrlWithQueryParams);
-		expect(result).toBe(true);
-	});
-});

app/lib/methods/helpers/image.ts

@@ -1,6 +1,10 @@
-// Fast Image can't render a svg image from a uri yet, because of that we aren't test the svg within the RegEx
+import { Image } from 'react-native';
-const regExpUrlImage = new RegExp(
+
-	'.(jpg|jpeg|png|webp|avif|gif)' + // type of the URL
+export const isImageURL = async (url: string) => {
-		'(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+	try {
-);
+		const result = await Image.prefetch(url);
-export const isImage = (url: string) => regExpUrlImage.test(url);
+		return result;
+	} catch {
+		return false;
+	}
+};