
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@jcassidyav/feedback
Advanced tools
npmnpm
Check out the apps/demo folder. This is how to clone and run it:
git clone https://github.com/jcassidyav/feedback
npm run setup
npm run start apps.demo.android # or apps.demo.ios
npm i @jcassidyav/feedback
var FeedbackPlugin = require("nativescript-feedback");
var feedback = new FeedbackPlugin.Feedback();
import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback";
export class MyClassWithFeedback {
private feedback: Feedback;
constructor() {
this.feedback = new Feedback();
}
}
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:
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") }
});
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")
});
Hiding a message can be done automatically (see duration
), by a gesture (tap / swipe), or programmatically as shown here:
this.feedback.hide();
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")
});
This is a clone of Eddy Verbruggen's nativescript-feedback converted to use the nativescript plugin seed and latest Alerter Library.
On Android we're using the Alerter library by Tapadoo, and on iOS ISMessages by ilyainyushin.
FAQs
Add a plugin description
The npm package @jcassidyav/feedback receives a total of 0 weekly downloads. As such, @jcassidyav/feedback popularity was classified as not popular.
We found that @jcassidyav/feedback demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.