react-native-blur icon indicating copy to clipboard operation
react-native-blur copied to clipboard

blurAmount prop working only with light and xlight blurType

Open mohsinulhaq opened this issue 4 years ago • 6 comments

I tried almost all of the blurTypes, but blurAmount worked with none of them except light and xlight. For others, the blurAmount makes no difference at all. I wonder if I have missed some other configuration to get it working for the dark blur type that I need.

Thanks.

mohsinulhaq avatar May 06 '21 15:05 mohsinulhaq

@mohsinulhaq I just installed this for the first time and I'm experiencing the same issue. The blurAmount prop doesn't seem to have any effect if the blurType is dark.

dwesty17 avatar May 18 '21 18:05 dwesty17

Everything I'm saying is for iOS 14.

In addition to this, for me directly editing the blurAmount value doesn't actually do anything unless I change blurType from light to dark or vice-versa. Super weird.

And also setting blurAmount to 1 causes some weird lines to show up around the box. So I set it to 0 (or 2) and that seemed to fix it for some reason...

jaquinocode avatar Jul 11 '21 06:07 jaquinocode

Same here. blurAmount only works on light and xlight and overlay doesn't affect the color at all. I also notice that bluramount={1} has a saw tooth to the blur (which i have seen in other apps when doing a 1px blur eg. illustrator Sketch so somewhat expected).

garrettz avatar Aug 06 '21 19:08 garrettz

Could be fixed like this useEffect(() => { if (visible) { setBlurType('dark'); } else { setBlurType('light'); } }, [visible]); Here I userBlurView as a custom backdrop in modal

dmytro-sheiko avatar Nov 17 '21 18:11 dmytro-sheiko

I used to think that's a bug. But now I think I misunderstood the feature. The blurAmount works for gaussian blur effect. But if you blur by covering a material layer, the blurAmount doesn't make sense. It's like you look through a frosted glass.

https://www.mornglass.com/wp-content/uploads/2021/05/FROSTED-GLASS-WINDOWS-BIRD-FRIENDLY-GLASS.jpg

anhnch avatar Apr 22 '22 07:04 anhnch

I'm not knowledgeable at all in iOS native code. However, when debugging the code to try to reason about the issue, seems to be related to the default value for the blurType and how it impacts the blurAmount.

When debugging the native code, it was possible to detect that the flow of execution is different when we're using a value different than the default one. When setting the default value in here and here to xlight for instance, the dark mode in iOS works fine.

One of the side effects of updating the blurType update is to trigger the effectSettings one extra time, which updates the blurRadius. This seems to override the default values, which doesn't happen when you're using the darkMode. In theory the update should happen when updating the amount, but I could not pinpoint to the reason why it doesn't.

capucho avatar Jul 29 '22 08:07 capucho