Blur not applied unless opacity is at 1

I’m currently using 1.2.0 and RN 0.37.0, and running ios 10.1 in the simulator. I noticed this first when I was attempting to run a transition, where I animated the opacity of a View that contains the BlurView and the blur just appeared when the transition was complete. In investigating, I found that it wasn’t just the animation, it was that any opacity < 1 on the blur or its parent would prevent it from blurring.

For example, this shows a blur:

<View style={{flexDirection: 'row'}}>
  <Image
    resizeMode="contain"
    source={{uri: 'https://placekitten.com/108/120'}}
    style={{width: 120, height: 108}} />
  <View style={{opacity: 1, position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}>
    <BlurView blurType="light" blurAmount={50} style={{flexGrow: 1}} />
  </View>
</View>

But the blur completely disapears when I change the inner View to:

<View style={{opacity: 0.9, position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}>
  <BlurView blurType="light" blurAmount={50} style={{flexGrow: 1}} />
</View>

Notice the only difference is the opacity on the container of the second one. I tried moving the absolute positioning off of the containing View and that didn’t help either.

This seems important, as as far as I can tell the recommended way to animate a blur view is to animate its container’s opacity, so if that’s not working, there’s no way to animate it.

Please let me know if there’s any other information I can provide.

[getreup]

hey @liamfd

I’ve been struggling hard with this. It’s not actually an issue with this library, but an issue with iOS itself. The way I fixed it is that I had to make sure the BlurView was not position:absolute.

So, if you need to blur things, make them absolute and behind the blurview, like this:

return (
<View style={{positon:'absolute', top:0, left:0, right:0, bottom:0>
  <Image
          style={{position:'absolute', left:0, right:0, top:0, bottom:0}}
          source={{uri: splashImageURI}}
        />
  <BlurView style={{flex:1, alignSelf:'stretch'}} />
</View>
)

Hopefully that helps.

[Kureev]

see https://github.com/react-native-community/react-native-blur/issues/52 as a reference