react-native-blur: Library is broken on Android

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",

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 27
Comments: 27 (1 by maintainers)

Commits related to this issue

doc: fix broken code block (#365) replaced backticks(?) to "`" — committed to Flickering-AI/react-native-blur by ken0x0a 5 years ago

Most upvoted comments

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

ovcharukmaks on Apr 13, 2020

Still having the same problem on 3.6.

danleveille on Apr 18, 2020

With 3.5, the same bug exists.

Frans-L on Mar 20, 2020

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

Orange9000 on Oct 23, 2020

@iarmankhan i was not using with tabbar but here is my code i just placed my content as sibling of blurview not as a children

<Fragment>
   <BlurView
     style={styles.absolute}
     blurType="dark"
     blurAmount={100}
     blurRadius={10}
   />

   <View style={styles.absolute}>
       <ActivityIndicator color={Colors.primary} size="large" />
   </View>
 </Fragment>`
absolute: {
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0,
}

talhamuhammadashraf on May 4, 2021

in Android it does not take children ,So you can place BlurView on absolute and an extra view on absolute with children

talhamuhammadashraf on Jan 13, 2021

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.

lumberman on Oct 22, 2020