fix(tabs): text transform fix for android and textTransform support for iOS

Author: farfromrefug

src/core/tab-navigation-base/tab-navigation/index-common.ts

@@ -1,9 +1,10 @@
 import { cssProperty } from '../../';
 // Types
-import { CSSType, Color, Property, booleanConverter } from '@nativescript/core';
+import { CSSType, Color, CoreTypes, Property, booleanConverter } from '@nativescript/core';
 import { TabNavigationBase as TabNavigationBaseBase } from '../tab-navigation-base';
 
 import { TabNavigation as TabsDefinition } from '.';
+import { TabStripItem } from '../tab-strip-item';
 
 export const traceCategory = 'TabView';
 
@@ -23,6 +24,25 @@ export class TabNavigationBase extends TabNavigationBaseBase implements TabsDefi
     // public iOSTabBarItemsAlignment: IOSTabBarItemsAlignment;
     public animationEnabled: boolean;
     @cssProperty rippleColor: Color;
+    protected mTextTransform: CoreTypes.TextTransformType = 'none';
+
+    protected getItemLabelTextTransform(tabStripItem: TabStripItem): CoreTypes.TextTransformType {
+        const nestedLabel = tabStripItem.label;
+        let textTransform: CoreTypes.TextTransformType = null;
+        if (nestedLabel && nestedLabel.style.textTransform !== 'initial') {
+            textTransform = nestedLabel.style.textTransform;
+        } else if (tabStripItem.style.textTransform !== 'initial') {
+            textTransform = tabStripItem.style.textTransform;
+        }
+
+        return textTransform || this.mTextTransform;
+    }
+    public getTabBarTextTransform(): CoreTypes.TextTransformType {
+        return this.mTextTransform;
+    }
+    public getTabBarItemTextTransform(tabStripItem: TabStripItem): CoreTypes.TextTransformType {
+        return this.getItemLabelTextTransform(tabStripItem);
+    }
 }
 
 export const swipeEnabledProperty = new Property<TabNavigationBase, boolean>({

src/core/tab-navigation-base/tab-navigation/index.android.ts

@@ -407,7 +407,7 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
     protected mAndroidViewId = -1;
     // value from N core!!!
     public _originalBackground: any;
-    protected mTextTransform: CoreTypes.TextTransformType = 'uppercase';
+    protected mTextTransform: CoreTypes.TextTransformType = 'none';
     protected mSelectedItemColor: Color;
     protected mUnSelectedItemColor: Color;
     fragments: androidx.fragment.app.Fragment[] = [];
@@ -782,18 +782,6 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
         });
     }
 
-    private getItemLabelTextTransform(tabStripItem: TabStripItem): CoreTypes.TextTransformType {
-        const nestedLabel = tabStripItem.label;
-        let textTransform: CoreTypes.TextTransformType = null;
-        if (nestedLabel && nestedLabel.style.textTransform !== 'initial') {
-            textTransform = nestedLabel.style.textTransform;
-        } else if (tabStripItem.style.textTransform !== 'initial') {
-            textTransform = tabStripItem.style.textTransform;
-        }
-
-        return textTransform || this.mTextTransform;
-    }
-
     protected createTabItemSpec(tabStripItem: TabStripItem): com.nativescript.material.core.TabItemSpec {
         const tabItemSpec = new com.nativescript.material.core.TabItemSpec();
 
@@ -1047,20 +1035,12 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
         tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface());
     }
 
-    public getTabBarItemTextTransform(tabStripItem: TabStripItem): CoreTypes.TextTransformType {
-        return this.getItemLabelTextTransform(tabStripItem);
-    }
-
     public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: CoreTypes.TextTransformType): void {
         const nestedLabel = tabStripItem.label;
         const title = getTransformedText(nestedLabel.text, value);
         tabStripItem.nativeViewProtected.setText(title);
     }
 
-    public getTabBarTextTransform(): CoreTypes.TextTransformType {
-        return this.mTextTransform;
-    }
-
     public setTabBarTextTransform(value: CoreTypes.TextTransformType): void {
         const items = this.tabStrip && this.tabStrip.items;
         if (items) {

src/core/tab-navigation-base/tab-navigation/index.ios.ts

@@ -1,4 +1,4 @@
-import { Color, Device, Font, Frame, IOSHelper, ImageSource, Property, Utils, View, ViewBase, booleanConverter } from '@nativescript/core';
+import { Color, CoreTypes, Device, Font, Frame, IOSHelper, ImageSource, Property, Utils, View, ViewBase, booleanConverter, getTransformedText } from '@nativescript/core';
 import { TabContentItem } from '../tab-content-item';
 import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '../tab-navigation-base';
 import { TabStrip } from '../tab-strip';
@@ -623,6 +623,9 @@ export abstract class TabNavigation<
             }
 
             if (!this.tabStrip._hasTitle) {
+                // TEXT-TRANSFORM
+                const textTransform = this.getItemLabelTextTransform(item);
+                title = getTransformedText(title, textTransform);
                 this.tabStrip._hasTitle = !!title;
             }
         }
@@ -737,7 +740,32 @@ export abstract class TabNavigation<
         if (!nativeView) {
             return;
         }
-        nativeView.title = value;
+        const textTransform = this.getItemLabelTextTransform(tabStripItem);
+        nativeView.title = getTransformedText(value, textTransform);
+    }
+
+    public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: CoreTypes.TextTransformType): void {
+        const nativeView = tabStripItem.nativeView;
+        if (!nativeView) {
+            return;
+        }
+        const nestedLabel = tabStripItem.label;
+        const title = getTransformedText(nestedLabel.text, value);
+        nativeView.title = title;
+    }
+
+    public setTabBarTextTransform(value: CoreTypes.TextTransformType): void {
+        const items = this.tabStrip && this.tabStrip.items;
+        if (items) {
+            items.forEach((tabStripItem) => {
+                if (tabStripItem.label && tabStripItem.nativeViewProtected) {
+                    const nestedLabel = tabStripItem.label;
+                    const title = getTransformedText(nestedLabel.text, value);
+                    tabStripItem.nativeViewProtected.title = title;
+                }
+            });
+        }
+        this.mTextTransform = value;
     }
 
     private equalUIColor(first: UIColor, second: UIColor): boolean {