Nativescript Windowed Modal !apple !android


This plugin overrides the showModal() from nativescript, making modals look and behave the same on Android and iOS.

Installation

``cmd
tns plugin add nativescript-windowed-modal
`

Usage

$3

Call the overrideModalViewMethod() once before starting the app and register the layout element:

#### Javascript

`js
var windowedModal = require("nativescript-windowed-modal")
windowedModal.overrideModalViewMethod()
`

#### Typescript+Angular

`ts
import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from "nativescript-windowed-modal"

overrideModalViewMethod()
registerElement("ModalStack", () => ModalStack)
`

You can pass extended options like this:

`ts
mainPage.showModal("./modal", {
context: "I'm the context",
closeCallback: (response: string) => console.log("Modal response: " + response),
dimAmount: 0.5 // Sets the alpha of the background dim
} as ExtendedShowModalOptions)
`

#### NativeScript-Vue

`js
// main.js
import { ModalStack, overrideModalViewMethod, VueWindowedModal } from "nativescript-windowed-modal"

overrideModalViewMethod()
Vue.registerElement("ModalStack", () => ModalStack)
Vue.use(VueWindowedModal)
`

You can pass extended options like this:

`html

`

$3

#### ExtendedShowModalOptions

| Property | Type | Platform | Default | Description |
| ---------- | ------ | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |

#### ModalStack

| Property | Type | Platform | Default | Description |
| ------------------ | ------- | -------- | ------- | ---------------------------------------------------------------------------------------- |
| dismissEnabled | boolean | both | true | If set to true, the modal is allowed to close when touching outside of the content frame |
| verticalPosition | string | both | middle | Uses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "stretch") |
| horizontalPosition | string | both | center | Uses the same options as HorizontalAlignment ("left" - "center" - "right" - "stretch") |

$3

Wrap 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:

#### XML

`xml







`

#### HTML (Angular)

`html





`

$3

You may want to create the .modal and .modal-container classes in your .css to set margins, aligment and background color:

`css
.modal {
margin: 20;
margin-top: 35;
border-radius: 8;
horizontal-align: center;
vertical-align: middle;
background-color: white;
}

.modal-container {
padding: 25;
padding-bottom: 10;
}
`

Running the demo app

1. Clone this repo
2. cd src
3. npm run demo.android, npm run demo.ios, npm run demo.ng.android, or npm run demo.ng.ios

Known Issues

- Padding won't apply on children of the ModalStack, wrapping them with a StackLayout fixes the problem;
- Auto width is kinda buggy on some situations, set a fixed width for children of ModalStack` when possible;

License

Apache License Version 2.0, January 2004