Any View element with background color after Blur View also gets a blur effect - Android

[sendy34]

Bug report

Any View element with background color after Blur View also gets a blur effect - on Android.

Summary

When a View element is used after BlurView, and if the view has background color, then that view also gets blurry edges.

Environment info

Platform: Android Simulator - Pixel 2 - API 29

react-native info output:

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 112.96 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /Users/admin/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /usr/bin/javac
    Python: 2.7.17 - /usr/local/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

Reproducible sample code

<View style={styles.container}>
        <Image key={"blurryImage"} source={src} style={styles.absolute} />
        <Text style={styles.absolute}>Hi, I am some blurred text</Text>
        {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
        <BlurView
              style={styles.absolute}
              blurType="light"
              blurAmount={50}
              reducedTransparencyFallbackColor="white"
        />
        <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
        <View style={{ backgroundColor: "#000", height: 100, width: 200 }} />
 </View>

[clegirar]

Hi 👋
I have the same problem, someone have a solution on this ?

[KaarelKa]

Hey, found a workaround for this. A bit surprised that it is not in the documentation, but quite possible than I'm missing somethings.

Might not work for every use case, but pass the the rest of the content (The content that you don't want blurred) as children to the BlurView

Basically change this:

<View>
      <Image key={"blurryImage"} source={src} style={styles.absolute} />
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
      <BlurView
            style={styles.absolute}
            blurType="light"
            blurAmount={50}
            reducedTransparencyFallbackColor="white"
      />
      <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
      <View style={{ backgroundColor: "#000", height: 100, width: 200 }} />
</View>

To this:

<View>
      <Image key={"blurryImage"} source={src} style={styles.absolute} />
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
       <BlurView
            style={styles.absolute}
            blurType="light"
            blurAmount={50}
            reducedTransparencyFallbackColor="white"
      >
          <Text>I'm the non blurred text because I got rendered inside of the BlurView</Text>
          <View style={{ backgroundColor: "#000", height: 100, width: 200 }} />
      </BlurView>
</View>

My own use case doesn't match this exactly, so if it doesn't work, let me know and I can check if I have some other differences that might affect this as well

[ghost]

@sendy34 have you tried this?

<BlurView ... overlayColor="" >{...}</BlurView>

Related issue.

[KieranVieira]

+1, This issue seems to still exist with the sample code, related issue overlayColor="" doesn't seem to work, as well as wrapping children in BlurView.

[KieranVieira]

@sendy34, did you manage to get around this?

[sendy34]

@sendy34, did you manage to get around this?

I think wrapping view inside BlurredView works :)

[Champkinz]

This issue is not fixed

[BismarkCodes]

I fixed this by rapping the blurView component with another view like so;

`

  <BlurView

    style={styles.absolute}

    blurType="light"

    blurAmount={1}

    reducedTransparencyFallbackColor="white">

    {children}

  </BlurView>

`

Here's the container style;
`
containerStyle={{

            height: 85,

            width: '100%',

            position: 'relative',   // the trick... This sets the boundary for the BlurView with position of 'absolute'

}}
`