Windowed Modal not reaching bottom of screen

[flodaniel]

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.1
• Cross-platform modules: 6.1.
• Runtime(s): 6.1 & 6.1
• Angular with Typescript

Please, tell us how to recreate the issue in as much detail as possible.

Create a non fullscreen modal with the following code. Use verticalPosition="bottom". The modal will not stick to the very bottom of the screen. There will be some space in between. I tried with the current version and with @next but the result is the same.

I am unable to use ExtendedShowModalOptions, as this will lead to some errors. I registered the plugin in main.ts with the following code:

import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from "nativescript-windowed-modal"
import { registerElement } from "nativescript-angular/element-registry";

overrideModalViewMethod()
registerElement("ModalStack", () => ModalStack as any)

And here is the code to reproduce the issuse:

  const options: any = {
            viewContainerRef: viewContainerRef,
            fullscreen: fullscreen,
            context: context,
            animated: true,
            dimAmount: 0.5
        };

        return this.modalService.showModal(type, options).then(dialogResult => {
            this.modalOpen = false;
            return dialogResult;
        });

  <ModalStack verticalPosition="bottom">
      <GridLayout backgroundColor="#fff">
          <Label text=" laskdjföalsdf"></Label>
      </GridLayout>
  </ModalStack>

Here is a screenshot with layout markes enabled:

[flodaniel]

hi @mukaschultze , do you know if you can fix this? are there plans to fix this? I would really need it 👍

[mukaschultze]

No ETA at the moment, PRs are welcome in case anyone knows how to fix it.

[mukaschultze]

I am unable to use ExtendedShowModalOptions, as this will lead to some errors. I registered the plugin in main.ts with the following code:

What errors occur? This file has some working TS examples of how to use ExtendedShowModalOptions.

Also, nativescript-material-bottomsheet might be a better alternative to a bottom aligned modal.

[mukaschultze]

@Firetrip I couldn't reproduce the issue, the modal sticks to the bottom as it should both on a real device and in the emulator. In what devices you observed that behavior?

[flodaniel]

It is a Xiaomi Mi 9. Maybe it is because of the cuved bottom of the screen

[flodaniel]

Indeed, I just tried on an older phone with software buttons, which the Mi 9 does not have (it uses gestures) and the modal reaches the bottom

[Tyler-V]

I found this occuring when the modal was not set to fullscreen, I put up a PR that resolves this for Android.

[blasus]

@Firetrip I found a workaround for this issue using the combination of fullscreen: false and stretched: false in the ExtendedShowModalOptions object. Let me know if it works to you as well