fix(core): proper line-height calculation (#10642)

CatchABus · web-flow · commit ec7fa5d05e68 · 2024-10-31T14:40:23.000-07:00
diff --git a/packages/core/platforms/ios/src/UIView+NativeScript.m b/packages/core/platforms/ios/src/UIView+NativeScript.m
@@ -26,7 +26,8 @@ - (void)nativeScriptSetTextDecorationAndTransform:(NSString*)text textDecoration
     BOOL isTextView = [self isKindOfClass:[UITextView class]];
     if (lineHeight > 0) {
         NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
-        paragraphStyle.lineSpacing = lineHeight;
+        // Note: Avoid using lineSpacing as it will append the height as extra space
+        paragraphStyle.minimumLineHeight = lineHeight;
         // make sure a possible previously set text alignment setting is not lost when line height is specified
         if ([self isKindOfClass:[UIButton class]]) {
             paragraphStyle.alignment = ((UIButton*)self).titleLabel.textAlignment;
@@ -88,7 +89,8 @@ -(void)nativeScriptSetFormattedTextDecorationAndTransform:(NSDictionary*)details
     BOOL isLabel = [self isKindOfClass:[UILabel class]];
     if (lineHeight > 0) {
         NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
-        paragraphStyle.lineSpacing = lineHeight;
+        // Note: Avoid using lineSpacing as it will append the height as extra space
+        paragraphStyle.minimumLineHeight = lineHeight;
         // make sure a possible previously set text alignment setting is not lost when line height is specified
         if ([self isKindOfClass:[UIButton class]]) {
             paragraphStyle.alignment = ((UIButton*)self).titleLabel.textAlignment;
diff --git a/packages/core/ui/styling/style-properties.d.ts b/packages/core/ui/styling/style-properties.d.ts
@@ -77,7 +77,6 @@ export const minWidthProperty: CssProperty<Style, CoreTypes.dip | CoreTypes.Leng
 export const minHeightProperty: CssProperty<Style, CoreTypes.dip | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit>;
 export const widthProperty: CssAnimationProperty<Style, CoreTypes.PercentLengthType>;
 export const heightProperty: CssAnimationProperty<Style, CoreTypes.PercentLengthType>;
-export const lineHeightProperty: CssProperty<Style, number>;
 export const marginProperty: ShorthandProperty<Style, string | CoreTypes.PercentLengthType>;
 export const marginLeftProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
 export const marginRightProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
@@ -374,10 +374,20 @@ export class TextBase extends TextBaseCommon {
 	}
 
 	[lineHeightProperty.getDefault](): number {
-		return this.nativeTextViewProtected.getLineSpacingExtra() / layout.getDisplayDensity();
+		return this.nativeTextViewProtected.getLineHeight() / layout.getDisplayDensity();
 	}
 	[lineHeightProperty.setNative](value: number) {
-		this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity(), 1);
+		const dpValue = value * layout.getDisplayDensity();
+
+		if (SDK_VERSION >= 28) {
+			this.nativeTextViewProtected.setLineHeight(dpValue);
+		} else {
+			const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
+			// Actual line spacing is the diff of line height and font height
+			const lineSpacing = Math.max(dpValue - fontHeight, 0);
+
+			this.nativeTextViewProtected.setLineSpacing(lineSpacing, 1);
+		}
 	}
 
 	[fontInternalProperty.getDefault](): android.graphics.Typeface {
