nativescript-scratchview
Nativescript plugin to implement scratch view
npm i --save nativescript-scratchview

Nativescript Scratch View (Android only)

Nativescript plugin to implement scratch card functionality.

Screenshot of Android

Installation

Run the following command from the root of your project:

tns plugin add nativescript-scratchview

Usage

You need to add xmlns:sv="nativescript-scratchview" to your page tag, and then simply use <sv:ScratchView> in order to add the widget to your page.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:sv="nativescript-scratchview">
<GridLayout rows="*" columns="*">
<sv:ScratchView id="scratchView" height="250" width="250" strokeWidth="10" revealed="{{revealed}}" percentRevealed="{{percentRevealed}}">
<Image height="250" width="250" stretch="aspectFill" src="~/images/back.jpg"></Image>
<Image height="250" width="250" stretch="aspectFill" src="~/images/scratch.jpg"></Image>
</sv:ScratchView>
</GridLayout>
</Page>

API

Property Default Description
strokeWidth 10 Scratching stroke width

Events

  • revealed
    Triggered when the scratch view is 100% scratched.

  • percentRevealed
    Triggered every time scratch view is scratched. Parameters event.percent - percentage of scratch view scratched

Methods

  • reveal
    Clear scratch and reveal behind view.

License

Apache License Version 2.0, January 2004