NativeScript plugin to add Material Design ripple effects to any layout.
npm i --save nativescript-ripple2

npm npm GitHub stars GitHub forks

Material Design Ripples for NativeScript

NativeScript plugin to add Material Design ripple effects to any layout.

This is a fork of the original nativescript-ripple plugin by Brad Martin (@bradmartin) which can be found at


From your command prompt/termial go to your app's root folder and execute:

NativeScript 3.0+

tns plugin add nativescript-ripple2



Native Android Library

Material Ripple



xmlns:RL="nativescript-ripple2" loaded="pageLoaded">
<ActionBar title="Ripples for Every Android" backgroundColor="#3489db" color="#fff" />

<RL:Ripple rippleColor="#d50000">
<Label text="Red Ripples!!!" class="message" textWrap="true" />

<RL:Ripple rippleColor="#fff000">
<Image src="~/images/batman.png" margin="10" stretch="aspectFit" />

<Label text="Default Ripple" class="message" textWrap="true" />

<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 rippleColor="#c8c8c8" class="label-button">
<Label text="Lighter Ripple" textWrap="true" />

<RL:Ripple rippleColor="#f5f5f5" margin="15" tap="{{ tapEvent }}" class="dark-button">
<Label text="Possibilities" color="#fff" padding="10" textWrap="true" />



rippleColor : string optional - sets the ripple color.

Nativescript + Angular

In the main.ts file, add those lines in order to use the ripple effect :

import {registerElement} from "nativescript-angular/element-registry";

registerElement("Ripple", () => require("nativescript-ripple2").Ripple);

Please note that on Android, you can have multiple chlidren under a <Ripple> view, but with iOS, the <Ripple> view must have only one child element.


  • Florian Reifschneider @
  • Brad Martin @ Thanks for the original version
  • Morten Sj√łgren @ Thanks for original iOS support