fix(Android) drawing additional empty line when 'textAlign' is set to 'justify' (#47122)

Summary:
Fixes https://github.com/facebook/react-native/issues/46908

The `justificationMode` is not set for multiline text without unicode characters with known width on both architectures. This caused the issue of drawing additional empty line at the end of `TextView` because Yoga thought that text takes 5 lines and falsely calculated it's height.

Currently, on the old architecture, the `justificationMode` is set only on text that is not boring (contains unicode characters) with unknown width. I am not sure why is that, so I am opening this as a draft for now as I am still checking if it doesn't break anything.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[ANDROID] [FIXED] - fix generating empty line at the end of multiline text view when `textAlign` is set to `justify`

Pull Request resolved: https://github.com/facebook/react-native/pull/47122

Test Plan: I've tested on both architectures on repro provided in the issue.

Reviewed By: javache

Differential Revision: D65002386

Pulled By: NickGerleman

fbshipit-source-id: 0187956c88e6eb1e637c24e82b3052cc82581a64
This commit is contained in:
Dawid
2024-10-29 14:22:59 -07:00
committed by Facebook GitHub Bot
parent dacada7750
commit 08e8f6adfd
5 changed files with 65 additions and 24 deletions
@@ -696,7 +696,7 @@ function NestedExample(props: {}): React.Node {
function TextAlignExample(props: {}): React.Node {
return (
<>
<View testID="text-align-example">
<Text>auto (default) - english LTR</Text>
<Text>أحب اللغة العربية auto (default) - arabic RTL</Text>
<Text style={{textAlign: 'left'}}>
@@ -717,7 +717,7 @@ function TextAlignExample(props: {}): React.Node {
as you can see all of the lines except the last one span the available
width of the parent container.
</Text>
</>
</View>
);
}