BlurView turned into white when applied multiple BlurView in android

[GhayoorUlHaq]

Bug report

Summary

BlurView turned into white when applied multiple BlurView in android. In addition to this, blurType expands to whole screen. Please check attached screenshot.

Environment info

react-native info output:

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Memory: 5.03 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.2.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_222 - /usr/bin/javac
    Python: 3.7.4 - /Users/mac/opt/anaconda3/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 3.6.0

Steps to reproduce

1. Install Library
2. Use two BlurView in same component.

Describe what you expected to happen:

1. There should be 2 BlurViews

Reproducible sample code

import React, { Component } from "react";
import { View, ImageBackground, Text, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";

export default class MultiBlurView extends Component {
  render() {
    return (
        <ImageBackground source={{ uri: 'https://learn.zoner.com/wp-content/uploads/2018/06/landscape-photography-at-every-hour-part-i-landscapes-in-the-morning-683x390.jpg' }} style={styles.absolute}>
          <View style={styles.item}>
            <BlurView
                blurType={'light'}
                style={styles.item}
                blurAmount={5}
            />
          </View>
          <View style={styles.item}>
            <BlurView
                blurType={'light'}
                style={styles.item}
                blurAmount={5}
            />
          </View>
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    flex:1,
    resizeMode: 'contain'
  },
  item: {
    height: 200,
    width: 500,
  }
});

Screenshot

[chhavi-khandelwal]

Facing same issue very frequently on Huawei device. Use blur view as overlay which closes and opens on a button click.

[GhayoorUlHaq]

Facing same issue very frequently on Huawei device. Use blur view as overlay which closes and opens on a button click.

Here is simple hack I tried. Just take image at background where you want blur effect and add prop blurRadius to that background Image ✌️. And you there is no need to use BlurView for this case.

[imranMnts]

Just add overlayColor={'transparent'} to your BlurView should fix the issue

[qilovehua]

Just add overlayColor={'transparent'} to your BlurView should fix the issue

thanks but not work for me

[prathamnemade]

Still unable to use multiple BlurView for Android in a single component. Any fixes ?

[antonfrancisjeejo]

Just add overlayColor="" is should fix the issue. Because it worked for me

[dehnavi97]

just add style={{overflow: 'hidden'}} in parent View like this:

<View style={{overflow: 'hidden',position: 'absolute',top:0,left:0,right:0,height:viewportHeight-600}}> <BlurView style={[styles.absolute]} blurType="light" overlayColor="transparent" blurAmount={1}/> </View> <View style={{overflow: 'hidden',position: 'absolute',bottom:0,left:0,right:0,height:viewportHeight-600}}> <BlurView style={[styles.absolute]} blurType="light" overlayColor="transparent" blurAmount={1}/> </View>

[aurangs7]

I am getting the same issue, without Stack Animation it is working but I need animation + blur both