react-native icon indicating copy to clipboard operation
react-native copied to clipboard

fix: Improve text line height calculation to properly align text on iOS

Open ArekChr opened this issue 4 months ago • 10 comments

Summary:

This pull request addresses an issue in React Native on iOS: Text gets truncated when the line height is too small, even if the line-height matches or exceeds the font size.

The existing logic did not correctly handle font metrics (ascent, descent, top, bottom) when the total height exceeded the line height. The implementation now ensures a more balanced vertical space distribution, reducing text clipping and misalignment.

The fix mirrors a similar solution made on Android, ensuring consistency across both platforms.

For more context, see the related issue: React Native issue #29507.

Changelog:

[IOS] [FIXED] - Fixed an issue where text clipping and misalignment occurred when the line-height was smaller than the total ascent and descent of the font.

Test Plan:

The result is an improvement over the current implementation, reducing the occurrence of text truncation. While minimal truncation still exists at single-line heights, particularly with special characters, the implementation better preserves the vertical alignment of the text compared to previous behavior. However, like the Android implementation, this does not fully resolve the issue of React Native truncating content that is out of bounds of the span.

Old Arch Before Old Arch After
Old Arch Before Old Arch After
New Arch Before New Arch After
New Arch Before New Arch After

ArekChr avatar Oct 08 '24 10:10 ArekChr