vivek-aecor/nativescript-feedback

:loudspeaker: Non-blocking textual feedback for your NativeScript app

NativeScript Feedback

       

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 (iOS only).
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).
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, // 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("#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.