fix: remove blur from attachments (#5475)

* fix: remove the blur view

* update story

* remove raect-native-blur

* update test

* change blurcomponent to overlaycomponent

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

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

@@ -1,32 +1,25 @@
 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 = ({
+const OverlayComponent = ({
 	loading = false,
 	style = {},
-	iconName,
+	iconName
-	showOverlay = false
 }: {
 	loading: boolean;
 	style: StyleProp<ViewStyle>;
 	iconName: TIconsName;
-	showOverlay?: boolean;
 }) => {
 	const { colors } = useTheme();
 
 	return (
 		<>
-			{!showOverlay ? (
+			<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
-				<BlurView style={[style, styles.blurView]} blurType={'dark'} blurAmount={2} />
-			) : (
-				<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
-			)}
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
 			</View>
@@ -34,4 +27,4 @@ const BlurComponent = ({
 	);
 };
 
-export default BlurComponent;
+export default OverlayComponent;

app/containers/message/Image.tsx

@@ -15,7 +15,7 @@ import {
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
 import { useTheme } from '../../theme';
 import Markdown from '../markdown';
-import BlurComponent from './Components/BlurComponent';
+import BlurComponent from './Components/OverlayComponent';
 import MessageContext from './Context';
 import Touchable from './Touchable';
 import styles from './styles';
@@ -44,7 +44,7 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
 		<Touchable
 			disabled={disabled}
 			onPress={onPress}
-			style={[styles.imageContainer, styles.mustWrapBlur]}
+			style={styles.imageContainer}
 			background={Touchable.Ripple(colors.bannerBackground)}
 		>
 			{children}

app/containers/message/Video.tsx

@@ -21,11 +21,10 @@ import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import { LISTENER } from '../Toast';
 import Markdown from '../markdown';
-import BlurComponent from './Components/BlurComponent';
+import BlurComponent from './Components/OverlayComponent';
 import MessageContext from './Context';
 import Touchable from './Touchable';
 import { fileDownload } from './helpers/fileDownload';
-import messageStyles from './styles';
 import { DEFAULT_MESSAGE_HEIGHT } from './utils';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
@@ -78,12 +77,7 @@ const CancelIndicator = () => {
 const Thumbnail = ({ loading, thumbnailUrl, cached }: { loading: boolean; thumbnailUrl?: string; cached: boolean }) => (
 	<>
 		{thumbnailUrl ? <FastImage style={styles.thumbnailImage} source={{ uri: thumbnailUrl }} /> : null}
-		<BlurComponent
+		<BlurComponent iconName={cached ? 'play-filled' : 'arrow-down-circle'} loading={loading} style={styles.button} />
-			iconName={cached ? 'play-filled' : 'arrow-down-circle'}
-			loading={loading}
-			style={styles.button}
-			showOverlay={cached}
-		/>
 		{loading ? <CancelIndicator /> : null}
 	</>
 );
@@ -230,7 +224,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
 			<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
 			<Touchable
 				onPress={onPress}
-				style={[styles.button, messageStyles.mustWrapBlur, { backgroundColor: themes[theme].videoBackground }]}
+				style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<Thumbnail loading={loading} cached={cached} />

app/containers/message/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import { isAndroid, isTablet } from '../../lib/methods/helpers';
+import { isTablet } from '../../lib/methods/helpers';
 
 export default StyleSheet.create({
 	root: {
@@ -184,9 +184,5 @@ export default StyleSheet.create({
 		position: 'absolute',
 		justifyContent: 'center',
 		alignItems: 'center'
-	},
-	mustWrapBlur: {
-		// https://github.com/Kureev/react-native-blur/issues/520#issuecomment-1378339192 Fix BlurView
-		overflow: isAndroid ? 'hidden' : 'visible'
 	}
 });

app/lib/constants/colors.ts

@@ -103,7 +103,7 @@ export const colors = {
 		n900: '#1F2329',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#156FF5',
 		buttonBackgroundSecondaryDefault: '#E4E7EA',
 		buttonFontPrimary: '#FFFFFF',
@@ -191,7 +191,7 @@ export const colors = {
 		n900: '#FFFFFF',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#3976D1',
 		buttonBackgroundSecondaryDefault: '#2F343D',
 		buttonFontPrimary: '#FFFFFF',
@@ -279,7 +279,7 @@ export const colors = {
 		n900: '#FFFFFF',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#3976D1',
 		buttonBackgroundSecondaryDefault: '#2F343D',
 		buttonFontPrimary: '#FFFFFF',

ios/Podfile.lock

@@ -358,8 +358,6 @@ PODS:
     - glog
   - react-native-background-timer (2.4.1):
     - React-Core
-  - react-native-blur (4.3.2):
-    - React-Core
   - react-native-cameraroll (5.6.1):
     - React-Core
   - react-native-cookies (6.2.1):
@@ -623,7 +621,6 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
-  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
@@ -770,8 +767,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
-  react-native-blur:
-    :path: "../node_modules/@react-native-community/blur"
   react-native-cameraroll:
     :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-cookies:
@@ -932,7 +927,6 @@ SPEC CHECKSUMS:
   React-jsinspector: cab4d37ebde480f84c79ac89568abbf76b916c3e
   React-logger: b75b80500ea80457b2cf169427d66de986cdcb29
   react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
-  react-native-blur: cfdad7b3c01d725ab62a8a729f42ea463998afa2
   react-native-cameraroll: 2f08db1ecc9b73dbc01f89335d6d5179fac2894c
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
   react-native-document-picker: f5ec1a712ca2a975c233117f044817bb8393cad4

package.json

@@ -37,7 +37,6 @@
 		"@react-native-camera-roll/camera-roll": "5.6.1",
 		"@react-native-clipboard/clipboard": "^1.8.5",
 		"@react-native-community/art": "^1.2.0",
-		"@react-native-community/blur": "^4.1.0",
 		"@react-native-community/datetimepicker": "3.5.2",
 		"@react-native-community/hooks": "2.6.0",
 		"@react-native-community/netinfo": "6.0.0",

yarn.lock

@@ -3368,9 +3368,9 @@
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@^7.21.0":
-  version "7.23.6"
+  version "7.23.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
-  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -5258,11 +5258,6 @@
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-"@react-native-community/blur@^4.1.0":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.3.2.tgz#185a2c7dd03ba168cc95069bc4742e9505fd6c6c"
-  integrity sha512-0ID+pyZKdC4RdgC7HePxUQ6JmsbNrgz03u+6SgqYpmBoK/rE+7JffqIw7IEsfoKitLEcRNLGekIBsfwCqiEkew==
-
 "@react-native-community/cli-debugger-ui@^7.0.3":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-7.0.3.tgz#3eeeacc5a43513cbcae56e5e965d77726361bcb4"