nativescript-shine-button
by hamdiwanis | v1.0.0
NativeScript plugin that add shine effect to your button.
npm i --save nativescript-shine-button

NativeScript Shine Button

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

Installation

tns plugin add nativescript-shine-button

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" xmlns:ui="nativescript-shine-button">
<ui:ShineButton height="80" width="80" src="customicon" color="gray" fillColor="red">
</Page>

see the demo project for more info.

Angular

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);

API

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

Next

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

Contribute

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.

Contact

Twitter: hamdiwanis
Email: [email protected]