How to disable the ripple effect for iOS?

[mn-martin]

If you have a lot of markup within a <RL:Ripple></RL:Ripple> you don't want to be forced doing something like this:

<android>
    <RL:Ripple>
        // Lots of markup ...
    </RL:Ripple>
</android>

<ios>
    <RL:Ripple>
        // Lots of duplicate markup ...
    </RL:Ripple>
</ios>

Is there any option to disable the effect on iOS or can this option be added?

[mn-martin]

Never mind, I just figured it out myself:

<RL:Ripple ios:rippleColor="transparent">
    // Lots of markup ...
</RL:Ripple>

[bradmartin]

The option could be added for sure. I don't have time right now to work on it but adding a property and checking it's value when the layout is created shouldn't be too difficult. If you come up with a PR for it that would be great. I can answer any questions you have if you want to try.

[bradmartin]

Even better solution :) good job.

[mn-martin]

Thank you :-) 👍

[mn-martin]

@bradmartin Well my workaround didn't do the trick in all scenarios of my app. I don't really know why but in some of my pages transparent is not applied. I created a pull request that seems to be more robust to me:

https://github.com/bradmartin/nativescript-ripple/pull/10

[hauthorn]

@mn-martin Was "transparent" a valid value in your project? When we try to set this in our nativescript angular project, the ripple is still there.

[ewilio]

In Nativescript+Angular I registered Ripple as a generic tag for IOS:

import { isAndroid } from "platform";
import { registerElement } from 'nativescript-angular/element-registry';
if (isAndroid) {
    registerElement("Ripple", () => require("nativescript-ripple").Ripple);
} else {
    registerElement("Ripple", () => require("ui/content-view/content-view").ContentView);
}

[felicks]

@ewilio how did you implement that in the template ? I want to disable the ripple effect for the ListView items

[edusperoni]

ripple can now be disabled based on a property (which you can use bound to isAndroid)