feat(ios): add icon rendering mode for bottom navigation (#7738)

e2e/ui-tests-app/app/bottom-navigation/binding-page.xml

@@ -11,7 +11,7 @@
     </StackLayout>
         <GridLayout row="1">
             <BottomNavigation automationText="tabNavigation"  loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
-                <TabStrip items="{{ tabStripItems }}">
+                <TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
                 </TabStrip>
             </BottomNavigation> 
         </GridLayout>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml

@@ -3,23 +3,8 @@
   <ActionBar title="BottomNavigation" icon="" class="action-bar">
   </ActionBar>
 
-  <!-- w/o TabStrip -->
-  <!-- <BottomNavigation>
-      <TabContentItem>
-        <GridLayout>
-          <Label text="First View"/>
-        </GridLayout>
-      </TabContentItem>
-      <TabContentItem>
-        <GridLayout>
-          <Label text="Second View"/>
-        </GridLayout>
-      </TabContentItem>
-  </BottomNavigation> -->
-
-  <!-- w/ TabStrip -->
   <BottomNavigation id="bottomNav"  automationText="tabNavigation" >
-    <TabStrip>
+    <TabStrip iosIconRenderingMode="alwaysOriginal">
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
         <!-- <Image src="res://icon" /> -->
@@ -71,26 +56,4 @@
       </StackLayout>
     </TabContentItem>
   </BottomNavigation>
-
-  <!-- =============================================================================================== -->
-
-  <!-- Bottom Bar with TabStrip -->
-  <!-- <BottomNavigationBar>
-    <TabStrip>
-      <TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
-      <TabStripItem>
-        <Image src="res://icon" />
-        <Label text="Second Tab" />
-      </TabStripItem>
-    </TabStrip>
-  </BottomNavigationBar> -->
-
-  <!-- Bottom Bar w/o TabStrip -->
-  <!-- <BottomNavigationBar>
-    <TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
-    <TabStripItem>
-      <Image src="res://icon" />
-      <Label text="Second Tab" />
-    </TabStripItem>
-  </BottomNavigationBar> -->
 </Page>

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml

@@ -2,7 +2,7 @@
   <ActionBar title="BottomNavigation" icon="" class="action-bar">
   </ActionBar>
   <BottomNavigation id="bottomNavigation" automationText="tabNavigation"  class="font-awesome">
-    <TabStrip>
+    <TabStrip iosIconRenderingMode="alwaysOriginal">
       <TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
       <TabStripItem iconSource="font://&#xf206;" title="icon">
       </TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml

@@ -3,7 +3,7 @@
     </ActionBar>
 
     <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation"  >
-        <TabStrip>
+        <TabStrip iosIconRenderingMode="alwaysOriginal">
             <TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
             <TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
         </TabStrip>

tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts

@@ -531,7 +531,15 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     private getIconRenderingMode(): UIImageRenderingMode {
+        switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
+            case "alwaysOriginal":
                 return UIImageRenderingMode.AlwaysOriginal;
+            case "alwaysTemplate":
+                return UIImageRenderingMode.AlwaysTemplate;
+            case "automatic":
+            default:
+                return UIImageRenderingMode.Automatic;
+        }
     }
 
     private getIcon(tabStripItem: TabStripItem): UIImage {
@@ -547,10 +555,12 @@ export class BottomNavigation extends TabNavigationBase {
         const color = target.style.color;
         const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
 
+        let isFontIcon = false;
         let image: UIImage = this._iconsCache[iconTag];
         if (!image) {
             let is = new ImageSource;
             if (isFontIconURI(iconSource)) {
+                isFontIcon = true;
                 const fontIconCode = iconSource.split("//")[1];
                 is = fromFontIconCode(fontIconCode, font, color);
             } else {
@@ -564,7 +574,11 @@ export class BottomNavigation extends TabNavigationBase {
                     image = this.getFixedSizeIcon(image);
                 }
 
-                const originalRenderedImage = image.imageWithRenderingMode(this.getIconRenderingMode());
+                let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal;
+                if (!isFontIcon) {
+                    renderingMode = this.getIconRenderingMode();
+                }
+                const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
                 this._iconsCache[iconTag] = originalRenderedImage;
                 image = originalRenderedImage;
             } else {

tns-core-modules/ui/tabs/tabs.ios.ts

@@ -885,6 +885,7 @@ export class Tabs extends TabsBase {
     }
 
     private getIconRenderingMode(): UIImageRenderingMode {
+        // MDCTabBar doesn't work with rendering mode AlwaysTemplate
         return UIImageRenderingMode.AlwaysOriginal;
     }