How to measure rendered Elements


Hi everyone! I am new to {N} and loving it, but i got laggy at the following point:

(nearly?) every component has the methods of getMeasuredHeight/Width etc. but i got only zero as data.

I tried in navigatedTo and others but this will always return zero. I can’t find the correct context in docs and google and nowhere. Some coders do it with a timeout - but this is never guaranteed, so where is the correct context for fully rendered layouts/views?

I tried on NS 2.5 on android, with a simple Layout on Page with (loaded/navigatedTo/…) and other components and every measuredWidth / Height / Coordinates is / are: zero. Not undefined or NaN, just zero?!

Can you tell me the correct binding/context to get the …“afterFullyRendered”… state for layout and/or components?

I mean, when you want the context for Page or databinding, you use Page loaded=xyz or navigatedTo=yxz but where can I get: < Page allComponentsAreNowFullyRenderedAndMeasurable=function >?

I thought something like < Page rendered=onRendered > but didn’t found anything that would be called at this point.

Thank you so much!


ping ping @NathanaelA - ideas?


Hi there,

seems that this is not possible?

In my opinion this feature possibility to do a callback onRendered every time a Page or components would be rendered (or updated) is a needed feature of a strong and consistent API - any possibilities to get this into the core? :slight_smile:

So after navigatingTo, loaded, navigatedTo there should be “rendered” :slight_smile:


This is for 2.5; 3.0 changes and I haven’t investigated it. The easiest way to get the after rendered is:

exports.onNativigatedTo = function() {
setTimeout(everythingsRendered, 0);

In your everythingsRendered routine the numbers should now be correct. This has to do with how the main thread works; and when things are rendered…

Nathanael A.


Thanks Nathanael,

this is a good trick :slight_smile:

I have done it the same way :slight_smile: but this is what I don’t want. But, this issue is recognized here:

You can see @tsonevn wrote:

However at this point getting the components dimensions will not return the right values on this event. We will research this case and will verify, what will be the right way: to make some changes on loadedEvent or to implement a new one.

For further info, you could keep track on the issue.

But it looks like it will take a little bit of time…

Thank you

Gesendet von meinem HTC One


I need to use the measured height and width in a few places for my app. So I’ve build a function that returns a promise for this.

It’s just set to the global namespace in app.js

const platform = require("platform");

// I've set timeout to default to 100ms, that seems to always work.
global.getMeasured = (view, timeout = 100) => {
    const scale = platform.screen.mainScreen.scale;
    return new Promise(res => {
        setTimeout(() => {
             width: view.getMeasuredWidth() / scale
             height: view.getMeasuredHeight() / scale
        }, timeout)

Then anywhere else in your code, like in onLoaded for example.

    .then(dimensions => my_observer.setConstraints(dimensions));