Nativescript Windowed Modal

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

NativeScript 5.x only, for older NS versions use 1.0.3 instead.

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 HorizontalAlignment ("left" - "center" - "right" - "stretch") | | horizontalPosition | string | both | center | Uses the same options as VerticalAlignment ("top" - "middle" - "bottom" - "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 install && npm run plugin.prepare
4. npm run demo.android or npm run demo.ios

Changelog

v5.0.6

• Fix layout bug

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