{"id":15371526,"url":"https://github.com/nathanwalker/nativescript-fancyalert","last_synced_at":"2025-04-09T07:09:32.130Z","repository":{"id":51212864,"uuid":"61963881","full_name":"NathanWalker/nativescript-fancyalert","owner":"NathanWalker","description":"Fancy alerts for NativeScript.","archived":false,"fork":false,"pushed_at":"2021-05-20T03:23:49.000Z","size":4752,"stargazers_count":149,"open_issues_count":32,"forks_count":41,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-13T22:28:11.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NathanWalker.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}},"created_at":"2016-06-25T22:20:51.000Z","updated_at":"2023-04-20T01:29:21.000Z","dependencies_parsed_at":"2022-08-30T13:01:37.940Z","dependency_job_id":null,"html_url":"https://github.com/NathanWalker/nativescript-fancyalert","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fancyalert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fancyalert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fancyalert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NathanWalker%2Fnativescript-fancyalert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NathanWalker","download_url":"https://codeload.github.com/NathanWalker/nativescript-fancyalert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994122,"owners_count":21030050,"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":[],"created_at":"2024-10-01T13:47:24.455Z","updated_at":"2025-04-09T07:09:32.113Z","avatar_url":"https://github.com/NathanWalker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## NativeScript 7 or higher\n\n* Use `@nstudio/nativescript-fancyalert`: `~4.0.0`\n* [Source managed here](https://github.com/nstudio/nativescript-plugins)\n\n## If using 6 and below, see the following:\n\nFancy alerts for NativeScript.\n\nBased on:\n\n- iOS [SCLAlertView](https://github.com/dogo/SCLAlertView)\n- Android [ColorDialog](https://github.com/andyxialm/ColorDialog)\n\n# Install\n\n### NativeScript 4x\n\n```bash\ntns plugin add nativescript-fancyalert\n```\n\n### NativeScript 3x and older\n\n```bash\ntns plugin add nativescript-fancyalert@1.2.0\n```\n\n![Sample iOS](screenshots/alert.gif)\n\n![Sample Android](screenshots/alert-android.gif)\n\n# iOS Specifications\n\n#### Usage Examples\n\n```js\nimport { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";\n\n// show success\nTNSFancyAlert.showSuccess(\n  \"Success!\",\n  \"Fancy alerts are nice.\",\n  \"Yes they are!\"\n);\n\n// set customizations\nTNSFancyAlert.showAnimationType =\n  TNSFancyAlert.SHOW_ANIMATION_TYPES.SlideInFromLeft;\nTNSFancyAlert.hideAnimationType =\n  TNSFancyAlert.HIDE_ANIMATION_TYPES.SlideOutToRight;\nTNSFancyAlert.backgroundType = TNSFancyAlert.BACKGROUND_TYPES.Blur;\nTNSFancyAlert.soundURL = \"bell.mp3\";\nTNSFancyAlert.showSuccess(\n  \"Sound?\",\n  \"You can use sound and customize many aspects like animation in/out, color, background style and much more.\",\n  \"Amazing!\"\n);\n\n// show custom image\nTNSFancyAlert.showCustomImage(\n  \"nativescript.png\",\n  \"#2B33FF\",\n  \"Custom Image\",\n  `Using your own images is sure nice.`,\n  \"Yes!\"\n);\n\n// show custom button timer\nTNSFancyAlert.showCustomButtonTimer(\n  0,\n  true,\n  undefined,\n  undefined,\n  \"Mission Impossible\",\n  `This will self-destruct in 5 seconds.`,\n  \"Ok\"\n);\n\n// show custom buttons\nlet buttons = [\n  new TNSFancyAlertButton({\n    label: \"One\",\n    action: () =\u003e {\n      console.log(\"One\");\n    }\n  }),\n  new TNSFancyAlertButton({\n    label: \"Two\",\n    action: () =\u003e {\n      console.log(\"Two\");\n    }\n  }),\n  new TNSFancyAlertButton({\n    label: \"Three\",\n    action: () =\u003e {\n      console.log(\"Three\");\n    }\n  }),\n  new TNSFancyAlertButton({\n    label: \"Four\",\n    action: () =\u003e {\n      console.log(\"Four\");\n    }\n  }),\n  new TNSFancyAlertButton({\n    label: \"Really? More?\",\n    action: () =\u003e {\n      console.log(\"more\");\n    }\n  })\n];\nTNSFancyAlert.showCustomButtons(\n  buttons,\n  undefined,\n  undefined,\n  \"Got Buttons?\",\n  `Add as many as you'd like.`,\n  \"Ok\"\n);\n\n// show with custom width\nTNSFancyAlert.showSuccess(\n  \"Success!\",\n  \"This uses a custom width of 300.\",\n  `Oh that's nice.`,\n  0,\n  300\n);\n\n// show textfield\nlet initialValue = null;\nTNSFancyAlert.showTextField(\n  \"Enter your name\",\n  initialValue,\n  new TNSFancyAlertButton({\n    label: \"Save\",\n    action: (value: any) =\u003e {\n      console.log(`User entered ${value}`);\n    }\n  }),\n  undefined,\n  undefined,\n  \"User Input?\",\n  `Yeah, sure we can.`,\n  \"Ok, lots of options.\"\n);\n\n// show switch\nTNSFancyAlert.showSwitch(\n  `Don't show again`,\n  \"#58B136\",\n  new TNSFancyAlertButton({\n    label: \"Save\",\n    action: (isSelected: boolean) =\u003e {\n      console.log(`Don't show again was selected: ${isSelected}`);\n    }\n  }),\n  \"switch.png\",\n  \"#B3714F\",\n  \"Need a switch?\",\n  `It can be useful.`,\n  \"Got it.\"\n);\n```\n\n#### TNSFancyAlert - Properties\n\n| Property                                                 | Description                                                                                                                                                                  |\n| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `TNSFancyAlert.SUPPORTED_TYPES: IFancyAlertSupportedTypes`        | Different supported style types.                                                                                                                                             |\n| `TNSFancyAlert.shouldDismissOnTapOutside: boolean`       | Should dismiss when tapped outside.                                                                                                                                          |\n| `TNSFancyAlert.dismissCallback: () =\u003e void`       | Callback for when alert is dismissed.                                                                                                                                 |\n| `TNSFancyAlert.hideAnimationType: IFancyAlertHideAnimationTypes` | Use `TNSFancyAlert.HIDE_ANIMATION_TYPES` to set. Supports: FadeOut, SlideOutToBottom, SlideOutToTop, SlideOutToLeft, SlideOutToRight, SlideOutToCenter, SlideOutFromCenter.  |\n| `TNSFancyAlert.showAnimationType: IFancyAlertShowAnimationTypes` | Use `TNSFancyAlert.SHOW_ANIMATION_TYPES` to set. Supports: FadeIn, SlideInFromBottom, SlideInFromTop, SlideInFromLeft, SlideInFromRight, SlideInFromCenter, SlideInToCenter. |\n| `TNSFancyAlert.backgroundType: IFancyAlertBackgroundTypes`        | Use `TNSFancyAlert.BACKGROUND_TYPES` to set. Supports: Shadow, Blur, Transparent.                                                                                            |\n| `TNSFancyAlert.customViewColor: string`                  | Overwrite (Buttons, top circle and borders) colors.                                                                                                                          |\n| `TNSFancyAlert.iconTintColor: string`                    | Set custom tint color for icon image.                                                                                                                                        |\n| `TNSFancyAlert.titleColor: string`                       | Set custom title color.                                                                                                                                                      |\n| `TNSFancyAlert.bodyTextColor: string`                    | Set custom body text color.                                                                                                                                                  |\n| `TNSFancyAlert.tintTopCircle: string`                    | Override top circle tint color with background color                                                                                                                         |\n| `TNSFancyAlert.cornerRadius: number`                     | Set custom corner radius.                                                                                                                                                    |\n| `TNSFancyAlert.backgroundViewColor: string`              | Overwrite background color                                                                                                                                                   |\n| `TNSFancyAlert.useLargerIcon: boolean`                   | Make the top circle icon larger                                                                                                                                              |\n| `TNSFancyAlert.soundURL: string`                         | Use mp3 from App_Resources when alert shows.                                                                                                                                 |\n| `TNSFancyAlert.textDisplayOptions: IFancyAlertTextOptions`               | IOS Only. Text display options                                                                                                                                                         |\n\n#### TNSFancyAlert - Methods\n\n- `showSuccess(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showError(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showNotice(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showWarning(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showInfo(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showEdit(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showWaiting(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showQuestion(title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showCustomButtonTimer(buttonIndex: number, reverse?: boolean, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showCustomImage(imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showCustomButtons(buttons: Array\u003cTNSFancyAlertButton\u003e, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showCustomTextAttributes(attributionBlock: Function, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showTextField(placeholder: string, initialValue: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showSwitch(switchLabel: string, switchColor: string, button: TNSFancyAlertButton, imageName: string, color: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `showCustomView(customView: any, imageName?: string, color?: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number)`\n- `show(type: string, title: string, subTitle?: string, closeBtnTitle?: string, duration?: number, width?: number, buttons?: Array\u003cTNSFancyAlertButton\u003e)`\n- `showCustom(alert: any, imageName: string, color: string, title?: string, subTitle?: string, closeBtnTitle?: string, duration?: number)`\n- `createAlert(width?: number)`\n\n# Android Specifications\n\n#### Usage Examples\n\nNOTE: Android supports only a subset of the iOS features, but will return a Promise on every call:\n\n```js\nimport { TNSFancyAlert, TNSFancyAlertButton } from \"nativescript-fancyalert\";\n\n// show success\nTNSFancyAlert.showSuccess(\n  \"Success!\",\n  \"Fancy alerts are nice.\",\n  \"Yes they are!\"\n).then(() =\u003e {\n  /* user pressed the button */\n});\n\n// show error\nTNSFancyAlert.showError(\"Error!\", \"Something bad happened.\", \"Close\").then(\n  () =\u003e {\n    /* user pressed the button */\n  }\n);\n```\n\n#### TNSFancyAlert - Methods\n\n- `showSuccess(title: string, subTitle?: string, closeBtnTitle?: string): Promise\u003cany\u003e`\n- `showError(title: string, subTitle?: string, closeBtnTitle?: string): Promise\u003cany\u003e`\n- `showNotice(title: string, subTitle?: string, closeBtnTitle?: string): Promise\u003cany\u003e`\n- `showWarning(title: string, subTitle?: string, closeBtnTitle?: string): Promise\u003cany\u003e`\n- `showInfo(title: string, subTitle?: string, closeBtnTitle?: string): Promise\u003cany\u003e`\n- ```\n  showColorDialog(\n    title: string,\n    subTitle?: string,\n    okBtnTitle?: string,\n    cancelBtnTitle?: string,\n    backgroundColor?: string,\n    titleTextColor?: string,\n    contextTextColor?: string,\n    contentImage?: any\n  ): Promise\u003cany\u003e```\n\n# TNSFancyAlertButton (iOS only)\n\nThis class can be instantiated on iOS to configure buttons in the fancy alerts.\n\n```\nexport class TNSFancyAlertButton {\n  public label: string;\n  public action: Function;\n  public applyStyle: (btn: any) =\u003e void;\n\n  constructor(model?: any) {\n    if (model) {\n      this.label = model.label;\n      this.action = model.action;\n      this.applyStyle = model.applyStyle;\n    }\n  }\n}\n```\n\n* `label`: display text on the button\n* `action`: the method to invoke when the button is tapped on\n* `applyStyle`: a method you can configure to style the button however you'd like using iOS properties. This method will hand back an instance of `SLCButton` which inherits from `UIButton`. You can see more of what methods are available on this class [here](https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m).\n\nHere's an example of how to setup a custom background color:\n\n```\nnew TNSFancyAlertButton({\n  label: 'Ok',\n  action: () =\u003e {\n    // the action to take\n  },\n  applyStyle: (btn: UIButton) =\u003e {\n    // we can use UIButton typing when using tns-platform-declarations\n    // however we can cast to any since you are likely not using SLCAlertView typings (they are in this repo if you want to use them :) )\n    // refer to https://github.com/dogo/SCLAlertView/blob/develop/SCLAlertView/SCLButton.m on what properties are available to customize\n\n    (\u003cany\u003ebtn).buttonFormatBlock = () =\u003e {\n      // set a custom backgroundColor\n      return new (NSDictionary as any)([new Color('#3a3939').ios], ['backgroundColor']);\n    }\n  }\n}),\n```\n\n## Why the TNS prefixed name?\n\n`TNS` stands for **T**elerik **N**ative**S**cript\n\niOS uses classes prefixed with `NS` (stemming from the [NeXTSTEP](https://en.wikipedia.org/wiki/NeXTSTEP) days of old):\nhttps://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/\n\nTo avoid confusion with iOS native classes, `TNS` is used instead.\n\n## Tutorials\n\nNeed extra help getting these fancy alerts working in your application? Check out these tutorials that make use of the plugin:\n\n[Fancy Alerts in a NativeScript with Angular Application](https://www.thepolyglotdeveloper.com/2017/02/use-visually-appealing-fancy-alerts-nativescript-angular-application/)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanwalker%2Fnativescript-fancyalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanwalker%2Fnativescript-fancyalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanwalker%2Fnativescript-fancyalert/lists"}