Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
maslianok opened this issue Dec 28, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@maslianok
Copy link

commented Dec 28, 2016

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

This comment has been minimized.

Copy link

commented Jan 1, 2017

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

This comment has been minimized.

Copy link

commented May 23, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jul 26, 2017

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.

@hramos hramos added the Icebox label Jul 26, 2017

@hramos hramos closed this Jul 26, 2017

@iozeen

This comment has been minimized.

Copy link

commented Jan 3, 2018

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

@Mobile-Mike

This comment has been minimized.

Copy link

commented Jan 3, 2018

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

This comment has been minimized.

Copy link

commented Apr 1, 2018

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

This comment has been minimized.

Copy link

commented Apr 1, 2018

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

@derekleee

This comment has been minimized.

Copy link

commented Apr 1, 2018

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

@maslianok

This comment has been minimized.

Copy link
Author

commented Apr 1, 2018

@derekleee No, I haven't.

@ramonsenadev

This comment has been minimized.

Copy link

commented Apr 13, 2018

Same here

@baldursson

This comment has been minimized.

Copy link
Contributor

commented May 31, 2018

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...

@facebook facebook locked as resolved and limited conversation to collaborators Jul 26, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.