How to find/watch the dimensions of a view in a NativeScript layout?

nativescript
Michael Eden picture Michael Eden · Feb 17, 2016 · Viewed 10.7k times · Source

When my layout loads any view inside of it has a width and height of NaN, it also has a getMeasuredHeight() and getMeasuredWidth() of 0.

At some point getMeasuredHeight() and getMeasuredWidth() (after the layout is laid out I guess) receive useful values.

How can I get the dimensions of anything? How can I watch them change?? When will .width and .height ever not be NaN??? Why can't I make a view hover over the entire screen????

So far I've been polling every 100ms and I feel pretty dumb. Please help.

Answer

odiaz picture odiaz · Aug 6, 2016

Use the correct import:

const platform = require("platform")

or if you are using 

import {screen} from "platform"
//or import {screen} from "tns-core-modules/platform/platform"

then you can use it depending on your language like this :

Typescript:

screen.mainScreen.widthDIPs //for example : 640
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

mainScreen implements the ScreenMetrics interface allowing access to the different screen sizes.

JS:

platform.screen.mainScreen.widthDIPs //for example : 640
platform.screen.mainScreen.widthPixels
platform.screen.mainScreen.heightDIPs
platform.screen.mainScreen.heightPixels

NOTE: this properties are the dimensions of the mobile device screen.

Related questions

repositories.cfg could not be loaded in Windows 10

while installing native-script i got repositories.cfg could not be loaded error , please help me debugging it. It would help me if you can give the way to download the file externally. The code i used was..... @powershell -NoProfile -ExecutionPolicy …

Read More
Difference between Xamarin and Telerik's native script

Xamarin Write the model in C# Write the views for each OS in their own native way Xamarin promises that the new functionality in libraries is added the same day Telerik Native script Write in javascript and call native script's …

Read More
Attempted to assign to readonly property even though same command works elsewhere?

I have a Javascript function (in an Angular 2 NativeScript based mobile app) which is triggered on a button press, it should hide the button and show an activity indicator in its place, carry out a Bluetooth scan, which when completed …

Read More