NullPointerException when running on Android

[tjvantoll]

Hey @EddyVerbruggen,

Just tried out the plugin and it works great on iOS, but I’m getting the following error on Android:

JS: Error in mapbox.show: Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference
JS:     android.view.ViewConfiguration.get(ViewConfiguration.java:359)
JS:     android.view.View.<init>(View.java:3587)
JS:     android.view.View.<init>(View.java:3682)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:497)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:493)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:489)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:485)
JS:     android.widget.FrameLayout.<init>(FrameLayout.java:103)
JS:     com.mapbox.mapboxsdk.views.MapView.<init>(MapView.java:685)

Any idea what’s up? I’m testing on an Android 5.x emulator and I have showUserLocation turned off. Here’s the code I’m using:

mapbox.show({
    accessToken: "---MY TOKEN---",
    style: mapbox.MapStyle.EMERALD,
    margins: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 300
    },
    showUserLocation: false,
    hideAttribution: true,
    hideLogo: true,
    hideCompass: true
});

Thanks.

[EddyVerbruggen]

Hey @tjvantoll can you try a real device as well? Just tested on my 4.4.4 device with your code without a problem. Will try an emulator now.

[EddyVerbruggen]

5.x emulator works ok as well.
tns 1.5.2 here.

Hmm.. can you share your project with me?

[tjvantoll]

Hmmmm... might be on my end. Yeah hold on. Uploading now.

[tjvantoll]

Here it is: https://github.com/tjvantoll/HotOrCold

[EddyVerbruggen]

Ka-boom! Same error here.

I'm guessing it's a timing issue. I instantiate it from a button, you do it when the app loads.

[tjvantoll]

Race conditions ftw! I’m guessing this might be because I’m using Angular 2, so the app itself may not be “ready” in the constructor of the first Component. @hdeshev might have some ideas.

[EddyVerbruggen]

Yes, I was wondering where the xml file was and saw Angular :)

Haven't used that before so it's a bit hard to say really. It's not a race condition I think as wrapping the show function in a timeout of 4 seconds results in the same stacktrace.

I'll check the Mapbox github repo as well

[EddyVerbruggen]

Ah, found sth, hang on

[EddyVerbruggen]

Looks like with Angular the context (the activity really) is not initialized when the mapbox module is loaded. Since the plugin was caching that at the top (near the imports) the value wasn't re-evaulated when the show function was invoked. Now it is.

Grab 1.1.1 from npm while it's hot (or cold)!

[EddyVerbruggen]

Oh btw I never tested this change without that timeout around show.
Hope it works without.

[tjvantoll]

🎉I’ll give it a shot tomorrow to confirm it works. Thanks for jumping on this so quickly!

[tjvantoll]

Unfortunately this doesn’t seem to work without the setTimeout 😞 I seem to need to wait about a full second for this to reliably work.

I also tried switching the logic to be driven off of a loaded event, i.e.

<StackLayout [loaded]="loadMap()">
    <!-- stuff -->
</StackLayout>

That approach seems to actually make more sense than the Component’s constructor, but I got the same error.

[EddyVerbruggen]

This kind of use is not something the Mapbox guys anticipated. Perhaps it's a good idea to log this with them as I don't see how this plugin could fix an issue that's really a Mapbox-NativeScript(with Angular) issue.

[EddyVerbruggen]

Btw, that loaded approach makes a lot of sense, does it fire too soon perhaps?

[tjvantoll]

Yeah agreed. I’d like to see what @hdeshev or one of the people on our Angular team thinks about this and I can take it from there.

[MikeHuntington]

Has there been any update on this? I'm running into this same issue? Where did you place the setTimeout code @tjvantoll ??

thanks

[tjvantoll]

@MikeHuntington To my knowledge there are no updates, but the setTimeout() workaround has been working fine for me. Essentially the code is something like this:

import {Component} from "angular2/core";
var mapbox = require("nativescript-mapbox");

@Component({
  selector: "my-app",
  template: `
<StackLayout [loaded]="layoutLoaded()">
  ...
</StackLayout>
`
})
export class AppComponent {
  layoutLoaded() {
    setTimeout(showMap, 1000);
  }

  showMap() {
    mapbox.show({
      accessToken: "...",
      style: mapbox.MapStyle.EMERALD,
      showUserLocation: false
    });
  }
}

You can show an activity indicator or something in the time it takes to load the map if the delay is awkward.

[ShawnPavel]

I'm getting a different error when creating the map on android:

JS: mapbox show error: Error: java.lang.NullPointerException: Attempt to read from field 'com.mapbox.mapboxsdk.geometry.LatLng com.mapbox.mapboxsdk.c
amera.CameraPosition.target' on a null object reference                                                                                              
JS:     com.mapbox.mapboxsdk.camera.CameraUpdateFactory$CameraPositionUpdate.getCameraPosition(CameraUpdateFactory.java:190)                         
JS:     com.mapbox.mapboxsdk.maps.MapboxMap.moveCamera(MapboxMap.java:278)                                                                           
JS:     com.mapbox.mapboxsdk.maps.MapboxMap.moveCamera(MapboxMap.java:266)                                                                           
JS:     com.mapbox.mapboxsdk.maps.MapView.setInitialState(MapView.java:260)                                                                          
JS:     com.mapbox.mapboxsdk.maps.MapView.initialize(MapView.java:247)                                                                               
JS:     com.mapbox.mapboxsdk.maps.MapView.<init>(MapView.java:182)

I also use angular for my project. I've tried on multiple emulated android version and an actual device. I get the same error in all cases.
I tried using the delay tactic above, and loading from a button click instead. Any ideas?

[ShawnPavel]

Solved the issue. Ultimately, I just had to set an initial position when showing the map on Android.

[Stavanger75]

+1

Get the same on vanilla. The loaded event fires to early on Android 2.3. Works when defined in XML. Using setTimeout(showmap, 50) solution from @tjvantoll solves the problem until a fix is released. (Using 50 ms instead of 1000ms).

By the way: Thanks for a great plugin :-)

[EddyVerbruggen]

@Stavanger75 about to push an update that handles this delay automatically.

[Stavanger75]

@EddyVerbruggen Can confirm it is working on Android. Thanks :-)