The Material Design Ripple component provides a radial action in the form of a visual ripple expanding outward from the user's touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.
npm i --save @nativescript-community/ui-material-ripple

NativeScript Material Ripple

Material Design's Ripple component for NativeScript.

npm npm


  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API


:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-ripple

For NativeScript 6.x

  • tns plugin add nativescript-material-ripple

If using tns-core-modules

  • tns plugin add nativescript-material-ripple@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.




Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple" on the Page element


<Page xmlns:mdr="@nativescript-community/ui-material-ripple">
<StackLayout horizontalAlignment="center">
<mdr:Ripple rippleColor="green" width="100" height="100" />


mdripple {
ripple-color: blue;

NativeScript + Angular

import { NativeScriptMaterialRippleModule } from "@nativescript-community/ui-material-ripple/angular";

imports: [
<MDRipple rippleColor="green" width="100" height="100"></MDRipple>

NativeScript + Vue

import Vue from 'nativescript-vue';
import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';

<MDRipple rippleColor="green" width="100" height="100"/>



Inherite from NativeScript StackLayout.

  • rippleColor optional

An attribute to set the ripple color of the ripple.