Search code examples
javascriptxmlnativescript

Accessing element height in NativeScript

I am trying to write a native script app which retrieves the rendered height of the bottle view/element in my xml. I have tried the following code, but unfortunately, I get an error (shown below). Any guidance would be much appreciated.

JS:

var viewModule = require("ui/core/view");
var page;

exports.fabTap = function (args) {
      page = args.object;
      var bottle = page.getViewById("bottle");
      console.log("Height: " + bottle.height);
  }

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:FAB="nativescript-floatingactionbutton" actionBarHidden="true" loaded="pageLoaded">
  <GridLayout columns="*, *, *, *" rows="15*, 5*, 20*, 5*, 5*, 5*, 5*, 20*, 20*" width="100%" height="100%" style.backgroundColor="white" >
    <Image src="res://logo" row="0" col="1" colSpan="2" stretch ="aspectFit" class="logo"/>
    <Image id="bottle" src="res://bottle_outline" row="2" col="0" rowSpan="6" colSpan="2" stretch="aspectFit"/>
  </GridLayout>
</Page>

Cannot read property 'height' of undefined.

Solution

  • This is because in the fabTap handler, args.object is not the page but the FAB widget itself. So when you call getViewById it searches the view hierarchy of the FAB widget, and there is no bottle there :) You should change your code as follows:

    var viewModule = require("ui/core/view");
var page;
exports.pageLoaded = function (args) {
   page = args.object;
}
exports.fabTap = function (args) {
   var bottle = page.getViewById("bottle");
   console.log("Height: " + bottle.height);
}