NativeScript: Nativescript 7 TimePicker/DatePicker error (iOS)

If you’re using RadDataForm you’ll notice the same thing is happening, but it looks a lot worse and is in some cases almost un-usable.

To fix this, just get the element in the editorUpdate event:

function customiseEditor(args){ args.editor.editor.preferredDatePickerStyle = 1; }

Of course you’ll want to wrap this in a version check.

I hope this is helpful to someone, as this wasted me a whole day!

As noted by @lochstar in NS Slack, the crash can be handled by commenting out the following in @nativescript/core/ui/date-picker/date-picker.ios.js

DatePicker.prototype[date_picker_common_1.colorProperty.getDefault] = function () {
    // return this.nativeViewProtected.valueForKey("textColor");
};

and setting the DatePicker to the old wheel/inline style and a @loaded event on the DatePicker component

    handleDatePickerLoaded(args) {
      // apply inline/wheel style for iOS 14+
      if (isIOS && device.osVersion >= 14.0) {
        args.object.ios.preferredDatePickerStyle = 1
      }
    },

@andiberes You don’t need to upgrade to 7 if you are having problems (could be you are using plugins that doesn’t support NS7 yet). Only need to update tns-core-modules package to version 6.5.20.

@Log3n and @andiberes, this is not the way to do it. You should update to lates NS 7, or if you are using NS 6 then update tns-core-modules to version 6.5.20. Then you can just use <DatePicker iosPreferredDatePickerStyle="1" />

And the right way to check the version is parseFloat(device.osVersion) >= 14.0 but you don’t need that anymore

@gregersen79 Yes, it’s the same line that causes the crash. As a temporary fix, I added these two steps in my build pipeline after npm install to automatically patch the two ios.js files:

$ sed -i.bak 's/return this.nativeViewProtected.valueForKey("textColor");/\/\/return this.nativeViewProtected.valueForKey("textColor");/' node_modules/@nativescript/core/ui/date-picker/date-picker.ios.js
$ sed -i.bak 's/return this.nativeViewProtected.valueForKey("textColor");/\/\/return this.nativeViewProtected.valueForKey("textColor");/' node_modules/@nativescript/core/ui/time-picker/time-picker.ios.js

@asharghi I was able to use your solution <DatePicker iosPreferredDatePickerStyle="1" /> with NS 6.7.8 and tns-core-modules 6.5.21 with Xcode 12. Thanks!

@andiberes you set up the function to be called on the loaded event of the DatePicker in your html/xml. E.g.

<DatePicker (loaded)="handleDatePickerLoaded($event)"</DatePicker>

I would change

device.osVersion >= 14.0

to

device.osVersion.split('.')[0] >= 14)

since the old approach wont work with the newest 14.0.1 version.