diff --git a/app/containers/message/Components/BlurComponent/index.tsx b/app/containers/message/Components/BlurComponent/index.tsx new file mode 100644 index 000000000..333af5ecf --- /dev/null +++ b/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; + iconName: TIconsName; +}) => { + const { theme, colors } = useTheme(); + return ( + <> + + + {loading ? : } + + + ); +}; + +export default BlurComponent; diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx index 926e1f30c..8d8e4a5ca 100644 --- a/app/containers/message/Image.tsx +++ b/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 { CustomIcon } from '../CustomIcon'; +import BlurComponent from './Components/BlurComponent'; 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 ( - <> - - - {loading ? : } - - - ); -}; - 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 ? : null} + {!cached ? : null} ); }); diff --git a/app/containers/message/styles.ts b/app/containers/message/styles.ts index d0295c354..fec5d62f3 100644 --- a/app/containers/message/styles.ts +++ b/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',