There seems to be a bug in {N} iOS when setting the ForegroundColor of a span in a label’s formattedText property. It occurs when there is already a text color set by a CSS class applied to the label.

The example code below should illustrate the problem. If you’re wondering why I’m creating the UI widgets programmatically, it’s because the code below is a simplified extract from a real {N} application where I need to build the UI dynamically. : -)

If you run the code on the Android companion app, each line in the StackLayout is correctly coloured (Red Blue Red). If you run the same app on the iOS companion app, all of the text is red (ie. the span ForegroundColor assignment is ignored).

If you comment out the CSS rule for the label (so that no text color is defined for the label), the span ForegroundColor assignment is honoured and the word Blue correctly appears in blue.

APP.CSS

.gridItem {
color:#ff0000;
}

MAIN-PAGE.XML

var labels = require("ui/label");
var formattedStrings = require("text/formatted-string");
var spans = require("text/span");
var gridLayouts = require("ui/layouts/grid-layout");
var colors = require("color");

function pageLoaded(args) {
}
exports.pageLoaded = pageLoaded;

function pageNavigatedTo(args) {
var page = args.object;
var container = page.getViewById("container");

for (var i = 0; i < 50; i++) {
    var glTrain = new gridLayouts.GridLayout();
    glTrain.addColumn(new gridLayouts.ItemSpec(1, gridLayouts.GridUnitType.star));
    glTrain.addRow(new gridLayouts.ItemSpec(30, gridLayouts.GridUnitType.pixel));

    var labelRoute = new labels.Label();
    labelRoute.textWrap = true;
    labelRoute.cssClass = "gridItem";

    var blue = new colors.Color("#0096FF");
    var fs = new formattedStrings.FormattedString();

    var s1 = new spans.Span();
    s1.text = "Red ";
    fs.spans.push(s1);

    var s2 = new spans.Span();
    s2.text = " Blue ";
    s2.foregroundColor = blue;
    fs.spans.push(s2);

    var s3 = new spans.Span();
    s3.text = " Red";
    fs.spans.push(s3);

    labelRoute.formattedText = fs;
    glTrain.addChild(labelRoute);       
    gridLayouts.GridLayout.setColumn(labelRoute, 0);

    container.addChild(glTrain);
}       

}
exports.pageNavigatedTo = pageNavigatedTo;

Regards, Ian