How To Make Partial Blur Effect in React Native - react-native

Question

I'm trying to create a 'focus' effect on images in React Native, but I'm unable to create this effect using Blur and Overlay.
Does anyone know how it might be done .. ?
Here's an example of what I had in mind:

Answer 1

You may checkout the react-native-blur library.
Their example shows a blurred background with buttons on top. You could easily place an image on the blur instead of buttons.
Hope that helps.
https://github.com/react-native-community/react-native-blur

Answer 2

npm i react-native-blur-overlay use this library and there are several properties to partially blur your images accordingly how you need it.

Answer 3

use MaskedView from #react-native-masked-view/masked-view along with BlurView from #react-native-community/blur to get this result
snack link
result:
code:
export default function App() {
const { width, height } = useWindowDimensions();
return (
<View style={styles.container}>
<MakedView
style={{ width, height, alignItems: 'center' }}
maskElement={
<BlurView
tint="dark"
intensity={54}
style={{
width,
height,
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#fff',
}}></View>
</BlurView>
}>
<Image
style={{ width, height, backgroundColor: 'transparent' }}
source={{
uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
}}
/>
</MakedView>
</View>
);
}