[docs] Document measure()

[corbt]

I'm trying to get the calculated width/height of a view using the syntax found in #953, using RN 0.11 on Android. Is this implemented?

I have a component with a <View ref="test">...</View> and the following componentDidMount() block:

  componentDidMount() {
    this.refs.test.measure((ox, oy, width, height, px, py) => {
      console.log("measured", ox, oy, width, height, px, py);
    });
  }

Which does successfully call the callback inside measure, but only prints

measured undefined undefined undefined undefined undefined undefined.

[ide]

This isn't a direct answer to your question, but have you looked into the onLayout prop?

[corbt]

Thanks @ide, the onLayout prop does work correctly on Android and lets me get done what I was trying to accomplish, although measure still isn't working properly.

[ide]

cc @mkonicek @kmagiera

[mkonicek]

I remember using measure but always did that from requestAnimationFrame. The issue might be that in componentDidMount the views haven't been measured yet.

Let's figure out why that is and document this well in JS docs for measure.

[corbt]

Hmm. If the component isn't measured yet, I feel like the expected behavior should be that the measure callback isn't run until the measurement has actually taken place. But yeah, if that's not the case we should document correct usage somewhere.

[mkonicek]

I believe that React calls render and componentDidMount and only then we update the native view hierarchy.

[mkonicek]

Not invoking the callback might be confusing too. It's more explicit to call back and say "the values are not available yet" which is what you are seeing.

[corbt]

No, I'm saying that the callback should still fire, but not until the measurements are available, at whatever stage that is.

[astreet]

Yeah, this isn't correct behavior and we should fix it. A workaround for now is calling measure in a requestAnimationFrame callback.

What's going on here is that componentDidMount is called after view commands have been sent to native, but before the end of the 'batch' of native commands. We only calculate layout and truly dispatch view updates on the native side at the end of each of these batches so that we don't show partial transactions (since a view transaction can occur over the course of many frames). The end result here is that measure is being executed after we've queued up the view commands on the native side, but before we've started to commit the transaction.

[corbt]

Alternatively, for the "I want to know the dimensions of this view ASAP" use case, the onLayout prop mentioned above works just fine, and is a more natural fit than calling measure on a ref inside componentDidMount. So even just documenting both those options in the same place with a short explanation of the differences between them may be 80% of the way there.

[astreet]

Using an onLayout listener from componentDidMount is also a good solution. I'll update the docs to mention this issue until we get it fixed.

[mkonicek]

measure is defined here: https://github.com/facebook/react-native/blob/master/Libraries/ReactIOS/NativeMethodsMixin.js but doesn't have docs.

@corbt Would you be up for adding the docs there?