Fix single line text not fully rendered

[fabOnReact]

Summary:

Please re-state the problem that we are trying to solve in this issue.

ReactTextShadowNode#measure calculates the wrong width for single line Text that has an ellipsis (fixes #39722).

What is the root cause of that problem?

React Native sets the wrong width in the ReactTextShadowNode onMeasure function for single line Text, demonstrated with:

• React Native Minimum Reproducible Example (RNTesterAppShared.js)
• Android Minimum Reproducible Example (CustomTextView.java, branch)

The android minimum reproducible example:

1. Reproduces the react-native issue using the same implementation of ReactTextShadowNode onMeasure, which calculates the wrong text width with StaticLayout (screenshot)
2. Demonstrates that the default TextView implementation of onMeasure does not have this issue (screenshot) (the issue does not reproduce when commenting the implementation of onMeasure ). It is not the expected/intended behavior on Android.

What changes do you think we should make in order to solve the problem?

Set the correct width for single-line Text in the measure callback.

Changelog:

[ANDROID] [FIXED] - Fix single line text not fully rendered

Test Plan:

• Text width lower than parent view (no ellipsis)
• Nested Text with different combination of styles (ellipsisMode head)
• Nested rtl short Text with inline image (image shows to the right)
• Very long rtl text (image does not show and there is no ellipsis)
• Text with nested image is shorter than parent view (the image shows and there is no ellipsis)
• BoringLayout support for margin and padding with single line text
• The text wraps correctly without leaving white spaces
• Text width is larger than parent
• TextView takes the entire line
• Image does not fix in TextView
• Images do not fit in the line (parent applies flex style)
• Text with images wraps on the second line
• Text includes emoji (not boring text)
• Veryfing the result of the onLayout callback

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	19,558,619	+16,062
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	22,928,748	+16,192
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 44f9371
Branch: main

[fabOnReact]

thanks a lot @dmytrorykun. When you do plan to merge this PR?

[fabOnReact]

Thanks @dmytrorykun, could we land this PR? Thanks

[cipolleschi]

Forwarding an internal comment:

• The premise that we need to use the simpler BoringLayout to get the max width text could take without breaking seems strange. StaticLayout has options to not line break (maybe we should be setting that for single line instead?)
• This will leave the bug when there is a unicode, RTL, or other complicated character.
• This code is duplicated into Fabric (TextLayoutManager.java and now some more variants), and this code does not change anything there. If has same issue, we introduce new Fabric regression to Paper. If it isn't there, it has a different solution probably.

[cipolleschi]

What about

Suggested change

	// StaticLayout#getLineWidth does not work with single-line text.
	boolean overrideTextBreakStrategySingleLine =
	boring == null
	? false
	: mNumberOfLines == 1 && !mAdjustsFontSizeToFit && boring.width > width;
	// StaticLayout#getLineWidth does not work with single-line text.
	boolean overrideTextBreakStrategySingleLine =
	boring != null && mNumberOfLines == 1 && !mAdjustsFontSizeToFit && boring.width > width;

and we avoid the ternary?

[fabOnReact]

• Text width lower than parent view (no ellipsis)
• Nested Text with different combination of styles (ellipsisMode head)
• Nested rtl short Text with inline image (image shows to the right)
• Very long rtl text (image does not show and there is no ellipsis)
• Text with nested image is shorter than parent view (the image shows and there is no ellipsis)
• BoringLayout support for margin and padding with single line text
• The text wraps correctly without leaving white spaces
• Text width is larger than parent
• TextView takes the entire line
• Image does not fix in TextView
• Images do not fit in the line (parent applies flex style)
• Text with images wraps on the second line
• Text includes emoji (not boring text)
• Veryfing the result of the onLayout callback

[fabOnReact]

Thanks for the code review.

• The premise that we need to use the simpler BoringLayout to get the max width text could take without breaking seems strange. StaticLayout has options to not line break (maybe we should be setting that for single line instead?)

I updated the solution to use StaticLayout instead of BoringLayout.

• This will leave the bug when there is a unicode, RTL, or other complicated character.

The new solution supports not boring text, emoji, RTL, etc (test cases).

• This code is duplicated into Fabric (TextLayoutManager.java and now some more variants), and this code does not change anything there. If has same issue, we introduce new Fabric regression to Paper. If it isn't there, it has a different solution probably.

I added the Fabric implementation and included tests of the functionalities on Fabric and Paper.

[facebook-github-bot]

@dmytrorykun has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[dmytrorykun]

@fabOnReact there is a new comment in the corresponding issue #39722

[cipolleschi]

@realsoelynn this might be related to the measurement issues you are working on.