Android Blurview not Working I need Help

[MehmetDT]

Normally Comments Parts should be Blurred. But not working android. IOS is working good. I need quick help guys please.

"react-native": "^0.59.10",
"@react-native-community/blur": "^3.3.1",

buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 googlePlayServicesVersion = "15.0.1" supportLibVersion = "27.1.1"

I added renderscriptTargetApi 23 renderscriptSupportModeEnabled true

[MrFreemind]

Try to add some background-color to view that you need to blur. I've spent so much time to figure out why it's not working on android, but that helped me out. Interesting that in this case blur depends on background opacity. First I've added transparent color and it start working but with some bugs until I added just #fff color.

[FDiskas]

add position absolute

[val3ntin-ch]

Any update on android issue? blurContainer: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }, containerParent: { justifyContent: "center", alignItems: "center", backgroundColor: '#fff', },

and it s not working, i can't see any blur

[MrFreemind]

@VSoull Check that the Blur component placed before component that has to be blurred. And check all that ref things for android.

[CrnogoracIvan]

And how we can set blur on some background, that is not an image (View, TouchableOpacity)?

[MrFreemind]

@CrnogoracIvan You can set blur to any container.

[CrnogoracIvan]

@MrFreemind , great but how? Any example, except Image, will be very helpful.

[MrFreemind]

@CrnogoracIvan On iOs you just need place your Blur component on top of other components you want to be blurred. On android you need to pass ref of blurred component to Blur component. Just try to change Image component from example above to any other component.

[CrnogoracIvan]

@MrFreemind , thanks for help. On iOS it works fine, but on Android I cannot still set it right. I added ref to TouchableOpacity and passed it via state to BlurView. Just one thing is not clear to me. Where to add this:this.setState({viewRef: findNodeHandle(this.viewReference)})? When it is in ComponentDidMount or didUpdate, simple doesn't work.

[MrFreemind]

@CrnogoracIvan It should work fine on componentDidMount since it called after first render. I think you've faced the same problem as me. I'm rendering blur component after some actions, and when I'm changing state to mount blur component nothing is happening. But if i call requestAnimationFrame and changing state in callback - boom, magic. It looks like it's a heavy operation for android and blurred image isn't ready yet when your components been rerendered.

Actually I've had the same problem as you, and I just found that solution when I was thinking on your problem. I hope it'll help you.