NativeScript TextView :textTransform can't update

Question

I`m using NativeScript with Vue.js. I have some text in TextView and I'm trying to change that text from "none" to "uppercase" by using textTransform property. Here is my sample code and here is from the ns playground

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout>
                <TextView editable="false" :fontSize="textFontSize"
                    :textTransform="upperCaseText">
                    <FormattedString>
                        <Span text="This is a text view that uses attributed text. You can use text attributes such as " />
                    </FormattedString>
                </TextView>
                <Button text="Make uppercase" @tap="toUpperCase" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>
<script>
    export default {
        data() {
            return {
                upperCaseText: "none",
                textFontSize: 20
            };
        },
        methods: {
            toUpperCase() {
                this.upperCaseText = "uppercase";
                this.textFontSize = 67;
            }
        }
    };
</script>

When I click the Make uppercase button, property upperCaseText is changed from "none" to "uppercase", but that change is not registered by TextView and the presented text is unchanged.

I'd tried to change the upperCaseText property from ns "dom", tried somehow to trigger event on TextView and to "tell" that something had changed, but without success.

Interesting here is that when i try to change the fontSize of the text. There is no problem, fontSize is visibly changed, but textTransform is not.

Why this happend? Why there isn't problem with fontSize, but with textTransform doesn't work? And how to make it work?

Manoj Manoj · Accepted Answer · 2019-06-09T17:08:46

Due to limitations on Android, updating text transform property will not have any effect on text that's already set on TextField / TextView. More info can be found in the related Github issue.

TextField & TextView (Android)

Setting text-transform property on these controls will not change the text inside them. In case you want to transform the text you should do it before setting it to text property.

I'm not sure why you have made the TextView read only (editable="false"), if you do not want a editable TextView then you could simply use a Label which should support updating text transform dynamically.

NativeScript TextView :textTransform can't update

1 Answers