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

Code

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

Javascript

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

Typescript+Angular

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

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

You can pass extended options like this:

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

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

<script type="text/javascript">
  export default {
    methods: {
      openModalTap() {
        this.$showModal("./modal", {
          props: {},
          fullscreen: false,
          animated: true,
          stretched: false,
          dimAmount: 0.5 // Sets the alpha of the background dim,
        })
      }
    }
  }
</script>

Properties

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") |

Layout

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

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:modal="nativescript-windowed-modal">
    <modal:ModalStack dismissEnabled="true" class="modal-container">
        <StackLayout class="modal">
            <Label text="Hi, I'm your modal" class="text-center" textWrap="true"/>
        </StackLayout>
    </modal:ModalStack>
</Page>

HTML (Angular)

<ModalStack dismissEnabled="true" class="modal-container">
  <StackLayout class="modal">
    <Label text="Hi, I'm your modal" class="text-center" textWrap="true"></Label>
  </StackLayout>
</ModalStack>

Style

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

.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