React-native-blur: 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: