`onLayout` and `.measure` doesn't work for nested Text components

[maslianok]

Description

onLayout and .measure doesn't work for nested Text components

Reproduction

Link to demo: https://rnplay.org/apps/rSlYMg

Let's say we have next layout

<View>
  <Text onLayout={this.onRootTextLayout}>
    <Text onLayout={this.onChildTextLayout}>Text</Text>
  </Text>
</View>

onLayout for the first (outer) Text works as expected. But it doesn't work for the second (nested) component.

The same for the .measure method.

<View>
  <Text ref={el => this.rootText = el}>
    <Text ref={el => this.childText = el}>Text</Text>
  </Text>
</View>

// ...

// Works as expected
this.rootText.measure((fx, fy, width, height, px , py) => console.log('rootText offset top:' + py));

// Doesn't work. Always show 0.
this.childText.measure((fx, fy, width, height, px, py) => console.log('childText offset top:' + py));

Additional Information

• React Native version: 0.38
• Platform: both
• Operating System: MacOS

[shahen94]

please read this doc to understand how nested text works.
https://facebook.github.io/react-native/docs/text.html#nested-text
I don't think that's a bug

[Mobile-Mike]

Had that problem before, fixed it by adding collapsable={false} on the element you want you measure, in you case try adding it to the view. BTW i had that issue only on Android.
Hope it helps :)

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[iozeen]

@Mobile-Mike doesn't seem to work for me

[Mobile-Mike]

You would have to be more specific, as i mentioned before add collapsable={false} on the parent!! element. It will keep it in memory and be able to be measured. Try adding collapsable={false} to every element, once its going to work, remove them one by one.

[derekleee]

I 've encountered the same problem. Does anyone know how to solve it? It's important for me to nest text in a parent text and get its position.

[derekleee]

@Mobile-Mike Text doesn't have collapsable prop as view does. That's what the problem is.

[derekleee]

@maslianok Have you solved the issue at last? I'm having the same problem now.

[maslianok]

@derekleee No, I haven't.

[ramonsenadev]

Same here

[baldursson]

I also stumbled upon this issue. I get why it's not working, since nested text components are concatenated. But I really need to know the position of a nested text since I wan't to decorate it with an icon...