Issue with setting up Span's color property

[tsonevn]

From @tsonevn on June 20, 2017 13:40

The Span color will not be applied to the text for iOS. For example:

<Label class="h3 p-15 m-15 text-left">
        <FormattedString>
            <Span text="Words " color="#006600" ></Span>
            <Span text="with " color="#990000" fontAttributes="Bold"></Span>
            <Span text="different " color="#ffcc00"></Span>
            <Span text="color."></Span>
        </FormattedString>
    </Label>

Copied from original issue: NativeScript/NativeScript#4430

[tsonevn]

From @Jaishankarb on July 5, 2017 7:54

any updates on this issue?

[tsonevn]

This is still a valid issue for NativeScirpt Angular 2 project.
Archive.zip

[connorsleight]

Any updates here? been a month

[StevenLJackson1]

I was about to create a new issue for this in the SideKick project, but then realized that this is not a SideKick issue. I'll add that I am observing the same behavior and I have pasted in the issue report I started to create below so that you have some additional information to work from:

Did you verify whether this issue has already been reported here?

Yes

Tell us about the problem.

In NativeScript 2.5.3 we used the following construct on a page, and it worked as expected:

<Label class="disclaimer" textWrap="true" textAlignment="left">
    <FormattedString>
        <Span [text]="model.bottomText1"></Span>
        <Span [text]="model.bottomText2" fontAttributes="bold"></Span>
        <Span [text]="model.bottomText3"></Span>
    </FormattedString>
</Label>

Once I converted the project over to {N} 3.3.0 the FormattedString functionality stopped working.

What I see in the debugger is that the <Label> element has a text attribute which has the concatenated contents of the three parts of my string (model.bottomText1, model.bottomText2, model.bottomText3), and it also contains a child <FormattedString> element, complete with the three <Span> elements beneath it, but each <Span> is empty, like so:

        <Label class="disclaimer" textWrap="true" textAlignment="left" text="By clicking the Continue button, I accept and agree to the Terms of Use and acknowledge that I have received the Privacy Policy.">
            <FormattedString>
                <Span [text]="model.bottomText1"></Span>
                <Span [text]="model.bottomText2" fontAttributes="bold"></Span>
                <Span [text]="model.bottomText3"></Span>
            </FormattedString>
        </Label>

The word Continue should be in bold, but it is not.

Which platform(s) does the issue occur on?

I noticed this on the Android version of the platform, initially on version 3.3.0, but I updated to android platform@next, which put me at version 3.4.0-2017-10-31-1.

I have not tested on iOS, yet.

Development machine runs Windows 7 Enterprise, sp1, 64-bit

Provide the following version numbers that the issue occurs with:

tns version 3.3.0
android platform 3.4.0-2017-10-31-1

Tell us how to recreate the issue in as much detail as possible.

1. Start the application
2. View the with child

Does this issue happen every time?

Yes

[jogboms]

This is somehow still open until v5.x. It really is a valid issue.