Label inside TabStripItem is displayed with capital letters on IOS devices

Question

I have a strange issue, I'm using a TabStrip in Nativecsript :

 <Tabs selectedIndex="0">
            <TabStrip>
                <TabStripItem (tap)="itemTap(0)" >
                    <Label class="{{selectedItem === 0 ? 'tab-active': 'tab-inactive'}}" 
                        text="test1"></Label>
                </TabStripItem>
                <TabStripItem class="special" (tap)="itemTap(1)" >
                    <Label class="{{selectedItem === 1 ? 'tab-active': 'tab-inactive'}}" 
                        text="test2"></Label>
                </TabStripItem>
                <TabStripItem class="special" (tap)="itemTap(2)" >
                    <Label class="{{selectedItem === 2 ? 'tab-active': 'tab-inactive'}}" 
                        text="test3"></Label>
                </TabStripItem>
            </TabStrip>

I tried adding css text-transform: capitalize option for the label, it works on Android but not on IOS , Example : Android : Test1. Test2. Test3 IOS: TEST1. TEST2. TEST3

Any suggestions?

Answer 1

After many hours of searching, I found that text-transform="capitalize" is not supported by Nativescript, the only way to do so is to add textTransform="none" to the TabStrip.