react-native-blur
react-native-blur copied to clipboard
Blur not working android
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!!!
some to me.
me too :( Please fix it
Any follow up on this? I am using RN 0.60.4 here.
No error nor warning
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
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.
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))
}
}}
+1
+1
@xhirazi @anisfrontmen check out this comment. It might be helpful. https://github.com/react-native-community/react-native-blur/issues/328#issuecomment-575678258
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
add zIndex: 100
to BlurView style. it will resolve error.