How To Make Partial Blur Effect in 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

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>
  );
}