How to use with Vue.JS?

[chimit]

Can anybody give some examples how to use this plugin with Vue.JS?

I tried to change the example code from TS to JS but got errors:

*** JavaScript call stack:
(
)
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'nativescript_ibeacon__WEBPACK_IMPORTED_MODULE_0__["BeaconLocationOptionsIOSAuthType"].Always')
at

[mtchoy]

I imported the module as follows and could receive ranged beacons when deployed to the preview app.

import { NativescriptIbeacon } from "nativescript-ibeacon";

import {
  BeaconLocationOptionsIOSAuthType,
  BeaconLocationOptionsAndroidAuthType,
  BeaconRegion
} from "nativescript-ibeacon/nativescript-ibeacon.common";

const geoLocation = require("nativescript-geolocation");

Here's a function to start the ranging.

onBeaconButtonTap() {
      let region = new BeaconRegion(
        "HelloID",
        "12345678-abcd-88cc-abcd-1111aaaa2222"
      );

      let callback = {
        onBeaconManagerReady: function() {
          // start ranging and/or monitoring only when the beacon manager is ready
          nativescriptIbeacon.startRanging(region);
          // nativescriptIbeacon.startMonitoring(region);
        },
        didRangeBeaconsInRegion: function(region, beacons) {
          console.log("beacons: ", beacons);
        },
        didFailRangingBeaconsInRegion: function(
          region,
          errorCode,
          errorDescription
        ) {
          console.log(errorDescription);
        }
      };

      let options = {
        iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
        androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
        androidAuthorisationDescription: "Location permission needed"
      };

      let nativescriptIbeacon = new NativescriptIbeacon(callback, options);

      geoLocation.isEnabled().then(enabled => {
        if (!enabled) {
          geoLocation
            .enableLocationRequest()
            .then(() => nativescriptIbeacon.bind());
        } else {
          nativescriptIbeacon.bind();
        }
      });
    },

It works but only for a few rounds... After that, no more result are delivered... Anyone has similar experience?

[msn444]

Yes. A few months ago I integrated this plugin with a vue.js app and it worked fine. I revisited that app today, after updating to tns-ios 5.3.1, and now see an issue similar to yours: I get results for a short period (perhaps 1 second) after calling startRanging, and then no further results. At the same moment, I see the following log every time: {"msg":"CLLocationManager", "event":"activity", "_cmd":"dealloc", "self":"0x280f3e400"} {"msg":"state transition", "event":"state_transition", "state":"LocationManager", "id":"0x280f3e400", "property":"requestingLocation", "old":0, "new":0} {"msg":"state transition", "event":"state_transition", "state":"LocationManager", "id":"0x280f3e400", "property":"requestingRanging", "old":0, "new":0} {"msg":"state transition", "event":"state_transition", "state":"LocationManager", "id":"0x280f3e400", "property":"updatingRanging", "old":0, "new":0} {"msg":"invalidating client", "client":"0x111d35130"} {"msg":"client about to be destroyed", "client":"0x111d35130"} {"msg":"state transition", "event":"state_transition", "state":"LocationManager", "id":"0x280f3e400", "property":"lifecycle", "old":"0x2826100e0", "new":"0x0"}

As well, the Location Permissions dialog disappears on its own within 1-2 seconds if I don't tap it right away.

I've reproduced the issue on the ns-ibeacon demo app using tns-ios versions 5.2.0-2019-02-07-122938-01 and later. The issue does not manifest with the previous build, 5.2.0-2019-02-06-170020-01 and earlier. The CLLocationManager dealloc message also does not appear.

All tests were done with tns-core-modules 5.3.1.

[msn444]

My hunch would be that it's related to this change: https://github.com/NativeScript/ios-runtime/commit/b3713cb55693ab9101d3ab0bfe6125e2c77cd1aa

[mtchoy]

@msn444 Thank you so much for your help. It turns out nativescriptIbeacon was destroyed prematurely, so I move the declaration of nativescriptIbeacon out of the onBeaconButtonTap() callback and it works perfectly!