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.