NativeScript · CatchABus · Nov 8, 2024 · Nov 18, 2024 · Nov 20, 2024 · Jan 2, 2025
diff --git a/packages/core/platforms/ios/src/UIView+NativeScript.m b/packages/core/platforms/ios/src/UIView+NativeScript.m
@@ -15,23 +15,45 @@ - (void)nativeScriptSetTextDecorationAndTransform:(NSString*)text textDecoration
     }
     BOOL isTextType = [self isKindOfClass:[UITextField class]] || [self isKindOfClass:[UITextView class]] | [self isKindOfClass:[UILabel class]] | [self isKindOfClass:[UIButton class]];
 
-    if (letterSpacing != 0 && isTextType && ((UITextView*)self).font != nil) {
-        NSNumber *kern = [NSNumber numberWithDouble:letterSpacing * ((UITextView*)self).font.pointSize];
-        attrDict[NSKernAttributeName] = kern;
-        if ([self isKindOfClass:[UITextField class]]) {
-            [((UITextField*)self).defaultTextAttributes setValue:kern forKey:NSKernAttributeName];
+    if (letterSpacing != 0 && isTextType) {
+        NSNumber *kern = nil;
+
+        if ([self isKindOfClass:[UIButton class]]) {
+            if (((UIButton*)self).titleLabel.font != nil) {
+                kern = [NSNumber numberWithDouble:letterSpacing * ((UIButton*)self).titleLabel.font.pointSize];
+            }
+        } else {
+            if (((UITextView*)self).font != nil) {
+                kern = [NSNumber numberWithDouble:letterSpacing * ((UITextView*)self).font.pointSize];
+            }
+        }
+
+        if (kern != nil) {
+            attrDict[NSKernAttributeName] = kern;
+            if ([self isKindOfClass:[UITextField class]]) {
+                [((UITextField*)self).defaultTextAttributes setValue:kern forKey:NSKernAttributeName];
+            }
         }
     }
 
     BOOL isTextView = [self isKindOfClass:[UITextView class]];
-    if (lineHeight > 0) {
+    // TODO: Find a good alternative of lineSpacing that works well with layout as it doesn't accept values less than the standard height
+    if (lineHeight >= 0) {
         NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
-        paragraphStyle.lineSpacing = 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;
+
+            if (((UIButton*)self).titleLabel.font != nil) {
+                paragraphStyle.lineSpacing = fmax(lineHeight - ((UIButton*)self).titleLabel.font.lineHeight, 0);
+            }
         } else {
             paragraphStyle.alignment = ((UILabel*)self).textAlignment;
+
+            if (((UILabel*)self).font != nil) {
+                paragraphStyle.lineSpacing = fmax(lineHeight - ((UILabel*)self).font.lineHeight, 0);
+            }
         }
 
         if ([self isKindOfClass:[UILabel class]]) {
@@ -78,23 +100,39 @@ - (void)nativeScriptSetTextDecorationAndTransform:(NSString*)text textDecoration
 -(void)nativeScriptSetFormattedTextDecorationAndTransform:(NSDictionary*)details letterSpacing:(CGFloat)letterSpacing lineHeight:(CGFloat)lineHeight {
     NSMutableAttributedString *attrText = [NativeScriptUtils createMutableStringWithDetails:details];
     if (letterSpacing != 0) {
-        NSNumber *kern = [NSNumber numberWithDouble:letterSpacing * ((UITextView*)self).font.pointSize];
+        NSNumber *kern = nil;
+
+        if ([self isKindOfClass:[UIButton class]]) {
+            kern = [NSNumber numberWithDouble:letterSpacing * ((UIButton*)self).titleLabel.font.pointSize];
+        } else {
+            kern = [NSNumber numberWithDouble:letterSpacing * ((UITextView*)self).font.pointSize];
+        }
+
         [attrText addAttribute:NSKernAttributeName value:kern range:(NSRange){
             0,
             attrText.length
         } ];
     }
 
     BOOL isLabel = [self isKindOfClass:[UILabel class]];
-    if (lineHeight > 0) {
+    // TODO: Find a good alternative of lineSpacing that works well with layout as it doesn't accept values less than the standard height
+    if (lineHeight >= 0) {
         NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
-        paragraphStyle.lineSpacing = 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;
+
+            if (((UIButton*)self).titleLabel.font != nil) {
+                paragraphStyle.lineSpacing = fmax(lineHeight - ((UIButton*)self).titleLabel.font.lineHeight, 0);
+            }
         } else {
             // Paragraph alignment is also important for tappable spans as NSTextContainer takes it into account
             paragraphStyle.alignment = ((UILabel*)self).textAlignment;
+
+            if (((UILabel*)self).font != nil) {
+                paragraphStyle.lineSpacing = fmax(lineHeight - ((UILabel*)self).font.lineHeight, 0);
+            }
         }
 
         if (isLabel) {

diff --git a/packages/core/ui/html-view/index.android.ts b/packages/core/ui/html-view/index.android.ts
@@ -1,4 +1,5 @@
 import { Color } from '../../color';
+import { layout } from '../../utils';
 import { SDK_VERSION } from '../../utils/constants';
 import { Font } from '../styling/font';
 import { colorProperty, fontSizeProperty, fontInternalProperty } from '../styling/style-properties';
@@ -86,14 +87,10 @@ export class HtmlView extends HtmlViewBase {
 		this.nativeViewProtected.setTypeface(font);
 	}
 
-	[fontSizeProperty.getDefault](): { nativeSize: number } {
-		return { nativeSize: this.nativeViewProtected.getTextSize() };
+	[fontSizeProperty.getDefault](): number {
+		return this.nativeViewProtected.getTextSize() / layout.getDisplayDensity();
 	}
-	[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (typeof value === 'number') {
-			this.nativeViewProtected.setTextSize(value);
-		} else {
-			this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-		}
+	[fontSizeProperty.setNative](value: number) {
+		this.nativeViewProtected.setTextSize(value);
 	}
 }
diff --git a/packages/core/ui/search-bar/index.android.ts b/packages/core/ui/search-bar/index.android.ts
@@ -1,7 +1,7 @@
 import { Font } from '../styling/font';
 import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty } from './search-bar-common';
 import { isUserInteractionEnabledProperty, isEnabledProperty } from '../core/view';
-import { ad } from '../../utils';
+import { ad, layout } from '../../utils';
 import { Color } from '../../color';
 import { colorProperty, backgroundColorProperty, backgroundInternalProperty, fontInternalProperty, fontSizeProperty } from '../styling/style-properties';
 
@@ -199,15 +199,11 @@ export class SearchBar extends SearchBarBase {
 		textView.setTextColor(color);
 	}
 
-	[fontSizeProperty.getDefault](): { nativeSize: number } {
-		return { nativeSize: this._getTextView().getTextSize() };
+	[fontSizeProperty.getDefault](): number {
+		return this._getTextView().getTextSize() / layout.getDisplayDensity();
 	}
-	[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (typeof value === 'number') {
-			this._getTextView().setTextSize(value);
-		} else {
-			this._getTextView().setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-		}
+	[fontSizeProperty.setNative](value: number) {
+		this._getTextView().setTextSize(value);
 	}
 
 	[fontInternalProperty.getDefault](): android.graphics.Typeface {

diff --git a/packages/core/ui/segmented-bar/index.android.ts b/packages/core/ui/segmented-bar/index.android.ts
@@ -140,15 +140,11 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
 		this.nativeViewProtected.setTextColor(color);
 	}
 
-	[fontSizeProperty.getDefault](): { nativeSize: number } {
-		return { nativeSize: this.nativeViewProtected.getTextSize() };
+	[fontSizeProperty.getDefault](): number {
+		return this.nativeViewProtected.getTextSize() / layout.getDisplayDensity();
 	}
-	[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (typeof value === 'number') {
-			this.nativeViewProtected.setTextSize(value);
-		} else {
-			this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-		}
+	[fontSizeProperty.setNative](value: number) {
+		this.nativeViewProtected.setTextSize(value);
 	}
 
 	[fontInternalProperty.getDefault](): android.graphics.Typeface {

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/styling/style/index.ts b/packages/core/ui/styling/style/index.ts
@@ -168,7 +168,7 @@ export class Style extends Observable implements StyleDefinition {
 	public visibility: CoreTypes.VisibilityType;
 
 	public letterSpacing: number;
-	public lineHeight: number;
+	public lineHeight: CoreTypes.PercentLengthType;
 	public textAlignment: CoreTypes.TextAlignmentType;
 	public textDecoration: CoreTypes.TextDecorationType;
 	public textTransform: CoreTypes.TextTransformType;

diff --git a/packages/core/ui/tab-view/index.android.ts b/packages/core/ui/tab-view/index.android.ts
@@ -392,15 +392,11 @@ export class TabViewItem extends TabViewItemBase {
 		return tabFragment.getChildFragmentManager();
 	}
 
-	[fontSizeProperty.getDefault](): { nativeSize: number } {
-		return { nativeSize: this.nativeViewProtected.getTextSize() };
+	[fontSizeProperty.getDefault](): number {
+		return this.nativeViewProtected.getTextSize() / layout.getDisplayDensity();
 	}
-	[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (typeof value === 'number') {
-			this.nativeViewProtected.setTextSize(value);
-		} else {
-			this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-		}
+	[fontSizeProperty.setNative](value: number) {
+		this.nativeViewProtected.setTextSize(value);
 	}
 
 	[fontInternalProperty.getDefault](): android.graphics.Typeface {
@@ -494,7 +490,7 @@ export class TabView extends TabViewBase {
 				JSON.stringify([
 					{ value: 1, type: 0 /* org.nativescript.widgets.GridUnitType.auto */ },
 					{ value: 1, type: 2 /* org.nativescript.widgets.GridUnitType.star */ },
-				])
+				]),
 			);
 			viewPager.setLayoutParams(lp);
 
@@ -506,7 +502,7 @@ export class TabView extends TabViewBase {
 				JSON.stringify([
 					{ value: 1, type: 2 /* org.nativescript.widgets.GridUnitType.star */ },
 					{ value: 1, type: 0 /* org.nativescript.widgets.GridUnitType.auto */ },
-				])
+				]),
 			);
 			tabLayout.setLayoutParams(lp);
 			viewPager.setSwipePageEnabled(false);
@@ -771,12 +767,8 @@ export class TabView extends TabViewBase {
 	[tabTextFontSizeProperty.getDefault](): number {
 		return this._tabLayout.getTabTextFontSize();
 	}
-	[tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (typeof value === 'number') {
-			this._tabLayout.setTabTextFontSize(value);
-		} else {
-			this._tabLayout.setTabTextFontSize(value.nativeSize);
-		}
+	[tabTextFontSizeProperty.setNative](value: number) {
+		this._tabLayout.setTabTextFontSize(value);
 	}
 
 	[tabTextColorProperty.getDefault](): number {

diff --git a/packages/core/ui/tab-view/index.ios.ts b/packages/core/ui/tab-view/index.ios.ts
@@ -580,7 +580,7 @@ export class TabView extends TabViewBase {
 	[tabTextFontSizeProperty.getDefault](): number {
 		return null;
 	}
-	[tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
+	[tabTextFontSizeProperty.setNative](value: number) {
 		this._updateIOSTabBarColorsAndFonts();
 	}
 

diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
@@ -4,10 +4,9 @@ import { ShadowCSSValues } from '../styling/css-shadow';
 
 // Requires
 import { Font } from '../styling/font';
-import { backgroundColorProperty } from '../styling/style-properties';
 import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, textStrokeProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, isBold, resetSymbol } from './text-base-common';
 import { Color } from '../../color';
-import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties';
+import { backgroundColorProperty, colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties';
 import { StrokeCSSValues } from '../styling/css-stroke';
 import { FormattedString } from './formatted-string';
 import { Span } from './span';
@@ -360,24 +359,49 @@ export class TextBase extends TextBaseCommon {
 		}
 	}
 
-	[fontSizeProperty.getDefault](): { nativeSize: number } {
-		return { nativeSize: this.nativeTextViewProtected.getTextSize() };
+	[fontSizeProperty.getDefault](): number {
+		return this.nativeTextViewProtected.getTextSize() / layout.getDisplayDensity();
 	}
-	[fontSizeProperty.setNative](value: number | { nativeSize: number }) {
-		if (!this.formattedText || typeof value !== 'number') {
-			if (typeof value === 'number') {
-				this.nativeTextViewProtected.setTextSize(value);
-			} else {
-				this.nativeTextViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
-			}
+	[fontSizeProperty.setNative](value: number) {
+		if (!this.formattedText) {
+			this.nativeTextViewProtected.setTextSize(value);
 		}
 	}
 
-	[lineHeightProperty.getDefault](): number {
-		return this.nativeTextViewProtected.getLineSpacingExtra() / layout.getDisplayDensity();
+	[lineHeightProperty.getDefault](): CoreTypes.PercentLengthType {
+		return { value: this.nativeTextViewProtected.getLineHeight(), unit: 'px' };
 	}
-	[lineHeightProperty.setNative](value: number) {
-		this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity(), 1);
+	[lineHeightProperty.setNative](value: CoreTypes.PercentLengthType) {
+		const lengthType = value;
+
+		if (lengthType == null || typeof lengthType === 'string') {
+			// Method setLineHeight calls this one internally so it's enough to do the cleanup
+			this.nativeTextViewProtected.setLineSpacing(0, 1);
+		} else {
+			let finalValue: number;
+
+			if (typeof lengthType === 'number') {
+				finalValue = Length.toDevicePixels(lengthType, -1);
+			} else if (lengthType.unit === '%') {
+				const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
+				finalValue = lengthType.value * fontHeight;
+			} else {
+				finalValue = Length.toDevicePixels(lengthType, -1);
+			}
+
+			// Method setLineHeight throws in case of a negative value
+			finalValue = Math.max(finalValue, 0);
+
+			if (SDK_VERSION >= 28) {
+				this.nativeTextViewProtected.setLineHeight(finalValue);
+			} else {
+				const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
+				// Actual line spacing is the diff of line height and font height
+				const lineSpacing = finalValue - fontHeight;
+
+				this.nativeTextViewProtected.setLineSpacing(lineSpacing, 1);
+			}
+		}
 	}
 
 	[fontInternalProperty.getDefault](): android.graphics.Typeface {

diff --git a/packages/core/ui/text-base/index.d.ts b/packages/core/ui/text-base/index.d.ts
@@ -50,7 +50,7 @@ export class TextBase extends View implements AddChildFromBuilder {
 	 *
 	 * @nsProperty
 	 */
-	lineHeight: number;
+	lineHeight: CoreTypes.PercentLengthType;
 
 	/**
 	 * Gets or sets text-alignment style property.
@@ -200,7 +200,7 @@ export const textStrokeProperty: CssProperty<Style, StrokeCSSValues>;
 export const whiteSpaceProperty: CssProperty<Style, CoreTypes.WhiteSpaceType>;
 export const textOverflowProperty: CssProperty<Style, CoreTypes.TextOverflowType>;
 export const letterSpacingProperty: CssProperty<Style, number>;
-export const lineHeightProperty: CssProperty<Style, number>;
+export const lineHeightProperty: InheritedCssProperty<Style, CoreTypes.PercentLengthType>;
 
 //Used by tab view
 export function getTransformedText(text: string, textTransform: CoreTypes.TextTransformType): string;