Open sendy34 opened 4 years ago
Hi 👋 I have the same problem, someone have a solution on this ?
Hey, found a workaround for this. A bit surprised that it is not in the documentation, but quite possible than I'm missing somethings.
Might not work for every use case, but pass the the rest of the content (The content that you don't want blurred) as children to the BlurView
Basically change this:
<View>
<Image key={"blurryImage"} source={src} style={styles.absolute} />
<Text style={styles.absolute}>Hi, I am some blurred text</Text>
{/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
<BlurView
style={styles.absolute}
blurType="light"
blurAmount={50}
reducedTransparencyFallbackColor="white"
/>
<Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
<View style={{ backgroundColor: "#000", height: 100, width: 200 }} />
</View>
To this:
<View>
<Image key={"blurryImage"} source={src} style={styles.absolute} />
<Text style={styles.absolute}>Hi, I am some blurred text</Text>
{/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
<BlurView
style={styles.absolute}
blurType="light"
blurAmount={50}
reducedTransparencyFallbackColor="white"
>
<Text>I'm the non blurred text because I got rendered inside of the BlurView</Text>
<View style={{ backgroundColor: "#000", height: 100, width: 200 }} />
</BlurView>
</View>
My own use case doesn't match this exactly, so if it doesn't work, let me know and I can check if I have some other differences that might affect this as well
+1, This issue seems to still exist with the sample code, related issue overlayColor=""
doesn't seem to work, as well as wrapping children in BlurView.
@sendy34, did you manage to get around this?
@sendy34, did you manage to get around this?
I think wrapping view inside BlurredView works :)
This issue is not fixed
I fixed this by rapping the blurView component with another view like so;
`
`
Here's the container style; ` containerStyle={{
height: 85,
width: '100%',
position: 'relative', // the trick... This sets the boundary for the BlurView with position of 'absolute'
}} `
Bug report
Any View element with background color after Blur View also gets a blur effect - on Android.
Summary
When a View element is used after BlurView, and if the view has background color, then that view also gets blurry edges.
Environment info
Platform: Android Simulator - Pixel 2 - API 29
react-native info
output:Library version: 3.6.0
Reproducible sample code