From 389057aa2cc5b66fbb46d8968162488d3d226902 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Mon, 15 May 2023 19:53:29 -0300
Subject: [PATCH] refactor blur component

---
 .../message/Components/BlurComponent.tsx      | 28 +++++++++++++++++++
 app/containers/message/Image.tsx              | 22 +--------------
 2 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 app/containers/message/Components/BlurComponent.tsx

diff --git a/app/containers/message/Components/BlurComponent.tsx b/app/containers/message/Components/BlurComponent.tsx
new file mode 100644
index 000000000..2683c7549
--- /dev/null
+++ b/app/containers/message/Components/BlurComponent.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { BlurView } from '@react-native-community/blur';
+import { View } from 'react-native';
+
+import styles from '../styles';
+import RCActivityIndicator from '../../ActivityIndicator';
+import { CustomIcon } from '../../CustomIcon';
+import { useTheme } from '../../../theme';
+
+const BlurComponent = ({ loading = false }: { loading: boolean }) => {
+	const { theme, colors } = useTheme();
+
+	return (
+		<>
+			<BlurView
+				style={[styles.image, { position: 'absolute', borderWidth: 0, top: 0, left: 0, bottom: 0, right: 0 }]}
+				blurType={theme === 'light' ? 'light' : 'dark'}
+				blurAmount={10}
+				reducedTransparencyFallbackColor='white'
+			/>
+			<View style={[styles.image, { position: 'absolute', justifyContent: 'center', alignItems: 'center', borderWidth: 0 }]}>
+				{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
+			</View>
+		</>
+	);
+};
+
+export default BlurComponent;
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 09eb15ed0..4344e32e4 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -4,7 +4,6 @@ import FastImage from 'react-native-fast-image';
 import { dequal } from 'dequal';
 import { createImageProgress } from 'react-native-image-progress';
 import * as Progress from 'react-native-progress';
-import { BlurView } from '@react-native-community/blur';
 import * as FileSystem from 'expo-file-system';
 
 import Touchable from './Touchable';
@@ -16,10 +15,9 @@ import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../definitions';
 import { TSupportedThemes, useTheme } from '../../theme';
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
-import { CustomIcon } from '../CustomIcon';
-import RCActivityIndicator from '../ActivityIndicator';
 import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
 import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference';
+import BlurComponent from './Components/BlurComponent';
 
 interface IMessageButton {
 	children: React.ReactElement;
@@ -73,24 +71,6 @@ export const MessageImage = React.memo(
 	}
 );
 
-const BlurComponent = ({ loading = false }: { loading: boolean }) => {
-	const { theme, colors } = useTheme();
-
-	return (
-		<>
-			<BlurView
-				style={[styles.image, { position: 'absolute', borderWidth: 0, top: 0, left: 0, bottom: 0, right: 0 }]}
-				blurType={theme === 'light' ? 'light' : 'dark'}
-				blurAmount={10}
-				reducedTransparencyFallbackColor='white'
-			/>
-			<View style={[styles.image, { position: 'absolute', justifyContent: 'center', alignItems: 'center', borderWidth: 0 }]}>
-				{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
-			</View>
-		</>
-	);
-};
-
 const ImageContainer = React.memo(
 	({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => {
 		const [toDownload, setToDownload] = useState(true);