Cannot read property 'android' of null

[luisalcarasr]

file:///data/data/.../files/app/tns_modules/nativescript-snackbar/snackbar.js:28:108

_this._snackbar =android.support.design.widget.Snackbar.make(frame_1.topmost().currentPage.android, snackText,3000);

Can you help me?

[luisalcarasr]

This is my code:

        if (connection == connectionType.none) {
            this.snackbar.simple('Sin conexión a la Internet', '#fff', '#c00', 3, false);
        } else {
            this.snackbar.dismiss();
        }

[bradmartin]

how are you showing the snackbar? can you provide some more context on your usage, such as NS versions, framework (core, angular, vue), runtimes, core-modules? Your package.json would be sufficient as well along with some info on when this is called. I'm not aware of reasons for currentPage to be null except for some corner cases with NS that we can improve this plugin with better behavior.

Thanks for reporting 👍

[finger563]

I see this too in our project - happens for me when the app is refreshed and a snackbar is created by a service before the app is fully initialized

[finger563]

JS: **** App Resume Event ****
JS: **** App Suspended Event ****
JS: making service
JS: Adding characteristics to service!
JS: **** App Resume Event ****
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.callJSMethodNative(Native Method)
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.callJSMethod(Runtime.java:983)
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.callJSMethod(Runtime.java:967)
10-08 11:54:24.272 30829 30829 W ExifInterface: 	at com.tns.Runtime.callJSMethod(Runtime.java:959)
JS: state change - PushTracker::88:6B:0F:A5:A9:B4 - 0
JS: isPushTracker device: {"device":{},"UUIDs":[],"address":"88:6B:0F:A5:A9:B4","name":"PushTracker","RSSI":null,"manufacturerId":null,"manufacturerData":null}
JS: Unhandled Promise rejection: Cannot read property 'android' of null ; Zone: <root> ; Task: null ; Value: TypeError: Cannot read property 'android' of null TypeError: Cannot read property 'android' of null
JS:     at file:///data/data/com.permobil.smarteval/files/app/tns_modules/nativescript-snackbar/snackbar.js:28:108
JS:     at new ZoneAwarePromise (file:///data/data/com.permobil.smarteval/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:902:29)
JS:     at SnackBar.simple (file:///data/data/com.permobil.smarteval/files/app/tns_modules/nativescript-snackbar/snackbar.js:22:16)
JS:     at BluetoothService.notify (file:///data/data/com.permobil.smarteval/files/app/tns_modules/@maxmobility/mobile/core/services/bluetooth.service.js:590:23)
JS:     at BluetoothService.onServerConnectionStateChanged (file:///data/data/com.permobil.smarteval/files/app/tns_modules/@maxmobility/mobile/core/services/bluetooth.service.js:365:26)
JS:     at Bluetooth.Observable.notify (file:///data/data/com.permobil.smarteval/files/ap...
JS: Advertise succeeded

[public-virtualys]

I've got the same issue, using Angular. I create the SnackBar object in ngOnInit() method, and it seems the currentPage field is null. Maybe you should indicates that this plugin is not compatible with NS / Angular ?

[bradmartin]

It is compatible, the error android of null indicates the error but it's not that it's incompatible with NS+Angular. It even works with NS+Vue.

The times I've seen this are during some sort of navigation where the currentFrame is undefined. The current page is used to set the android position of the snackbar. https://github.com/bradmartin/nativescript-snackbar/blob/master/src/snackbar.android.ts#L37

It might just be best if we safe guard that approach or find a better way to handle when the current page is null such as during navigation. I'm not sure at the moment and haven't had time to look into it to find a good solution.

[luisalcarasr]

@bradmartin has the reason, it is compatible with Angular but you must be careful where you put it. I have put my code in the ngOnInit method of my app.component.ts file. In my case it has been solved because this is no longer executed during the execution of ngOnInit really, but it is executed as the result of an event.

[ngoahamos]

i moved my code from ngOnInit to ngAfterViewInit and it's working fine.

[bradmartin]

Yea, it's definitely a timing/usage issue here. Thanks for chiming in everyone.

The plugin tries to provide the current page to the .make method on the SnackBar. This is where it anchors. With that said, if the page is null, such is the case during navigation then it will fail.

There might be a way to work around it and provide the root level frame on newer apps, but I was unsuccessful in my quick attempt in doing this.

I'm going to keep this open as a research scenario where if it's possible to use the root frame on NS apps then we can move away from passing the currentPage which should be a more stable approach as a root frame should always be there (unlike the page during some scenarios).

[Manbearpixel]

Seems related to this issue maybe? https://github.com/NativeScript/nativescript-angular/issues/848

I can confirm I am also unfortunately hitting this error, though I cannot even use snackbar right now it seems.

JS: after view init
JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'android' of null
JS: TypeError: Cannot read property 'android' of null
JS:     at file:///data/data/org.odinblockchain.SampleApp/files/app/tns_modules/nativescript-snackbar/snackbar.js:21:65

I've tried moving the instantiation from contructor() to ngOnInit() to finally ngAfterViewInit() to no avail.

ngAfterViewInit() : void {
    setTimeout(() => {
      console.log('after view init')
      this.snack = new SnackBar()
      this.snack.simple('Hello')
    }, 1)
  }

Edit I was able to get it working, just not by setting it up through any initial flow methods. I'm instantiating it and calling it from an actionable method:

public sampleAction() {
  (new SnackBar()).simple("This is a notification")
}

Not the ideal solution, but it works. Hope to see something fixed on this end or on NativeScript's end.