CSS rules like text-transform: uppercase seem to get applied just once, when the component is initialized. Changing the text later on:

exports.onTap = function(args) {
    var label = args.view;
    label.text = "new text";
}

Will not display the text in upper case.

I ran a quick experiment for a possible fix in text-base.android by adding a line to _onTextPropertyChanged:

utils.ad.setTextTransform(this, this.style.textTransform)

And that seems to fix the problem for Android labels. It seems the correct location to apply any text transformation is right before we transfer the text value to the native view.

Other possible areas we need to check:

1. The iOS implementation is different, and sets textTransform together with other dependent properties like textDecoration and lineSpacing
2. We probably need to do this for Button's too (not inheriting from TextBase).
3. Are there any other text-related style properties that affect text display and require that we transform the string value? We should take them all into account.

Which platform(s) does your issue occur on?

iOS/Android/Angular

Please provide the following version numbers that your issue occurs with:

• CLI: 1.7.1
• Cross-platform modules: 1.7.1
• Runtime(s): tns-android@1.7.1

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

Start with a "Hello world" project, set CSS for Label { text-transform: uppercase; }, and add a tap event handler to a label that changes the label text.

/cc @enchev