feat(): local icon handling in actionbar and tabview (#7009)

apps/app/ui-tests-app/action-bar/icons.ts

@@ -0,0 +1,17 @@
+import * as frame from "tns-core-modules/ui/frame";
+import { EventData } from "tns-core-modules/ui/frame";
+import { Button } from "tns-core-modules/ui/button";
+import { ActionBar } from "tns-core-modules/ui/action-bar";
+
+const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}
+
+export function onChangeRenderingMode(args: EventData) {
+    const button = <Button>args.object;
+    const actionBar = <ActionBar>button.page.actionBar
+    actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
+    button.text = "" + actionBar.iosIconRenderingMode;
+}

apps/app/ui-tests-app/action-bar/icons.xml

@@ -0,0 +1,14 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar>
+      <ActionBar.actionItems>
+        <ActionItem icon="res://icon" tap="navigate"/>
+        <ActionItem icon="res://add_to_fav" tap="navigate"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+    <Button text="undefined" tap="onChangeRenderingMode"/>
+  </StackLayout>
+</Page>

apps/app/ui-tests-app/action-bar/local-icons.ts

@@ -0,0 +1,17 @@
+import * as frame from "tns-core-modules/ui/frame";
+import { EventData } from "tns-core-modules/ui/frame";
+import { Button } from "tns-core-modules/ui/button";
+import { ActionBar } from "tns-core-modules/ui/action-bar";
+
+const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}
+
+export function onChangeRenderingMode(args: EventData) {
+    const button = <Button>args.object;
+    const actionBar = <ActionBar>button.page.actionBar
+    actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
+    button.text = "" + actionBar.iosIconRenderingMode;
+}

apps/app/ui-tests-app/action-bar/local-icons.xml

@@ -0,0 +1,14 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar>
+      <ActionBar.actionItems>
+        <ActionItem icon="~/ui-tests-app/resources/images/icon.png" tap="navigate"/>
+        <ActionItem icon="~/ui-tests-app/resources/images/add_to_fav@3x.png" tap="navigate"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+    <Button text="undefined" tap="onChangeRenderingMode"/>
+  </StackLayout>
+</Page>

apps/app/ui-tests-app/action-bar/main-page.ts

@@ -15,6 +15,8 @@ export function loadExamples() {
     examples.set("actBG", "action-bar/background");
     examples.set("actStyle", "action-bar/all");
     examples.set("actIcons", "action-bar/system-icons");
+    examples.set("actLocalIcons", "action-bar/local-icons");
+    examples.set("actResIcons", "action-bar/icons");
     examples.set("actView", "action-bar/action-view");
     examples.set("actionItemPosition", "action-bar/action-item-position");
     examples.set("actBGCss", "action-bar/background-css");

apps/app/ui-tests-app/tab-view/main-page.ts

@@ -19,6 +19,7 @@ export function loadExamples() {
     examples.set("tabmore", "tab-view/tab-view-more");
     examples.set("tabViewCss", "tab-view/tab-view-css");
     examples.set("tab-view-icons", "tab-view/tab-view-icon");
+    examples.set("tab-view-icons-local", "tab-view/tab-view-icon-local");
     examples.set("tab-view-icon-change", "tab-view/tab-view-icon-change");
     examples.set("text-transform", "tab-view/text-transform");
     examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");

apps/app/ui-tests-app/tab-view/tab-view-icon-local.ts

@@ -0,0 +1,21 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button";
+import { TabView } from "tns-core-modules/ui/tab-view";
+
+let iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
+
+export const onNavigate = updateButtons;
+
+export function onChangeRenderingMode(args: EventData) {
+    let tabView = (<Button>args.object).page.getViewById<TabView>("tab-view");
+    tabView.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
+    updateButtons(args);
+}
+
+function updateButtons(args) {
+    let button = (<Button>args.object);
+    let tabView = button.page.getViewById<TabView>("tab-view");
+    for (let i = 0, length = tabView.items.length; i < length; i++) {
+        (<Button>tabView.items[i].view).text = "" + tabView.iosIconRenderingMode;
+    }
+}

apps/app/ui-tests-app/tab-view/tab-view-icon-local.xml

@@ -0,0 +1,26 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
+    <TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
+        <TabView.items>
+            <TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png" title="NativeScript">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png" title="Favorites">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+        </TabView.items>
+    </TabView>
+</Page>

tns-core-modules/ui/action-bar/action-bar-common.ts

@@ -29,6 +29,7 @@ export class ActionBarBase extends View implements ActionBarDefinition {
 
     public title: string;
     public flat: boolean;
+    public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
 
     get navigationButton(): NavigationButton {
         return this._navigationButton;
@@ -89,6 +90,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
         }
     }
     
+    get ios(): any {
+        return undefined;
+    }
+
     get android(): AndroidActionBarSettings {
         return undefined;
     }
@@ -346,6 +351,9 @@ export function traceMissingIcon(icon: string) {
         traceMessageType.error);
 }
 
+export const iosIconRenderingModeProperty = new Property<ActionBarBase, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "alwaysOriginal" });
+iosIconRenderingModeProperty.register(ActionBarBase);
+
 export const textProperty = new Property<ActionItemBase, string>({ name: "text", defaultValue: "", valueChanged: onItemChanged });
 textProperty.register(ActionItemBase);
 

