separate blurview

app/containers/message/Components/BlurComponent/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+
+import styles from '../../styles';
+import { useTheme } from '../../../../theme';
+import RCActivityIndicator from '../../../ActivityIndicator';
+import { CustomIcon, TIconsName } from '../../../CustomIcon';
+
+const BlurComponent = ({
+	loading = false,
+	style = {},
+	iconName
+}: {
+	loading: boolean;
+	style: StyleProp<ViewStyle>;
+	iconName: TIconsName;
+}) => {
+	const { theme, colors } = useTheme();
+	return (
+		<>
+			<BlurView
+				style={[style, styles.blurView]}
+				blurType={theme === 'light' ? 'light' : 'dark'}
+				blurAmount={10}
+				reducedTransparencyFallbackColor='white'
+			/>
+			<View style={[style, styles.blurIndicator]}>
+				{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
+			</View>
+		</>
+	);
+};
+
+export default BlurComponent;

app/containers/message/Image.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { StyleProp, TextStyle, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { dequal } from 'dequal';
-import { BlurView } from '@react-native-community/blur';
 
 import Touchable from './Touchable';
 import Markdown from '../markdown';
@@ -14,8 +13,7 @@ import { useTheme } from '../../theme';
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
 import { cancelDownload, downloadMediaFile, isDownloadActive, getMediaCache } from '../../lib/methods/handleMediaDownload';
 import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference';
-import RCActivityIndicator from '../ActivityIndicator';
+import BlurComponent from './Components/BlurComponent';
-import { CustomIcon } from '../CustomIcon';
 
 interface IMessageButton {
 	children: React.ReactElement;
@@ -47,23 +45,6 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
 	);
 });
 
-const BlurComponent = ({ loading = false }: { loading: boolean }) => {
-	const { theme, colors } = useTheme();
-	return (
-		<>
-			<BlurView
-				style={[styles.image, styles.imageBlur]}
-				blurType={theme === 'light' ? 'light' : 'dark'}
-				blurAmount={10}
-				reducedTransparencyFallbackColor='white'
-			/>
-			<View style={[styles.image, styles.imageIndicator]}>
-				{loading ? <RCActivityIndicator /> : <CustomIcon color={colors.buttonText} name='arrow-down-circle' size={54} />}
-			</View>
-		</>
-	);
-};
-
 export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: string; cached: boolean; loading: boolean }) => {
 	const { colors } = useTheme();
 	return (
@@ -73,7 +54,7 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
 				source={{ uri: encodeURI(imgUri) }}
 				resizeMode={FastImage.resizeMode.cover}
 			/>
-			{!cached ? <BlurComponent loading={loading} /> : null}
+			{!cached ? <BlurComponent loading={loading} style={styles.image} iconName='arrow-down-circle' /> : null}
 		</>
 	);
 });

app/containers/message/styles.ts

@@ -171,7 +171,7 @@ export default StyleSheet.create({
 		flex: 1,
 		marginLeft: 12
 	},
-	imageBlur: {
+	blurView: {
 		position: 'absolute',
 		borderWidth: 0,
 		top: 0,
@@ -179,7 +179,7 @@ export default StyleSheet.create({
 		bottom: 0,
 		right: 0
 	},
-	imageIndicator: {
+	blurIndicator: {
 		position: 'absolute',
 		justifyContent: 'center',
 		alignItems: 'center',