{"id":15141927,"url":"https://github.com/eddyverbruggen/nativescript-feedback","last_synced_at":"2025-04-06T13:11:21.324Z","repository":{"id":57308520,"uuid":"85617073","full_name":"EddyVerbruggen/nativescript-feedback","owner":"EddyVerbruggen","description":":loudspeaker: Non-blocking textual feedback for your NativeScript app","archived":false,"fork":false,"pushed_at":"2024-01-29T11:48:36.000Z","size":37479,"stargazers_count":129,"open_issues_count":17,"forks_count":27,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T11:08:27.201Z","etag":null,"topics":["banner","feedback","message","nativescript","nativescript-plugin","notification","toast"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EddyVerbruggen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-20T19:22:17.000Z","updated_at":"2024-05-30T15:42:08.000Z","dependencies_parsed_at":"2024-06-18T20:11:09.965Z","dependency_job_id":null,"html_url":"https://github.com/EddyVerbruggen/nativescript-feedback","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EddyVerbruggen","download_url":"https://codeload.github.com/EddyVerbruggen/nativescript-feedback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["banner","feedback","message","nativescript","nativescript-plugin","notification","toast"],"created_at":"2024-09-26T09:20:36.016Z","updated_at":"2025-04-06T13:11:21.305Z","avatar_url":"https://github.com/EddyVerbruggen.png","language":"TypeScript","readme":"# NativeScript Feedback\n\n[![Build Status][build-status]][build-url]\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Twitter Follow][twitter-image]][twitter-url]\n\n[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-feedback.svg?branch=master\n[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-feedback\n[npm-image]:http://img.shields.io/npm/v/nativescript-feedback.svg\n[npm-url]:https://npmjs.org/package/nativescript-feedback\n[downloads-image]:http://img.shields.io/npm/dm/nativescript-feedback.svg\n[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social\u0026label=Follow%20me\n[twitter-url]:https://twitter.com/eddyverbruggen\n\n\u003e 💡 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.\n\n\u003cimg src=\"https://github.com/EddyVerbruggen/nativescript-feedback/raw/master/media/demo-ios.gif\" width=\"377px\" height=\"691px\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://github.com/EddyVerbruggen/nativescript-feedback/raw/master/media/demo-android.gif\" height=\"691px\"/\u003e\n\n\n_iOS and Android running the included demo - [much better framerate on YouTube](https://www.youtube.com/watch?v=A3jX5g9msm0)!_\n\n## Demo apps\n \n### NativeScript-Core (XML)\nCheck out the [demo](/demo) folder. This is how to clone and run it:\n\n```bash\ngit clone https://github.com/EddyVerbruggen/nativescript-feedback\ncd nativescript-feedback/src\nnpm run demo.ios # or demo.android\n```\n\n### NativeScript-Angular\nThis plugin is part of the [plugin showcase app](https://github.com/EddyVerbruggen/nativescript-pluginshowcase/tree/master/app/feedback) I built using Angular.\n\n### NativeScript-Vue\nCheck out the [demo-vue](/demo-vue) folder. This is how to clone and run it:\n\n```bash\ngit clone https://github.com/EddyVerbruggen/nativescript-feedback\ncd nativescript-feedback/src\nnpm run demo-vue.ios # or demo-vue.android\n```\n\n## Installation\n```bash\ntns plugin add nativescript-feedback\n```\n\n## API\n\n### requiring / importing the plugin\n\n#### JavaScript\n```js\nvar FeedbackPlugin = require(\"nativescript-feedback\");\nvar feedback = new FeedbackPlugin.Feedback();\n```\n\n#### TypeScript\n```js\nimport { Feedback, FeedbackType, FeedbackPosition } from \"nativescript-feedback\";\n\nexport class MyClassWithFeedback {\n  private feedback: Feedback;\n  \n  constructor() {\n    this.feedback = new Feedback();\n  }\n}\n```\n\n### show\n\nShowing feedback can be as easy as:\n\n```js\nthis.feedback.show({\n  message: \"Easiest thing ever, right?\"\n});\n```\n\nThat uses a bunch of sane defaults.\nHowever, there are a lot of things you may want to tweak. All of which are optional:\n\n| Property | Default | Description |\n| --- | --- | --- |\n| `title` | `undefined` | The **bold** title at the top. |\n| `titleColor` | `new Color(\"white\")` | The title's color. |\n| `titleFont` | Bold system font | iOS needs the font name and android the file name. See the demo for examples. |\n| `titleSize` | `16` | The size of the title font. |\n| `message` | `undefined` | The message below the title. |\n| `messageColor` | `new Color(\"white\")` | The message's color. |\n| `messageFont` | System font | iOS needs the font name and android the file name. See the demo for examples. |\n| `messageSize` | `13` | The size of the message font.|\n| `duration` | `4000` | The duration to show the feedback (milliseconds). |\n| `type` | [`FeedbackType.Custom`](https://github.com/EddyVerbruggen/nativescript-feedback/blob/36bdf322837bf47fc2124b3e8f779227969d3f43/src/feedback.common.ts#L13) | 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. |\n| `position` | [`FeedbackPosition.Top`](https://github.com/EddyVerbruggen/nativescript-feedback/blob/36bdf322837bf47fc2124b3e8f779227969d3f43/src/feedback.common.ts#L4) | Either `.Top` or `.Bottom`. |\n| `backgroundColor` | Depends on the `type` | The background's color. |\n| `icon` | Depends on the `type` | A custom icon shown on the left. Loaded from `App_Resources/\u003cplatform\u003e` folders. [Example here](https://github.com/EddyVerbruggen/nativescript-feedback/blob/master/demo/app/main-view-model.ts#L74). Want no icon at all? Don't set a `type`. |\n| `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). |\n| `android.iconPulseEnabled` | `true` | On Android you can disable the pulsating effect of the icon. |\n| `onTap`| `undefined` | A callback function that gets invoked when the user tapped your feedback. |\n| `onShow`| `undefined` | A callback for when the feedback is shown. iOS note: is called twice: once when animating and once when done. |\n| `onHide`| `undefined` | A callback for when the feedback is hidden. |\n\nOne of the examples in [the demo app](demo/index.html) shows a custom icon and alternative colors. You'd get there by doing:\n\n#### JavaScript\n```js\nvar FeedbackType = require (\"nativescript-feedback\").FeedbackType;\nvar FeedbackPosition = require (\"nativescript-feedback\").FeedbackPosition;\nvar color = require(\"color\");\n\nthis.feedback.show({\n  title: \"Thumbs up!\",\n  titleColor: new color.Color(\"#222222\"),\n  position: FeedbackPosition.Bottom, // iOS only\n  type: FeedbackType.Custom, // this is the default type, by the way\n  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",\n  messageColor: new color.Color(\"#333333\"),\n  duration: 3000,\n  backgroundColor: new color.Color(\"yellowgreen\"),\n  icon: \"customicon\", // in App_Resources/platform folders\n  onTap: function() { console.log(\"showCustomIcon tapped\") },\n  onShow: function(animating) { console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\") },\n  onHide: function() { console.log(\"showCustomIcon hidden\") }\n});\n```\n\n#### TypeScript\n```typescript\nimport { FeedbackType, FeedbackPosition } from \"nativescript-feedback\";\nimport { Color } from \"tns-core-modules/color\";\n\nthis.feedback.show({\n  title: \"Thumbs up!\",\n  titleColor: new Color(\"#222222\"),\n  position: FeedbackPosition.Bottom,\n  type: FeedbackType.Custom, // this is the default type, by the way\n  message: \"Custom colors and icon. Loaded from the App_Resources folder.\",\n  messageColor: new Color(\"#333333\"),\n  duration: 3000,\n  backgroundColor: new Color(\"yellowgreen\"),\n  icon: \"customicon\", // in App_Resources/platform folders\n  android: {\n    iconColor: new Color(\"#222222\") // optional, leave out if you don't need it\n  },\n  onTap: () =\u003e console.log(\"showCustomIcon tapped\"),\n  onShow: animating =\u003e console.log(animating ? \"showCustomIcon animating\" : \"showCustomIcon shown\"),\n  onHide: () =\u003e console.log(\"showCustomIcon hidden\")\n});\n```\n\n### hide\nHiding a message can be done automatically (see `duration`), by a gesture (tap / swipe), or programmatically as shown here:\n\n```js\nthis.feedback.hide();\n```\n\n### Convenience functions\nSince 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:\n\n#### `success`\n```js\nthis.feedback.success({\n  title: \"Awesome\",\n  message: \"That was great!\"\n});\n```\n\n#### `info`\n```js\nthis.feedback.info({\n  title: \"Info \u003c\u003e Data\",\n  message: \"Info is relevant data, not just any data.\"\n});\n```\n\n#### `warning`\n```js\nthis.feedback.warning({\n  message: \"Your battery is almost empty\"\n});\n```\n\n#### `error`\n```js\nthis.feedback.error({\n  title: \"KABOoooOOM!\",\n  titleColor: new Color(\"black\")\n});\n```\n\n## Credits\nOn Android we're using the [Alerter library by Tapadoo](https://github.com/Tapadoo/Alerter),\nand on iOS [ISMessages by ilyainyushin](https://github.com/ilyainyushin/ISMessages).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddyverbruggen%2Fnativescript-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-feedback/lists"}