Open parmarkamlesh opened 3 years ago
I'm having the same issue with the latest version
I'm having the same issue, did you guys managed to fix it?
I was able to work around this issue by moving all the elements I wanted to be on top of the BlurView into a child of the BlurView. I also had to add backgroundColor: 'transparent'
to the outermost child element or I would get layout issues on load (no padding or margin, items would collapse onto each other).
<ImageBackground
source={image}
resizeMode="cover"
style={{
flex: 1,
justifyContent: 'center'
}}
>
<BlurView
blurType="light"
blurAmount={4}
overlayColor="transparent"
reducedTransparencyFallbackColor="rgba(255,255,255,.2)"
>
<View style={{ padding: 40, backgroundColor: 'transparent' }}>
<Text style={{ fontSize: 40, color: 'white' }}>Hello, World</Text>
</View>
</BlurView>
</ImageBackground>
I also had to add zIndex: 1
to the container within BlurView
so that layouting worked again.
How to fix this glow effect when using BlurView, tested on android phones and emulator