Nativescript: Transparency in Modal Page.

[NickIliev]

_From @aylesm on February 3, 2016 13:46_

Hi,

I'm trying to set a modal page to be transparent so I can see the underlying page on iOS. I've tried setting the css background-color to 'transparent'. I've also tried setting it using hex following another issue raised here like this: #88FF0000. Neither works for me. My page is very simple...

<Page loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout orientation="vertical">
<Label text="some title" class="title"/>
<Label text="some content" textWrap="true"/>
<Button text="Ok" tap="dismiss" />
</StackLayout>
</Page>

Any help would be appreciated.

Thanks.

_Copied from original issue: NativeScript/cross-platform-modules#320_

[NickIliev]

_From @mobilemindtec on May 9, 2016 22:51_

Hi, did you find a solution?

[NickIliev]

Hello @aylesm

You can use the CSS-property opacity which takes values from 0 to 1.
For full list of the supported CSS-properties you can visit this documentation article

I hope that will help you out with your project - let me know if you need further assistance!

[mobilemindtec]

Hi @NickIliev,

Work, but not fine. backgroundColor="transparent" works with android but not with ios. When I try using opacity all page components were with background opacity.

<Page xmlns="http://www.nativescript.org/tns.xsd" 
  style="opacity: 0.1"
  backgroundColor="green">  
    <StackLayout orientation="vertical">
        <Label text="some title" class="title"/>
        <Label text="some content" textWrap="true"/>
        <Button text="Ok" tap="dismiss" />
    </StackLayout>
</Page>

[NickIliev]

@mobilemindtec

I have made some research and there are two things I should point out about modal pages.

• In iOS your modal page will always be fullscreen like stated here
• There is a large discussion about the possibility of making modal pages transparent and it is not a recommended practice from Apple's perspective (in fact here Apples are saying why modal views are not transparent : _All uncovered areas are dimmed to prevent the user from interacting with them_.). There are some native solutions (Objective-C) but still they only work for a specific iOS version or product and ussually are a bit hacky.

What I can recommend as a workaround for this scenario is to use a popup e.g ui/dialogs module.
You can still fully customize them and achive the wanted behaviour.

[mobilemindtec]

@NickIliev,

Ok, I changed Page.prototype._showNativeModalView to show the modal with transparency.. I need of background opacity, and not full transparency.

Page.prototype._showNativeModalView

        this._ios.providesPresentationContextTransitionStyle = true;
        this._ios.definesPresentationContext = true;
        this._ios.modalPresentationStyle = UIModalPresentationOverFullScreen;
        this._ios.view.backgroundColor = UIColor.clearColor(); // can be with 'alpha'

        parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 9, function completion() {
            that._ios.modalPresentationStyle     = UIModalPresentationCurrentContext;
            that._raiseShownModallyEvent(parent, context, closeCallback);
        });

This work for me. Thanks!

[shabib3]

@mobilemindtec @NickIliev - is there a chance that you could fully explain your solution? where shall I put this code? shall I run it exactly like Android modal dialog or the method call should be different?

Thanks :)

[nihaterdil]

Hello;

I need such a feature.
I'm telling you, I made arrangements,

The points I made do not go to the phone anyhow.

I am doing Visual Studio with Javascript.
I have not changed, but I am dreaming.

Does this idea have any idea?

[yethael]

You can still fully customize them and achive the wanted behaviour

How?, I have read the documentation and I have not found where to explain how it can be customized.

[tdhman]

Found a way to make it works on iOS, using loaded event on root layout, then change background color on top presented view controller:

        let ctrl = UIApplication.sharedApplication.keyWindow.rootViewController;
        while (ctrl.presentedViewController) {
          ctrl = ctrl.presentedViewController;
        }
        if (ctrl) {
          ctrl.view.backgroundColor = UIColor.clearColor;
        }

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.