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

Blur not working android

Open monkhsaikhan opened this issue 5 years ago • 11 comments

Blur working on ios perfect. But not working on android

here is my code

Platform.OS === 'android' ? <BlurView style={{position: "absolute", top: 70, left: 0, bottom: 0, right: 0}} blurType="light" blurAmount={5} blurRadius={15} downsampleFactor={5} overlayColor={'rgba(255, 255, 255, .25)'} viewRef={this.state.viewRef} /> : <BlurView style={{position: "absolute", top: 70, left: 0, bottom: 0, right: 0}} blurType="light" blurAmount={5} />

no warning and no errors

Please help me!!!

monkhsaikhan avatar Jul 17 '19 07:07 monkhsaikhan

some to me.

xclidongbo avatar Jul 20 '19 00:07 xclidongbo

me too :( Please fix it

boygiandi avatar Aug 02 '19 08:08 boygiandi

Any follow up on this? I am using RN 0.60.4 here.

No error nor warning

athirah-yahya avatar Aug 09 '19 00:08 athirah-yahya

yes. You can use this. Seem like to work in normal situation. https://github.com/lvlrSajjad/react-native-blur-overlay But when I try to blur a video view, it doesn't work

boygiandi avatar Aug 09 '19 00:08 boygiandi

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.

MrFreemind avatar Aug 19 '19 15:08 MrFreemind

Had the same issue. These two things worked for me:

Make sure you have a backgroundColor on the container you want to blur. Make sure the component rerenders:

style={{ backgroundColor: 'transparent' }}
ref={n => {
  if (n && viewRef === null) {
    setViewRef(findNodeHandle(n))
  }
}}

rhamag avatar Sep 20 '19 08:09 rhamag

+1

xhirazi avatar Dec 13 '19 06:12 xhirazi

+1

anisfrontmen avatar Jan 27 '20 12:01 anisfrontmen

@xhirazi @anisfrontmen check out this comment. It might be helpful. https://github.com/react-native-community/react-native-blur/issues/328#issuecomment-575678258

MrFreemind avatar Jan 27 '20 12:01 MrFreemind

Updated to 3.5(dev-master) and this seems to be fixed...i guess its because android is using a totally different android-lib to blur since 3.5

Psiiirus avatar Mar 12 '20 08:03 Psiiirus

add zIndex: 100 to BlurView style. it will resolve error.

maheshmuttinti avatar Jul 14 '22 10:07 maheshmuttinti