edusperoni/nativescript-ripple

Ripple boundaries are always rectangular

Closed this issue · 8 comments

If ripple contains a circular element ripple gets out of child element. It always fill the rectangular ripple element. I cannot set border-radius of ripple element.

Have you been able to solve this? This also works in a rectangle.

someone please fix this

Vetm commented

Having the same problem here. @bradmartin any fix for this?

We use it on a rounded rectangles / circles (on Android only) with the additional properties available ,though not exported, at the native library.

I have created a PR (#20) to support two additional properties, one which can control the border radius of the ripple itself.

@SBD580 it works like a charm.

@bradmartin

Thanks for your work 💯

What happens to borderRadius here, as you sampled an image of a circled button:

screenshot_2019-02-21-09-46-08

Is it broken after that?

Rounded corners/circled images are often used, so would be likely to know what will happen in future here. I tried NS about two years ago and can remember i had those problems at that time.

So, would like to say +1 for safe use of that in future ☺️

btw, i would like to say there is an example for it using normal borderRadius

<RL:Ripple rippleColor="#fff" backgroundColor="#FF4081" borderRadius="30" height="60" width="60">
<Label text="B" fontSize="30" color="#fff" verticalAlignment="center" horizontalAlignment="center" textWrap="true" />
</RL:Ripple>

I cannot build iOS at home - would be likely to know if there are differences between it and android as i cannot tns preview it - thanks for feedback about rippleBorderRadius 😊

ripple should now respect border-radius