Authors NativeScript.org

nativescript-badge-button

by sean-perkins | v0.1.2

NativeScript plugin for badges inside of buttons.

npm i --save nativescript-badge-button

Version: 0.1.2
GitHub: https://github.com/simonox/nativescript-badge-button
NPM: https://www.npmjs.com/package/nativescript-badge-button
Downloads:

Last Day: 0
Last Week: 0
Last Month: 0

NativeScript Badge Button Plugin

Creates a native UIButton with a badge component. Currently only supported on iOS.

Getting Started

npm install nativescript-badge-button --save
Add the BadgeButton element to your Page tag:

xmlns:BadgeButton="nativescript-badge-button"

Use the element on your page:

<BadgeButton:BadgeButton text="Button with Badge" badgeValue="1" badgeOriginX="450" />

Available Properties

Property	Type	Default
badgeBGColor	UIColor	redColor
badgeTextColor	UIColor	whiteColor
badgeFont	UIFont	systemFontOfSize:12.0
badgePadding	number	6
badgeMinSize	number	8
badgeOriginX	number	0
badgeOriginY	number	-4
shouldHideBadgeAtZero	boolean	true
shouldAnimateBadge	boolean	true

Demo

Note: Incremental badge is animated, but recording tool can only capture 4 fps.

Known Issues

Positioning of the badge is incorrect when rotating the device
OriginX of the badge does not auto calculate based on the button text

Credits

https://github.com/mikeMTOL/UIBarButtonItem-Badge
https://github.com/TanguyAladenise/BBBadgeBarButtonItem