Skip to content

Latest commit

 

History

History
165 lines (135 loc) · 6.4 KB

README.md

File metadata and controls

165 lines (135 loc) · 6.4 KB
Raw

NativeScript Feedback

This is a fork from https://github.com/EddyVerbruggen/nativescript-feedback with updated dependencies. Huge thanks to @EddyVerbruggen for the great work as always!

       

iOS and Android running the included demo - much better framerate on YouTube!

Installation

tns plugin add @valor/nativescript-feedback

API

requiring / importing the plugin

JavaScript

var FeedbackPlugin = require("@valor/nativescript-feedback");
var feedback = new FeedbackPlugin.Feedback();

TypeScript

import { Feedback, FeedbackType, FeedbackPosition } from "@valor/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 ("@valor/nativescript-feedback").FeedbackType;
var FeedbackPosition = require ("@valor/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 "@valor/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.