This plugin overrides the showModal()
from nativescript, making modals look and behave the same on Android and iOS.
tns plugin add nativescript-windowed-modal
Call the overrideModalViewMethod()
once before starting the app and register the layout element:
var windowedModal = require("nativescript-windowed-modal")
windowedModal.overrideModalViewMethod()
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)
// 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>
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. |
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") |
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:
<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>
<ModalStack dismissEnabled="true" class="modal-container">
<StackLayout class="modal">
<Label text="Hi, I'm your modal" class="text-center" textWrap="true"></Label>
</StackLayout>
</ModalStack>
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;
}
- Clone this repo
cd src
npm run demo.android
,npm run demo.ios
,npm run demo.ng.android
, ornpm run demo.ng.ios
- Padding won't apply on children of the
ModalStack
, wrapping them with aStackLayout
fixes the problem; - Auto width is kinda buggy on some situations, set a fixed width for children of
ModalStack
when possible;
Apache License Version 2.0, January 2004