Background opacity (dimAmount) not working on iOS

[Tyler-V]

Which platform(s) does your issue occur on?

• iOS / 13.3

Is there any code involved?

.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;
}

  showMapLayers() {
    const options = {
      viewContainerRef: this.vcRef,
      fullscreen: false,
      dimAmount: 0.5,
    };

    return this.modalDialogService.showModal(MapStylesComponent, options);
  }

<ModalStack dismissEnabled="true" class="modal-container">
  <StackLayout class="modal">
    <AbsoluteLayout width="100%" height="50" style="border-bottom-color: #DDD; border-bottom-width: 1;">
      <StackLayout orientation="horizontal" width="100%" height="100%">
        <Label text="Map Styles" fontSize="20" fontWeight="bold" width="100%" textAlignment="center" verticalAlignment="center"></Label>
      </StackLayout>
    </AbsoluteLayout>
    <StackLayout class="p-10">
      <StackLayout>
        <Button text="Streets" class="-primary" (tap)="setStyle(MapStyle.MAPBOX_STREETS)"></Button>
        <Button text="Terrain" class="-primary" (tap)="setStyle(MapStyle.OUTDOORS)"></Button>
        <Button text="Satellite" class="-primary" (tap)="setStyle(MapStyle.SATELLITE_STREETS)"></Button>
      </StackLayout>
    </StackLayout>
  </StackLayout>
</ModalStack>

[Tyler-V]

Setting the backgroundColor as transparent on the modal-container allows me to show the background content once again but I'm unable to add an opaque background.

<ModalStack dismissEnabled="true" class="modal-container" backgroundColor="transparent">
  <StackLayout class="modal">
  ...

[Tyler-V]

Fixed, https://github.com/mukaschultze/nativescript-windowed-modal/pull/26

[Tyler-V]

@mukaschultze @CalebJTSmith @lochstar @edusperoni

[juanm4]

Hi, I want give thanks to @Tyler-V for this fix. I am using nativescript vue and I would to know if this merge is going to be done soon. If not, I would like to know if is possible to install this library pointing to @Tyler-V master branch for a temporal fix.

¿Are there something that make that the library in my package.json point to this pull?

Thanks and kind regards!

[lochstar]

@juanm4 You can point directly to a git branch in your package.json. Here's an article that may help.

[juanm4]

@lochstar Thanks for info, but unfortunately in this library there isn't a package.json in the root path. So, when you try to install npm install --save Tyler-V/nativescript-windowed-modal#master it fails.

Any suggestion to fix it? Thanks!

[Tyler-V]

Looks like some regression was introduced in the latest update @mukaschultze @CalebJTSmith @lochstar @edusperoni

Can we reopen this issue? Or should I make a new one, this is appearing in Android on NS7 now.

    showMapLayers() {
        const options = {
            viewContainerRef: this.vcRef,
            animated: false,
            fullscreen: true,
            dimAmount: 0.5,
        };

        return this.modalDialogService.showModal(MapStylesComponent, options);
    }