NativeScript Feedback
💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.5.0.
iOS and Android running the included demo - much better framerate on YouTube!
Demo apps
NativeScript-Core (XML)
Check out the demo folder. This is how to clone and run it:
git clone https://github.com/EddyVerbruggen/nativescript-feedbackcd nativescript-feedback/srcnpm run demo.ios # or demo.android
NativeScript-Angular
This plugin is part of the plugin showcase app I built using Angular.
NativeScript-Vue
Check out the demo-vue folder. This is how to clone and run it:
git clone https://github.com/EddyVerbruggen/nativescript-feedbackcd nativescript-feedback/srcnpm run demo-vue.ios # or demo-vue.android
Installation
tns plugin add nativescript-feedback
API
requiring / importing the plugin
JavaScript
var FeedbackPlugin = ;var feedback = ;
TypeScript
; private feedback: Feedback; { thisfeedback = ; }
show
Showing feedback can be as easy as:
thisfeedback;
That uses a bunch of sane defaults. However, there are a lot of things you may want to tweak. All of which are optional:
Property | Default | Description |
---|---|---|
title |
undefined |
The bold title at the top. |
titleColor |
new Color("white") |
The title's color. |
titleFont |
Bold system font | iOS needs the font name and android the file name. See the demo for examples. |
titleSize |
16 |
The size of the title font. |
message |
undefined |
The message below the title. |
messageColor |
new Color("white") |
The message's color. |
messageFont |
System font | iOS needs the font name and android the file name. See the demo for examples. |
messageSize |
13 |
The size of the message font. |
duration |
4000 |
The duration to show the feedback (milliseconds). |
type |
FeedbackType.Custom |
One of .Custom , .Success , .Warning , .Error , .Info . Each with a distinct style as show in the animations above. You can still override all other properties according to your liking. |
position |
FeedbackPosition.Top |
Either .Top or .Bottom . |
backgroundColor |
Depends on the type |
The background's color. |
icon |
Depends on the type |
A custom icon shown on the left. Loaded from App_Resources/<platform> folders. Example here. Want no icon at all? Don't set a type . |
android.iconColor |
See description | On iOS the icon color is as-is, but on Android it's white. Set this color to override the latter (also see the TypeScript example below). |
android.iconPulseEnabled |
true |
On Android you can disable the pulsating effect of the icon. |
onTap |
undefined |
A callback function that gets invoked when the user tapped your feedback. |
onShow |
undefined |
A callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done. |
onHide |
undefined |
A callback for when the feedback is hidden. |
One of the examples in the demo app shows a custom icon and alternative colors. You'd get there by doing:
JavaScript
var FeedbackType = FeedbackType;var FeedbackPosition = FeedbackPosition;var color = ; thisfeedback;
TypeScript
;; this.feedback.show;
hide
Hiding a message can be done automatically (see duration
), by a gesture (tap / swipe), or programmatically as shown here:
thisfeedback;
Convenience functions
Since in many cases you want to only show success / info / warning / error messages anyway, this plugin's got you covered. You can call any of these functions and still pass in any of the aforementioned properties to tweak it to your liking:
success
thisfeedback;
info
thisfeedback;
warning
thisfeedback;
error
thisfeedback;
Credits
On Android we're using the Alerter library by Tapadoo, and on iOS ISMessages by ilyainyushin.