React-native-blur: Library is broken on Android

[wmonecke]

Bug

The library is unusable on Android.

The BlurView covers the whole screen and setting { overflow: 'hidden' } on parent is just a hack and actually causes performance issues, because if you inspect your views you can see BlurView is still rendering on the whole screen.

Also in the documentation, there are basically no instructions on how to implement viewRef.

If this is part of react-native-community it should at least be working properly. Wasted way too much time trying to make this work. It would be nice to have a disclaimer that this is only working for iOS at the current state.

Environment info

"@react-native-community/blur": "^3.4.1", "react": "16.8.6", "react-native": "0.60.4",

[Psiiirus]

I ran into i android issues to wiht 3.4.1 maybe try to checkout the 3.5.0 dev-master branch and see if this is still a bug.

[Frans-L]

With 3.5, the same bug exists.

[tinmar33]

It actually works with the master branch. Can you add a release ?

[JimTeva]

I just updated to 3.6 and it works now.

[ovcharukmaks]

It still doesn't work. For android blur view takes whole screen.
I'm using "@react-native-community/blur": "^3.6.0".

[danleveille]

Still having the same problem on 3.6.

[luisnaranjo733]

I'm also experiencing basic functionality issues on Android with 3.6 from npm. Setting overflow: "hidden" on the parent of the still does not solve the issue.

Basically, the blur effect just isn't happening. It's just a transparent view.

[benov84]

Not working in Android - its just transparent

[SunskyXH]

The same issue on 3.6 while using <BlurView />, and adding overflow: hidden to its parent view did not solve this problem.

[pke]

viewRef is not used anywhere in the source code (anymore)? The instructions in various issues are also vague in regard to Android. They claim you are supposed to put the BlurView before the content to be blurred. I am confused.

Also a lot of old issues from 2016 regarding render problems on Android are still open. That's adding to the confusion. Would the maintainer close old issues maybe?

[MinhNguyenWre]

The same issue on 3.6 while using <BlurView />, and adding overflow: hidden to its parent view did not solve this problem.

Same here. Does anyone have an idea? I can not set width and height for blur view in android, it always fullscreen overlap.

[lumberman]

Unrofrtuntaly, not a single library will work on Android as good as it works on iOS.

Read all the complications of performant blurring Native Android developers have in this thread: https://www.reddit.com/r/androiddev/comments/drs9bm/realtime_blurring_on_android_vs_ios/

A few quotes:

The blur is done on the main thread. Even though RS blur is allegedly executed on GPU, it's still effectively a blocking operation from the point of view of our code, because we have to wait till it finishes its job on the same thread we called it.

If I remember correctly, blur was never added to Android due to legacy reasons. In the early days of Android when having a GPU on a mobile device was _not_ a given, Blur was simply too expensive of an operation to have it done by CPU only. This is why Android opted for the shading.

After reading all of this I decided to drop the idea of blurring anything on Android.

[Orange9000]

In may case using overlayColor='transpanrent' prop reduced blur view size from full screen to the size i set in style prop.