NS-Vue: Cannot display DateTimePicker on NS Vue Modal View

[MCurran16]

Which platform(s) does your issue occur on?

• iOS
• iOS 14
• emulator

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

• CLI: 6.8.0
• Cross-platform modules: 6.5.8
• Runtime(s): 6.5.3

Additional links

https://nativescript-vue.org/en/docs/routing/manual-routing/#modal-view-navigation

Error

TypeError: uiView.superview.class is not a function. (In 'uiView.superview.class()', 'uiView.superview.class' is an instance of UIView)

In an NS Vue modal view, the date time picker does not show on iOS. The code gets hung up trying to find a label container. See code below.

// Main page

public openDeepTile(): void {
    const showModalOpts: ModalOptions = {
      fullscreen: true,
      animated: true,
      props: {
           .....
      }
    };
    this.$showModal(DeepTile, showModalOpts);
}

// DeepTile.vue

<template>
  <Frame>
    <Page
      @navigatingTo="onNavigatingTo"
      backgroundSpanUnderStatusBar="true"
    >
      <ActionBar class="brand-action-bar" flat="true">
             ....
      </ActionBar>

      <GridLayout
        rows="auto, *, auto"
      >
           ..... content
      </GridLayout>
    </Page>
  </Frame>
</template>

...

const time = new Date().setHours(0, 10, 0, 0);
    DateTimePicker
      .pickTime({
        context: args.object._context,
        time: new Date(time),
        locale: 'en_GB', // gets rid of AM/PM
        is24Hours: true,
      })
      .then(selectedTime => {
      });

After digging around in the ns-datetimepicker code for ios, I found that it was hanging up on const messageLabelContainer = DateTimePicker._getLabelContainer(messageLabel);. This would never resolve with anything. Please see my following code:

I was playing around with solutions and this seemed to work. But I'm assuming there was a reason it was done the other way, which is the reason I'm not creating a PR for this yet.

// datetimepicker.ios.ts

private static _getLabelContainer(uiView: UIView) {
        if (uiView.superview instanceof UIView)) {
            return uiView.superview;
        }
        return DateTimePicker._getLabelContainer(uiView.superview);
}

[MCurran16]

https://github.com/NativeScript/plugins/pull/118

[NathanWalker]

Fix in 2.1.1