onTextLayOut is not getting triggered

[kgurupavan]

Description

For a text component <Text>, if we specify onTextLayout and write log statement, its not getting triggered.

i wanted to use the onTextLayout to get the no of lines being rendered for a given text width. The no of lines might change based on the width prop in style.

Therefor, i would like to get the no of lines to do some operation on text when it exceeds max lines limit.

React Native Version

0.70.2

Output of npx react-native info

N/A

Steps to reproduce

Write a text component and define "onTextLayout" prop to send in the handler.

The handler doesn't get triggered even during the first layout render.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/Wff9zMnHx

[github-actions[bot]]

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[kgurupavan]

we are using react native 64 & 67 locally and it doesnt work. I've tried on snack expo and it doesnt work. Snack expo should be using the latest react if am not wrong.

[kgurupavan]

Did any one from reactnative looked into this ? onTextLayout isn't working

[alone-tyh]

I encountered a style in the Text component with 'position: absolute', which would cause onTextLayout to not be executed

[elenitaex5]

Same for me, I was wondering using onTextLayout, but is not being triggered when the component is Mount. Any solutions of that? Actually using [email protected]

[Karthik-B-06]

@elenitaex5 Have you found a workaround for it work on mount? onTextLayout does not seem to work.

[lkaihua]

I have encountered the same issue, onTextLayout does not work for my case.

My primary goal is to get the width and height of the text block.

The component is as follows,

<View>
  <Text onTextLayout={onTextLayoutHandler}>{dynamicText}</Text>
</View>

The function onTextLayoutHandler does not trigger for me. Because the content dynamicText is dynamic, the Text is changing its width and height.

My solution is to wrap the Text in another child View

<View style={styles.container}>
  <View style={styles.textWrapper} onLayout={(event: LayoutChangeEvent) => {
    const {x, y, width, height} = event.nativeEvent.layout;
    console.log('text span layout: ', {x, y, width, height, index});
}}><Text>{dynamicText}</Text></View>
</View>

Please note that for me the .container style is as follows,

{
  display: flex;
  flex-shrink: 1;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: ...
}

And with .container, I can control the max-width; with .textWrapper I can calculate the number of actual text lines based on its height divided by the line-height.