BlurType affects entire screen, even outside of BlurView. blurType="light" makes entire screen lighter etc

[C-odes]

Hi!

So, I have a background image, and then a BurView in the middle of the screen with another white colored View inside.

I expect only the things inside or after BlurView to be affected by BlurView.

While blur is contained inside, the blurType="light" or "dark" change the lighting of the entire screen even outside of the blurView!

 <ImageBackground source={require('../Resources/Images/VTABackgroundResized3.png')} style ={styles.Container} resizeMode= 'cover'>

  <View style={styles.Header} >
   HEADER
  
  </View>
  <View style={styles.MiddleContainer}>
  
         <BlurView
              style={{position: 'absolute',top: 0,
              left: 0,
              bottom: 0,
              right: 0}}
              blurType="light"
              blurAmount={5}
              reducedTransparencyFallbackColor="white"
          >
        <View style={styles.MiddleWhiteView}>
                <Text> TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST</Text>
        </View>


      </BlurView>
  
  </View>

</ImageBackground

const styles = StyleSheet.create({
    Container: {
        flex: 1,
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
    },
    Header: { 
        flex:1
    },
  
    MiddleContent: {
        flex:4,
        justifyContent: "center",
        paddingRight: 20,
        paddingLeft:20,
        paddingBottom: 55,
    },
    MiddleWhiteView: {
        height: 500,
        width: 500
        backgroundColor: "rgba( 255, 255, 255, 0.8)"
    }
});

The background image that wraps the entire content (the outer ) has a dark nightsky color
but when I add the blurview with the blurType: "lighten" property, the entire thing becomes lighter. The outder imageBackground gets completely ruined! same with blurType="darken"

Should it not only affect where the BlurView actually is???

I know it doesnt cover the entire screen! Please help

the white View on the bottom part of the screenshot is the view within the blurview:
Look at the colors before blurView is added:

Then look after I add with blurType="light" :

[martin-richter-uk]

I have the same problem.

[C-odes]

I found a solution. Found it through youtube video implementing it. The problem is fixed by applying the following: overlayColor="" as a property to the <Blur component.

Like this. Hope it helps @martin-richter-uk

[martin-richter-uk]

Thank you @C-odes! overlayColor="" worked!

[geroale]

It worked for me too. Thank you so much

[rkdavidson]

I am debugging a highly frustrating Android-only issue around this, but the overlayColor="" didn't work.
We're seeing a weird translucent white overlay on the entire app, and only way to remove it is digging into the dependency using BlurView and having it return null instead.

Any idea what the source issue is?

[C-odes]

I am debugging a highly frustrating Android-only issue around this, but the overlayColor="" didn't work.
We're seeing a weird translucent white overlay on the entire app, and only way to remove it is digging into the dependency using BlurView and having it return null instead.

Any idea what the source issue is?

No idea man. Post some code maybe you're missing something?
My first guess would be maybe you have some code or property overwriting the overlayColor=""
HArd to say withotu seeing code

[rkdavidson]

@C-odes Yeah apologies for the very light context on my original comment, but would take too much work to extract the relevant code parts from across our app. We've got a semi-complex dynamic navigation setup and app structure so it's not easy to debug or grab cleanly reproducible code samples.

For now we used patch-package to return a styled <View> manually instead of <BlurView>.

This issue still seems valid though — setitng overlayColor="" isn't a viable long term solution.
I debugged up and down the JS layer into these transitive dependencies and I suspect it's something Android OS related with how the native views are structured, or where they appear in the view hierarchy, etc.

[mcaglarkeskin]

Blur view's wrapper view should have " overflow:'hidden' " in style. It should fix this problem. In your case : You should add overflow:'hidden' to MiddleContainer style.

[MatiSera]

In my case add overlayColor="transparent" and works perfect

[Champkinz]

I found a solution. Found it through youtube video implementing it. The problem is fixed by applying the following: overlayColor="" as a property to the <Blur component. Like this. Hope it helps @martin-richter-uk

Thank you so much 👍

[rob5408]

None of these solutions worked for me. I ended up using react-native-blur along with react-native-masked-view/masked-view to mask what I wanted blurred. The image (transparent png) I used had a blur which I added In Pixelmator and this allowed the blurred image to then gracefully "fade" into the background.

[zahid502]

In my case overlayColor="transparent" is worked fine.

[kasper-pawlowski]

Hi, I have the same problem, visually it can be solved as above, i.e. add overflow hidden, but I noticed that it also affects other elements. if, for example, I have blur in the navbar component and if, even outside the navbar, there are buttons that have the ripple effect (from Pressable or from libraries such as rn paper), the button itself responds to, for example, onPresss, but the ripple effect does not work. Can anyone know how to fix this?

[shyamnewage]

I found a solution. Found it through youtube video implementing it. The problem is fixed by applying the following: overlayColor="" as a property to the <Blur component. Like this. Hope it helps @martin-richter-uk

Worked

[robertyulisman]

I found a solution. Found it through youtube video implementing it. The problem is fixed by applying the following: overlayColor="" as a property to the <Blur component. Like this. Hope it helps @martin-richter-uk

very helpfull, thanks @C-odes

[wallzero]

I have the same issue as @kasper-pawlowski with button ripples no longer rendering. See #608