nativescript modal dialog transparency - ios

Question

I try to create a custom dialog with nativescript using this link https://docs.nativescript.org/angular/code-samples/modal-page.html
All work great. But I don't know how to make the modal dialog transparent. The property backgroundcolor doesn't works with ios
Any help will be fine

Answer 1

Apple recommends that you don't make modals transparent, see this issue on nativescript's issue tracker: https://github.com/NativeScript/NativeScript/issues/2086#issuecomment-220629191
Nativescript's built-in modal is always fullscreen on iOS and cannot be transparent.
BUT you can workaround that if you (like us) need to.
Here is how we did it with nativescript-angular:
First inject Page in the modal-component.
On iOS override the function _showNativeModalView on the page-object like this:
import { Page } from 'ui/page';
const pageCommon = require('ui/page/page-common').Page;
import { Color } from 'color';
import * as utils from 'utils/utils';
......
in the constructor:
if (page.ios) {
// iOS by default won't let us have a transparent background on a modal
// Ugly workaround from: https://github.com/NativeScript/nativescript/issues/2086#issuecomment-221956483
page.backgroundColor = new Color(50, 0, 0, 0);
(<any>page)._showNativeModalView = function(parent, context, closeCallback, fullscreen) {
pageCommon.prototype._showNativeModalView.call(this, parent, context, closeCallback, fullscreen);
let that = this;
this._modalParent = parent;
if (!parent.ios.view.window) {
throw new Error('Parent page is not part of the window hierarchy. Close the current modal page before showing another one!');
}
if (fullscreen) {
this._ios.modalPresentationStyle = 0;
} else {
this._ios.modalPresentationStyle = 2;
this._UIModalPresentationFormSheet = true;
}
pageCommon.prototype._raiseShowingModallyEvent.call(this);
this._ios.providesPresentationContextTransitionStyle = true;
this._ios.definesPresentationContext = true;
this._ios.modalPresentationStyle = UIModalPresentationOverFullScreen;
this._ios.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
this._ios.view.backgroundColor = UIColor.clearColor;
parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 9, function completion() {
that._ios.modalPresentationStyle = UIModalPresentationCurrentContext;
that._raiseShownModallyEvent(parent, context, closeCallback);
});
};
}
You could also override that prototype of Page, but I think it's much cleaner to override it on the instance of Page instead.