tns-core-modules/ui/action-bar/action-bar.android.ts

@@ -437,7 +437,7 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re
 
         let is = fromFileOrResource(icon);
         if (is) {
-            drawable = new android.graphics.drawable.BitmapDrawable(is.android);
+            drawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android);
         }
 
         result = drawable;

tns-core-modules/ui/action-bar/action-bar.d.ts

@@ -41,6 +41,20 @@ export class ActionBar extends View {
      */
     android: AndroidActionBarSettings;
 
+    /**
+     * Gets the native iOS [UINavigationBar](https://developer.apple.com/documentation/uikit/uinavigationbar) that represents the user interface for this component. Valid only when running on iOS.
+     */
+    ios: any /* UITabBarController */;
+
+    /**
+     * Gets or set the UIImageRenderingMode of the action bar icons in iOS. Defaults to "alwaysOriginal" 
+     * Valid values are:
+     *  - automatic
+     *  - alwaysOriginal
+     *  - alwaysTemplate  
+     */
+    iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
+
     /**
      * Updates the action bar.
      */

tns-core-modules/ui/action-bar/action-bar.ios.ts

@@ -2,7 +2,7 @@ import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from ".";
 import { 
     ActionItemBase, ActionBarBase, isVisible, View, 
     colorProperty, backgroundColorProperty, 
-    backgroundInternalProperty, flatProperty, 
+    backgroundInternalProperty, flatProperty, iosIconRenderingModeProperty, 
     layout, Color, traceMissingIcon } from "./action-bar-common";
 import { fromFileOrResource } from "../../image-source";
 import { ios as iosUtils } from "../../utils/utils";
@@ -120,6 +120,18 @@ export class ActionBar extends ActionBarBase {
         this.layout(0, 0, width, height, false);
     }
 
+    private _getIconRenderingMode(): UIImageRenderingMode {
+        switch (this.iosIconRenderingMode) {
+            case "alwaysOriginal":
+                return UIImageRenderingMode.AlwaysOriginal;
+            case "alwaysTemplate":
+                return UIImageRenderingMode.AlwaysTemplate;
+            case "automatic":
+            default:
+                return UIImageRenderingMode.AlwaysOriginal;
+        }
+    }
+
     public update() {
         const page = this.page;
         // Page should be attached to frame to update the action bar.
@@ -241,7 +253,8 @@ export class ActionBar extends ActionBarBase {
             barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(id, tapHandler, "tap");
         } else if (item.icon) {
             const img = loadActionIconFromFileOrResource(item.icon);
-            barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img, UIBarButtonItemStyle.Plain, tapHandler, "tap");
+            const image = img.imageWithRenderingMode(this._getIconRenderingMode());
+            barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(image, UIBarButtonItemStyle.Plain, tapHandler, "tap");
         } else {
             barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.Plain, tapHandler, "tap");
         }
@@ -392,4 +405,11 @@ export class ActionBar extends ActionBarBase {
             this.updateFlatness(navBar);
         }
     }
+
+    [iosIconRenderingModeProperty.getDefault](): "automatic" | "alwaysOriginal" | "alwaysTemplate" {
+        return "alwaysOriginal";
+    }
+    [iosIconRenderingModeProperty.setNative](value: "automatic" | "alwaysOriginal" | "alwaysTemplate") {
+        this.update();
+    }
 }

tns-core-modules/ui/tab-view/tab-view.android.ts

@@ -12,6 +12,7 @@ import { textTransformProperty, TextTransform, getTransformedText } from "../tex
 import { fromFileOrResource } from "../../image-source";
 import { RESOURCE_PREFIX, ad } from "../../utils/utils";
 import { Frame } from "../frame";
+import * as application from "../../application";
 
 export * from "./tab-view-common";
 
@@ -242,7 +243,7 @@ function createTabItemSpec(item: TabViewItem): org.nativescript.widgets.TabItemS
             const is = fromFileOrResource(item.iconSource);
             if (is) {
                 // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
-                result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
+                result.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
             } else {
                 traceMissingIcon(item.iconSource);
             }

tns-core-modules/ui/tab-view/tab-view.d.ts

@@ -100,7 +100,7 @@ export class TabView extends View {
     ios: any /* UITabBarController */;
 
     /**
-     * Gets or set the UIImageRenderingMode of the tab icons in iOS. 
+     * Gets or set the UIImageRenderingMode of the tab icons in iOS.  Defaults to "automatic" 
      * Valid values are:
      *  - automatic
      *  - alwaysOriginal