Nativescript 7 TimePicker/DatePicker error (iOS)

[gregersen79]

• CLI: 7.0.7
• Cross-platform modules: 7.0.0
• Android Runtime:
• iOS Runtime: 7.0.0
• Plugin(s):

Having a DatePicker or Timepicker in UI makes app crash. Note this is only tested on iOS.
Below crash log is from DatePicker:

***** Fatal JavaScript exception - application has been terminated. ***** NativeScript encountered a fatal error: Uncaught Error: -[_UIDatePickerIOSCompactView _textColor]: unrecognized selector sent to instance 0x7fab415058b0 at [color:getDefault](file: node_modules/@nativescript/core/ui/date-picker/index.ios.js:61:0) at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/index.js:1091:0) at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/index.js:1021:0) at onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:695:22) at _resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:259:0) at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:214:0) at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) at loadView(file:///app/vendor.<…>

To Reproduce
Create new project.
Add a DatePicker or TimePicker to UI, and navigate to page.

[asharghi]

Having the same problem running tns-ios version 6.5.2. Happened after I updated to xcode 12 and ios 14.

[asharghi]

I believe this is a duplicate of #8843

[timdoege]

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
      }
    },

[gregersen79]

@timdoege Thanks for the tip on the preferredDatePickerStyle 👍, do you know if something similar can be done with the TimePicker?

[timdoege]

@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

[gregersen79]

@timdoege Thank you. Do you if it is possible to set the TimePicker to the old wheel/inline style, like you do with the DatePicker?

[Log3n]

@gregersen79 The exact same workaround from @timdoege works for the timepicker aswell.

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

[gregersen79]

@Log3n Thank you, it works. I had not thought a property named preferredDatePickerStyle would also work for TimePicker, but thanks.

[zghotlawala]

The solution of commenting the ("textColor") line seems to be dodgy. I would prefer to wait until it is handled properly. Additionally, can't setup color properties for text, nor background color to white, it always stays light gray.
And it does work without setting preferredDatePickerStyle.

[andiberes]

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
  }
},

Can someone explain this further? how do i get this to fire in the component?

[Log3n]

@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.

[andiberes]

@Log3n absolute legend, didn't spot the version issue. thanks

[asharghi]

@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

[Log3n]

@asharghi I was just clarifying on how to use the proposed workaround. But you are totally right that updating the core is the better/correct solution to the issue.

[andiberes]

@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

I tried to move the NS7 and had nothing but issues :( but it does seem a much leaner solution. I will try the upgrade again tonight. fingers crossed it goes another this time.

[asharghi]

@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.

[andiberes]

Ok, so I took the plunge and did the upgrade to NS7, and i seem to be getting this error.

ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.9.7 was found instead.

Guess I will be searching the forums this afternoon for a fix 👍

[darrenkhouston]

@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!

[sandwai-scottjackman]

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!