fix(core): corrected background color between Label and nested spans (NativeScript#10701)

Author: CatchABus

packages/core/ui/text-base/index.android.ts

@@ -624,8 +624,10 @@ function setSpanModifiers(ssb: android.text.SpannableStringBuilder, span: Span,
 		ssb.setSpan(new android.text.style.ForegroundColorSpan(color.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 	}
 
-	if (spanStyle.backgroundColor) {
-		ssb.setSpan(new android.text.style.BackgroundColorSpan(spanStyle.backgroundColor.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+	// Use span or formatted string color
+	const backgroundColor = spanStyle.backgroundColor || span.parent.backgroundColor;
+	if (backgroundColor) {
+		ssb.setSpan(new android.text.style.BackgroundColorSpan(backgroundColor.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 	}
 
 	const textDecoration: CoreTypes.TextDecorationType = getClosestPropertyValue(textDecorationProperty, span);

packages/core/ui/text-base/index.ios.ts

@@ -394,8 +394,9 @@ export class TextBase extends TextBaseCommon {
 		const fontScale = adjustMinMaxFontScale(span.style.fontScaleInternal, span);
 		const font = new Font(span.style.fontFamily, span.style.fontSize, span.style.fontStyle, span.style.fontWeight, fontScale, span.style.fontVariationSettings);
 		const iosFont = font.getUIFont(this.nativeTextViewProtected.font);
+		// Use span or formatted string color
+		const backgroundColor = span.style.backgroundColor || span.parent.backgroundColor;
 
-		const backgroundColor = <Color>(span.style.backgroundColor || (<FormattedString>span.parent).backgroundColor || (<TextBase>span.parent.parent).backgroundColor);
 		return {
 			text,
 			iosFont,

packages/core/ui/text-base/span.d.ts

@@ -2,13 +2,23 @@
 import { ViewBase } from '../core/view-base';
 import { FontStyleType, FontVariationSettingsType, FontWeightType } from '../styling/font';
 import { CoreTypes } from '../../core-types';
+import { FormattedString } from './formatted-string';
 
 /**
  * A class used to create a single part of formatted string with a common text properties.
  *
  * @nsView Span
  */
 export class Span extends ViewBase {
+	/**
+	 * String value used when hooking to linkTap event.
+	 *
+	 * @nsEvent linkTap
+	 */
+	public static linkTapEvent: string;
+
+	declare parent: FormattedString;
+
 	/**
 	 * Gets or sets the font family of the span.
 	 *
@@ -92,12 +102,6 @@ export class Span extends ViewBase {
 	 *  @nsProperty
 	 */
 	public text: string;
-	/**
-	 * String value used when hooking to linkTap event.
-	 *
-	 * @nsEvent linkTap
-	 */
-	public static linkTapEvent: string;
 
 	/**
 	 * Gets if the span is tappable or not.

packages/core/ui/text-base/span.ts

@@ -5,12 +5,16 @@ import { FontStyleType, FontVariationSettingsType, FontWeightType } from '../sty
 import { CoreTypes } from '../../core-types';
 import { EventData } from '../../data/observable';
 import { isNullOrUndefined, isString } from '../../utils/types';
+import type { FormattedString } from './formatted-string';
 
 export class Span extends ViewBase implements SpanDefinition {
-	static linkTapEvent = 'linkTap';
+	public static linkTapEvent = 'linkTap';
+
 	private _text: string;
 	private _tappable = false;
 
+	declare parent: FormattedString;
+
 	get fontFamily(): string {
 		return this.style.fontFamily;
 	}