fix: image preview crashing on large pdfs (#6763)

* Fix image preview crashing on large pdfs

* Update snapshots

* Update app/containers/message/Urls.tsx

Co-authored-by: Noach Magedman <[email protected]>

---------

Co-authored-by: Noach Magedman <[email protected]>

Author: diegolmello

app/containers/message/Urls.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactElement, useContext, useEffect, useLayoutEffect, useState } from 'react';
+import React, { type ReactElement, useCallback, useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Image } from 'expo-image';
@@ -123,33 +123,33 @@ const Url = ({ url }: { url: IUrl }) => {
 	const { colors, theme } = useTheme();
 	const { baseUrl, user } = useContext(MessageContext);
 	const API_Embed = useAppSelector(state => state.settings.API_Embed);
-	const [imageUrl, setImageUrl] = useState(url.image);
+	const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+	const getImageUrl = useCallback(() => {
+		const _imageUrl = url.image || url.url;
+
+		if (!_imageUrl) return null;
+		if (_imageUrl.startsWith('http')) return _imageUrl;
+		return `${baseUrl}/${_imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`;
+	}, [url.image, url.url, baseUrl, user.id, user.token]);
 
 	useEffect(() => {
 		const verifyUrlIsImage = async () => {
 			try {
-				const imageUrl = getImageUrl();
-				if (!imageUrl || !API_Embed) return;
+				const _imageUrl = getImageUrl();
+				if (!_imageUrl || !API_Embed) return;
 
-				const response = await axios.head(imageUrl);
+				const response = await axios.head(_imageUrl);
 				const contentType = response.headers['content-type'];
 				if (contentType?.startsWith?.('image/')) {
-					setImageUrl(imageUrl);
+					setImageUrl(_imageUrl);
 				}
 			} catch {
 				// do nothing
 			}
 		};
 		verifyUrlIsImage();
-	}, [url.image, url.url, API_Embed]);
-
-	const getImageUrl = () => {
-		const _imageUrl = url.image || url.url;
-
-		if (!_imageUrl) return null;
-		if (_imageUrl.includes('http')) return _imageUrl;
-		return `${baseUrl}/${_imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`;
-	};
+	}, [url.image, url.url, API_Embed, getImageUrl]);
 
 	const onPress = () => openLink(url.url, theme);
 

app/containers/message/__snapshots__/Message.test.tsx.snap

@@ -103864,14 +103864,6 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                     }
                   }
                 >
-                  <View
-                    style={
-                      {
-                        "flex": 1,
-                        "height": 150,
-                      }
-                    }
-                  />
                   <View
                     style={
                       {
@@ -106432,14 +106424,6 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                     }
                   }
                 >
-                  <View
-                    style={
-                      {
-                        "flex": 1,
-                        "height": 150,
-                      }
-                    }
-                  />
                   <View
                     style={
                       {