JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 189
  • Score
    100M100P100Q96388F
  • License Apache-2.0

Consistent modals for Android and iOS.

Package Exports

  • nativescript-windowed-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nativescript-windowed-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Nativescript Windowed Modal

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

Installation

tns plugin add nativescript-windowed-modal

Usage

Call the overrideModalViewMethod() and register the layout element:

import { ModalStack, overrideModalViewMethod } from "nativescript-windowed-modal";

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

Wrap your modal component with a ModalStack tag (or whatever name you registered it) to layout the elements in a consistent way across platforms, it will also dismiss the modal when touching outsite of the frame on iOS:

<ModalStack>
    <StackLayout>
        <Label text="Hi, I'm your modal."></Label>
    </StackLayout>
</ModalStack>

You may want to create a .modal class in your .css to set margins, aligment and background color, this class is automatically set on the content of the modal:

.modal {
    margin: 20;
    margin-top: 35;
    horizontal-align: center;
    vertical-align: middle;
    background-color: white;
}

License

Apache License Version 2.0, January 2004