From f52f381977cbe3da53cfa1d383a9f7d6bfc8a687 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Tue, 27 Aug 2019 17:51:23 +0300
Subject: [PATCH 1/2] feat(ios): add icon rendering mode for bottom navigation

---
 .../app/bottom-navigation/fancy-fonts-page.xml |  2 +-
 .../app/bottom-navigation/icon-change-page.xml |  2 +-
 .../bottom-navigation/bottom-navigation.ios.ts | 18 ++++++++++++++++--
 tns-core-modules/ui/tabs/tabs.ios.ts           |  1 +
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml b/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml
index 004de8346d..7b1657fb94 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml
+++ b/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>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
index 1305f2a062..23442767ff 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
+++ b/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>
diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
index 7ea8e43dd8..2d29661059 100644
--- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
+++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
@@ -531,7 +531,15 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     private getIconRenderingMode(): UIImageRenderingMode {
-        return UIImageRenderingMode.AlwaysOriginal;
+        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 {
diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts
index 4a664cb1a5..1b6cb35b18 100644
--- a/tns-core-modules/ui/tabs/tabs.ios.ts
+++ b/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;
     }
 

From 2b533260fc8e645226a768bd421161fa4430e699 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Wed, 28 Aug 2019 14:58:57 +0300
Subject: [PATCH 2/2] chore: fix ui tests

---
 .../app/bottom-navigation/binding-page.xml    |  2 +-
 .../bottom-navigation-page.xml                | 39 +------------------
 2 files changed, 2 insertions(+), 39 deletions(-)

diff --git a/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml b/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
index c13ec26c9e..20aa4a2da2 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
+++ b/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>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml b/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
index 66266e7014..00fe8dae7e 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
+++ b/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>
\ No newline at end of file