Shadow and borderRadius on BlurView

[danvass]

Is it possible to use props like this for the shadow? When I use it the blur effect disappears.

shadowColor={'black'} shadowRadius={5} shadowOpacity={0.15} shadowOffset={{width: 0, height: 0}}

In addition, it appears that using border radius for an individual corner doesn't work.

borderRadius:10, //works with overflow:hidden
borderTopLeftRadius: 10, //doesn't work
borderTopRightRadius: 10, //doesn't work

[Kureev]

Seems it requires an additional work in a way how styles should be applied to the UIVisualEffectsView. I'll try to implement it when I have a bit more time. Otherwise, if you want it faster, I can tell you the desired way to go and kindly ask you to contribute to the project. Which one would you prefer?

[danvass]

@Kureev I would be happy to try help with implementing the shadows prop. However, haven't done it before so would appreciate any guidance.

[jaredly]

@DVassilev wouldn't it work to just wrap the BlurView in another View that has those shadow props?

[williambout]

@jaredly Just tried that: it removes the blur effect from the BlurView.

[danvass]

@jaredly sorry for not getting back to you sooner but as @williambout said it removes the blur effect if I try to do that.

[jaredly]

hmm yup, I'm seeing that too.

Blur view w/ shadow'd wrapper (shadow is offset a ton so you can see that blur is not applied)

Remove the "shadow" props from the wrapper, and blur works again:

[Kureev]

You can try to add a shadow as a child view of the BlurView, that should help (see http://stackoverflow.com/questions/39513573/ios10-uiview-blur-effect-with-shadow for more details)

[christophby]

Still can't add a border-radius. Setting a border-radius to the parent view only helps for iOS, not for Android. Any suggestions?

[ethanyuwang]

borderRadius works on ios but not on android. any workaround on this?

[mrousavy]

Only workaround for borderRadius property is a container view with overflow: hidden (which is not quite elegant as a solution for an expensive view in terms of rendering)

borderRadius prop works on iOS, individual borders like borderTopLeftRadius don't work.

[mrousavy]

Also, by using a container view with overflow: hidden there are multiple cons:

1. Extra node in the renderer (tree)
2. Unneccessary rendering of parts that aren't even displayed but cut off (overflow: hidden)
3. weird dark spots in corners:

[tearsbear]

try this, it Works on android and ios

[terrysahaidak]

I was using #513 implementation for transparent view and was able to fix those weird shadows in the corners by using the default background color for the blur view and my color with opacity for the content view.:

[gilons]

@terrysahaidak I too had some issues with some weird dark borders showing when I added border-radius to the container of my Blurview Adding border color to the container of my blur view as transparent solved the issue:

<View style={{borderTopLeftRadius: 50, borderTopRightRadius: 50, borderColor: 'transparent'}}>
       <BlurView style={StyleSheet.AbsoluteFill} />
</View>