I'm trying to create the below crude example using react-native-svg.
The background image is dynamic and requires a hollow circular mask. This also needs to blur that section of the background image. Whilst I can get a cutout blurred with no problem, I cannot figure out how to create it exactly like the hollow one below. Advice appreciated.
Code Example:
<ImageBackground
resizeMode="cover"
source={{ uri: route.params?.image }}
style={{ flex: 1}}
blurRadius={0}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Svg width={300} height={300}>
<Circle cx={150} cy={150} r={120} fill={"transparent"} />
<Circle
cx={150}
cy={150}
r={120}
strokeWidth={60}
stroke={hexToRgba("#000", "0.4")}
fill="transparent"
/>
</Svg>
</View>
</ImageBackground>
Result: