nativescript-feedback
v2.0.0
Published
Non-blocking textual feedback for your NativeScript app. AKA superfancy Toasts!
Downloads
1,009
Maintainers
Readme
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-feedback
cd nativescript-feedback/src
npm 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-feedback
cd nativescript-feedback/src
npm run demo-vue.ios # or demo-vue.android
Installation
tns plugin add nativescript-feedback
API
requiring / importing the plugin
JavaScript
var FeedbackPlugin = require("nativescript-feedback");
var feedback = new FeedbackPlugin.Feedback();
TypeScript
import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback";
export class MyClassWithFeedback {
private feedback: Feedback;
constructor() {
this.feedback = new Feedback();
}
}
show
Showing feedback can be as easy as:
this.feedback.show({
message: "Easiest thing ever, right?"
});
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 = require ("nativescript-feedback").FeedbackType;
var FeedbackPosition = require ("nativescript-feedback").FeedbackPosition;
var color = require("color");
this.feedback.show({
title: "Thumbs up!",
titleColor: new color.Color("#222222"),
position: FeedbackPosition.Bottom, // iOS only
type: FeedbackType.Custom, // this is the default type, by the way
message: "Custom colors and icon. Loaded from the App_Resources folder.",
messageColor: new color.Color("#333333"),
duration: 3000,
backgroundColor: new color.Color("yellowgreen"),
icon: "customicon", // in App_Resources/platform folders
onTap: function() { console.log("showCustomIcon tapped") },
onShow: function(animating) { console.log(animating ? "showCustomIcon animating" : "showCustomIcon shown") },
onHide: function() { console.log("showCustomIcon hidden") }
});
TypeScript
import { FeedbackType, FeedbackPosition } from "nativescript-feedback";
import { Color } from "tns-core-modules/color";
this.feedback.show({
title: "Thumbs up!",
titleColor: new Color("#222222"),
position: FeedbackPosition.Bottom,
type: FeedbackType.Custom, // this is the default type, by the way
message: "Custom colors and icon. Loaded from the App_Resources folder.",
messageColor: new Color("#333333"),
duration: 3000,
backgroundColor: new Color("yellowgreen"),
icon: "customicon", // in App_Resources/platform folders
android: {
iconColor: new Color("#222222") // optional, leave out if you don't need it
},
onTap: () => console.log("showCustomIcon tapped"),
onShow: animating => console.log(animating ? "showCustomIcon animating" : "showCustomIcon shown"),
onHide: () => console.log("showCustomIcon hidden")
});
hide
Hiding a message can be done automatically (see duration
), by a gesture (tap / swipe), or programmatically as shown here:
this.feedback.hide();
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
this.feedback.success({
title: "Awesome",
message: "That was great!"
});
info
this.feedback.info({
title: "Info <> Data",
message: "Info is relevant data, not just any data."
});
warning
this.feedback.warning({
message: "Your battery is almost empty"
});
error
this.feedback.error({
title: "KABOoooOOM!",
titleColor: new Color("black")
});
Credits
On Android we're using the Alerter library by Tapadoo, and on iOS ISMessages by ilyainyushin.