Skip to content

Latest commit

 

History

History
155 lines (115 loc) · 5.61 KB

README.md

File metadata and controls

155 lines (115 loc) · 5.61 KB
Raw

Nativescript Windowed Modal apple android

npm version npm downloads Build Status Nativescript Dependency Visitors

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