[@nativescript/datetimepicker] Exception on Android with NS7 and v2.0.4

[mreall]

From NativeScript/nativescript-datetimepicker#77:

If the demo apps cannot help and there is no issue for your problem, tell us about it

I get the following exception when trying to load the date picker on Android using NS7 and @nativescript/datetimepicker@2.0.3 (and @2.0.4). The picker never displays.

I have a TextField with an tap listener getDate that calls:

DateTimePicker.pickDate({
  maxDate: new Date(),
  date: startingDate,
})
.then((res) => {...});

Exception

Exception has occurred: Error
_createNativeDatePicker(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:51160:22)
	at (/Users/user/websites/test/picker/platforms/android/app/src/main/assets/app/vendor.js:51117:48)
	at pickDate(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:51108:22)
	at getDate(file:///data/user/0/org.nativescript.picker/files/app/bundle.js:77:83)
	at invokeWithErrorHandling(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:64687:26)
	at invoker(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:65392:14)
	at _executeCallback(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:31043:23)
	at TapAndDoubleTapGestureListenerImpl._handleSingleTap(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:30711:11)
	at TapAndDoubleTapGestureListenerImpl.onSingleTapUp(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:30670:12)
	at androidOnTouchEvent(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:30961:35)
	at (/Users/user/websites/test/picker/platforms/android/app/src/main/assets/app/vendor.js:23144:18)
	at handleGestureTouch(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:23143:12)
	at TouchListenerImpl.onTouch(file:///data/user/0/org.nativescript.picker/files/app/vendor.js:22817:13)

This works fine on NS7 iOS14

Which platform(s) does your issue occur on?

• Android 10 emulator

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

• CLI: 7.0.8
• Cross-platform modules: 7.0.9
• Runtime(s): 7.0.0 (android)
• Plugin(s):

  "dependencies": {
    "@nativescript/core": "~7.0.9",
    "@nativescript/datetimepicker": "^2.0.3",
    "@nativescript/theme": "~2.3.0",
    "nativescript-vue": "~2.8.1"
  },
  "devDependencies": {
    "@babel/core": "~7.11.6",
    "@babel/preset-env": "~7.11.5",
    "@nativescript/android": "7.0.0",
    "@nativescript/webpack": "~3.0.3",
    "babel-loader": "~8.1.0",
    "nativescript-vue-template-compiler": "~2.8.1",
    "node-sass": "^4.14.1",
    "vue-loader": "~15.9.3"
  },

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

I created a new project (ns create picker --vue) and added a TextField with an onTap handler called getDate. Run the debugger on the app, monitor All Exceptions, then tap the TextField. You should see the error. I've attached the minimal test project.

[montxogandia]

Same here with same exact conditions, my error is:

Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference

[bradmartin]

Closing for now. I believe this is fixed. Currently with NS8x on Android I've not encountered this with the following code which is taken from a production app where the tap event is on a textfield that ends up showing the picker. We can reopen if still experiencing.

import { DateTimePicker, DateTimePickerStyle } from '@nativescript/datetimepicker';
import { Application, Button } from '@nativescript/core';

export function someButtonTapToOpenThePicker(args) {
	const dateTimePickerStyle = DateTimePickerStyle.create(args.object as any);

    // This example handles styling the calendar for light and dark mode of the device settings
	if (Application.systemAppearance() === 'dark') {
      // style for dark mode
      dateTimePickerStyle.buttonsBackgroundColor = new Color('#202125');
      dateTimePickerStyle.dialogBackgroundColor = new Color('#202125');
      dateTimePickerStyle.titleTextColor = new Color('#fff');
      dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
      dateTimePickerStyle.spinnersBackgroundColor = new Color('#202125');
      dateTimePickerStyle.spinnersTextColor = new Color('#fff');
    } else {
      // style for light mode
      dateTimePickerStyle.buttonsBackgroundColor = new Color('#fff');
      dateTimePickerStyle.dialogBackgroundColor = new Color('#fff');
      dateTimePickerStyle.titleTextColor = new Color('#0067a6');
      dateTimePickerStyle.buttonsTextColor = new Color('#0067a6');
      dateTimePickerStyle.spinnersBackgroundColor = new Color('#fff');
      dateTimePickerStyle.spinnersTextColor = new Color('#0067a6');
    }

     DateTimePicker.pickDate(
      {
        context: (args.object as Button)._context,
        date: yourDateValue
        minDate: subYears(new Date(), 10),
        maxDate: new Date(),
        title: 'DatePicker'
        okButtonText: 'Okay',
        cancelButtonText: 'Cancel',
        locale: 'en'
      },
      dateTimePickerStyle
    ).then((result) => {
        // handle the result
    })
}