Blurview does not retain in constraints in android

[ibrar-web]

Blur view working in react native ios as expected but in android components cover whole screen. I have found way around to work in android. But for that I have to create two different components for Android and iOS. In ios creating component with blurview but in android I have to wrap it with outer and also use inner wrapper component to stop it taking full screen. Also outer wrapper overflow is hidden.

[tslater]

Trying to debug this as well. I feel like it is working in some cases but not in others. Not sure what the difference is.

[themaxsmith]

I having the same issue

[Ragnar-Loth-brok]

This is the workaround you can use which will work both in android and ios. @themaxsmith

[JoeDareZone]

Legend @Ragnar-Loth-brok , for reference the styles are the same as the example 'absolute' and the hideOverflow is simply 'overflow :hidden'

[davidgvf]

I need wrap my internal toast notifications with a blurview, but in android an opaque layer is created that does not allow the background to be seen, i need help please @ibrar-web @Ragnar-Loth-brok

[Ragnar-Loth-brok]

Have you tried above recommended solution? @davidgvf You can look to the image below for reference.

[davidgvf]

yes @Ragnar-Loth-brok

blur is perfect but my screen is opaque:

without blurview

[Ragnar-Loth-brok]

In think maybe height: 'auto' is creating this issue. Try to remove height: 'auto' property from mainToast style. @davidgvf

[davidgvf]

@Ragnar-Loth-brok i remove it, but problem continue

[Ragnar-Loth-brok]

Are you using ToastCustom on top of modal or overlay? @davidgvf

[davidgvf]

ToastCustom wrap my app, if toast show, put in screen opacity @Ragnar-Loth-brok Your question: no, i dont use in top of modal or overlay

[Ragnar-Loth-brok]

Can you send screenshot of your code wherever you are calling this ToastCustom component. @davidgvf

[davidgvf]

This is my provider of toast: @Ragnar-Loth-brok

And here use:

[Ragnar-Loth-brok]

Actually problem is with ToastProvider not the BlurView. By default ToastProvider is adding a background color with some opacity. There may be some props to change the background color or opacity. Refer to react-native-toast-notifications documentation for help.

You can also cross-check whether this is a blurView issue or toast issue by replacing BlurView with View inside ToastView. If issue persists then it's a react-native-toast-notifications issue. @davidgvf

[davidgvf]

If i don't use blur in toast, all is correct, but if i use blur inside toast, is when problem appear @Ragnar-Loth-brok And this case appear already if use blurview in a view, wrap a view, and then navigate other screen, put opacity

[pierroo]

I am not using any toast, but yes I can confirm @davidgvf issue: a full screen opac seems to be covering the screen when I use blurview (even if that blurview is in a small isolated area of the screen, as soon as it displays: entire screen is covered in a subtle dark opac view)

did you manage to fix your problem since @davidgvf ? or @ibrar-web ?

even with the solution provided by https://github.com/Kureev/react-native-blur/issues/561#issuecomment-1603021352 the issue still happens on android