by hamdiwanis | v1.0.0
NativeScript plugin that add shine effect to your button.
npm i --save nativescript-shine-button
  • Version: 1.0.0
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  0
    • Last Month: 0

NativeScript Shine Button

Note: This Plugin based on WCLShineButton for IOS and ShineButton for Android .


tns plugin add nativescript-shine-button


<Page xmlns="" class="page" xmlns:ui="nativescript-shine-button">
<ui:ShineButton height="80" width="80" src="customicon" color="gray" fillColor="red">

see the demo project for more info.


Add this to app.module.ts so you can use a Gradient tag in the view:

import { registerElement } from "nativescript-angular";
registerElement("ShineButton", () => require("nativescript-shine-button").ShineButton);


Property Description
src button image (png)
color Default button color
fillColor Fill button color
allowRandomColor Allow shine color random
animDuration shine anim duration in sec
bigShineColor big shine color
enableFlashing Enable effect like flash
shineCount shine count around button
shineTurnAngle turn angle of shine
shineDistanceMultiple multiple of distance to button
smallShineOffsetAngle angle offset of small shine to big shine
smallShineColor small shine color
shineSize size of shine by pixel


  • [ ] adjust the properties to be more consistent on android and ios.


if you want to help improve the plugin you can consider it yours and make as PRs as you want :)

Get Help

Please, use github issues strictly for reporting bugs or requesting features.


Twitter: hamdiwanis
Email: [email protected]