{"id":15141982,"url":"https://github.com/mukaschultze/nativescript-windowed-modal","last_synced_at":"2025-10-23T19:31:03.182Z","repository":{"id":49162641,"uuid":"152263100","full_name":"mukaschultze/nativescript-windowed-modal","owner":"mukaschultze","description":"Consistent modals for Android and iOS","archived":false,"fork":false,"pushed_at":"2021-06-25T15:13:48.000Z","size":4531,"stargazers_count":47,"open_issues_count":12,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T10:38:35.197Z","etag":null,"topics":["android","ios","javascript","nativescript","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nativescript-windowed-modal","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mukaschultze.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":"2018-10-09T14:13:31.000Z","updated_at":"2024-05-30T15:52:19.000Z","dependencies_parsed_at":"2022-09-13T23:12:37.512Z","dependency_job_id":null,"html_url":"https://github.com/mukaschultze/nativescript-windowed-modal","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukaschultze%2Fnativescript-windowed-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukaschultze%2Fnativescript-windowed-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukaschultze%2Fnativescript-windowed-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukaschultze%2Fnativescript-windowed-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mukaschultze","download_url":"https://codeload.github.com/mukaschultze/nativescript-windowed-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237877021,"owners_count":19380344,"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":["android","ios","javascript","nativescript","typescript"],"created_at":"2024-09-26T09:21:29.363Z","updated_at":"2025-10-23T19:30:57.611Z","avatar_url":"https://github.com/mukaschultze.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"# Nativescript Windowed Modal ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn4.iconfinder.com/data/icons/logos-3/228/android-32.png)\n\n[![npm version](https://badge.fury.io/js/nativescript-windowed-modal.svg)](http://badge.fury.io/js/nativescript-windowed-modal)\n[![npm downloads](https://img.shields.io/npm/dm/nativescript-windowed-modal.svg)](http://badge.fury.io/js/nativescript-windowed-modal)\n[![Build Status](https://travis-ci.com/mukaschultze/nativescript-windowed-modal.svg?branch=master)](https://travis-ci.com/mukaschultze/nativescript-windowed-modal)\n[![Nativescript Dependency](https://img.shields.io/npm/dependency-version/nativescript-windowed-modal/dev/@nativescript/core)](https://www.npmjs.com/package/@nativescript/core)\n[![Visitors](https://visitor-badge.glitch.me/badge?page_id=mukaschultze/nativescript-windowed-modal)](https://github.com/mukaschultze/nativescript-windowed-modal)\n\nThis plugin overrides the `showModal()` from nativescript, making modals look and behave the same on Android and iOS.\n\n## Installation\n\n```cmd\ntns plugin add nativescript-windowed-modal\n```\n\n## Usage\n\n### Code\n\nCall the `overrideModalViewMethod()` once before starting the app and register the layout element:\n\n#### Javascript\n\n```js\nvar windowedModal = require(\"nativescript-windowed-modal\")\nwindowedModal.overrideModalViewMethod()\n```\n\n#### Typescript+Angular\n\n```ts\nimport { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from \"nativescript-windowed-modal\"\n\noverrideModalViewMethod()\nregisterElement(\"ModalStack\", () =\u003e ModalStack)\n```\n\nYou can pass extended options like this:\n\n```ts\nmainPage.showModal(\"./modal\", {\n  context: \"I'm the context\",\n  closeCallback: (response: string) =\u003e console.log(\"Modal response: \" + response),\n  dimAmount: 0.5 // Sets the alpha of the background dim\n} as ExtendedShowModalOptions)\n```\n\n#### NativeScript-Vue\n\n```js\n// main.js\nimport { ModalStack, overrideModalViewMethod, VueWindowedModal } from \"nativescript-windowed-modal\"\n\noverrideModalViewMethod()\nVue.registerElement(\"ModalStack\", () =\u003e ModalStack)\nVue.use(VueWindowedModal)\n```\n\nYou can pass extended options like this:\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  export default {\n    methods: {\n      openModalTap() {\n        this.$showModal(\"./modal\", {\n          props: {},\n          fullscreen: false,\n          animated: true,\n          stretched: false,\n          dimAmount: 0.5 // Sets the alpha of the background dim,\n        })\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### Properties\n\n#### [ExtendedShowModalOptions](../master/src/windowed-modal.common.ts#L13)\n\n| Property   | Type   | Platform | Default | Description                                                                                                                                                                                          |\n| ---------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| dimAmount? | number | both     | 0.5     | Controls the alpha value of the dimming color. On Android, setting this to 0 disables the fade in animation. On iOS this value will be replaced with the alpha of the background color if it is set. |\n\n#### [ModalStack](../master/src/modal-stack.ts#L8)\n\n| Property           | Type    | Platform | Default | Description                                                                              |\n| ------------------ | ------- | -------- | ------- | ---------------------------------------------------------------------------------------- |\n| dismissEnabled     | boolean | both     | true    | If set to true, the modal is allowed to close when touching outside of the content frame |\n| verticalPosition   | string  | both     | middle  | Uses the same options as VerticalAlignment (\"top\" - \"middle\" - \"bottom\" - \"stretch\")     |\n| horizontalPosition | string  | both     | center  | Uses the same options as HorizontalAlignment (\"left\" - \"center\" - \"right\" - \"stretch\")   |\n\n### Layout\n\nWrap your modal component with a `ModalStack` tag to layout the elements in a consistent way across platforms, it will also allows you to dismiss the modal when touching outsite of the frame:\n\n#### XML\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:modal=\"nativescript-windowed-modal\"\u003e\n    \u003cmodal:ModalStack dismissEnabled=\"true\" class=\"modal-container\"\u003e\n        \u003cStackLayout class=\"modal\"\u003e\n            \u003cLabel text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"/\u003e\n        \u003c/StackLayout\u003e\n    \u003c/modal:ModalStack\u003e\n\u003c/Page\u003e\n```\n\n#### HTML (Angular)\n\n```html\n\u003cModalStack dismissEnabled=\"true\" class=\"modal-container\"\u003e\n  \u003cStackLayout class=\"modal\"\u003e\n    \u003cLabel text=\"Hi, I'm your modal\" class=\"text-center\" textWrap=\"true\"\u003e\u003c/Label\u003e\n  \u003c/StackLayout\u003e\n\u003c/ModalStack\u003e\n```\n\n### Style\n\nYou may want to create the `.modal` and `.modal-container` classes in your .css to set margins, aligment and background color:\n\n```css\n.modal {\n  margin: 20;\n  margin-top: 35;\n  border-radius: 8;\n  horizontal-align: center;\n  vertical-align: middle;\n  background-color: white;\n}\n\n.modal-container {\n  padding: 25;\n  padding-bottom: 10;\n}\n```\n\n## Running the demo app\n\n1. Clone this repo\n2. `cd src`\n3. `npm run demo.android`, `npm run demo.ios`, `npm run demo.ng.android`, or `npm run demo.ng.ios`\n\n## Known Issues\n\n- Padding won't apply on children of the `ModalStack`, wrapping them with a `StackLayout` fixes the problem;\n- Auto width is kinda buggy on some situations, set a fixed width for children of `ModalStack` when possible;\n\n## License\n\nApache License Version 2.0, January 2004\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukaschultze%2Fnativescript-windowed-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmukaschultze%2Fnativescript-windowed-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukaschultze%2Fnativescript-windowed-modal/lists"}