Blurview does not retain in constraints in android

Kureev / react-native-blur

React Native Blur component

MIT License

3.74k stars 554 forks source link

Blurview does not retain in constraints in android #561

Open ibrar-web opened 1 year ago

ibrar-web commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I having the same issue

Ragnar-Loth-brok commented 1 year ago

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

JoeDareZone commented 10 months ago

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

davidgvf commented 9 months ago

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 commented 9 months ago

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

davidgvf commented 9 months ago

yes @Ragnar-Loth-brok

blur is perfect but my screen is opaque:

without blurview

Ragnar-Loth-brok commented 9 months ago

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

davidgvf commented 9 months ago

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

Ragnar-Loth-brok commented 9 months ago

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

davidgvf commented 9 months ago

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 commented 9 months ago

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

davidgvf commented 9 months ago

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

And here use: Untitled (1)

Ragnar-Loth-brok commented 9 months ago

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 commented 9 months ago

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 commented 4 months ago

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