NativeScript · ADjenkov · Jul 10, 2019 · Jul 5, 2019 · Jul 5, 2019 · Jul 5, 2019
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -1,25 +1,28 @@
 import { EventData } from "tns-core-modules/data/observable";
-import { SubMainPageViewModel } from "../sub-main-page-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { Page } from "tns-core-modules/ui/page";
 
+import { SubMainPageViewModel } from "../sub-main-page-view-model";
+
 export function pageLoaded(args: EventData) {
     const page = <Page>args.object;
     const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
     page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
 }
 
 export function loadExamples() {
-    const examples = new Map<string, string>();    
+    const examples = new Map<string, string>();
     examples.set("tabs", "tabs/tabs-page");
     examples.set("issue-5470", "tabs/issue-5470");
     examples.set("background-color", "tabs/background-color-page");
     examples.set("color", "tabs/color");
     examples.set("icon-title-placement", "tabs/icon-title-placement");
     examples.set("icon-change", "tabs/icon-change");
     examples.set("swipe-enabled", "tabs/swipe-enabled");
+    examples.set("strip-item", "tabs/tab-strip-item-page");
+    examples.set("strip-items", "tabs/tab-strip-items-page");
     examples.set("tabs-position", "tabs/tabs-position-page");
     examples.set("tabs-binding", "tabs/tabs-binding-page");
-    
+
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/main-page.xml b/e2e/ui-tests-app/app/tabs/main-page.xml
@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/tab-strip-item-page.xml b/e2e/ui-tests-app/app/tabs/tab-strip-item-page.xml
@@ -0,0 +1,16 @@
+<Page>
+  <Tabs id="tabs">
+
+    <TabStrip>
+
+      <TabStripItem title="TabStripItem 1" iconSource="res://icon">
+      </TabStripItem>
+
+    </TabStrip>
+
+    <TabContentItem>
+      <Label text="TabContentItem 1"></Label>
+    </TabContentItem>
+
+  </Tabs>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/tab-strip-items-page.xml b/e2e/ui-tests-app/app/tabs/tab-strip-items-page.xml
@@ -0,0 +1,88 @@
+<Page>
+  <Tabs id="tabs">
+
+    <TabStrip>
+
+      <TabStripItem title="TabStripItem 1" iconSource="res://icon">
+      </TabStripItem>
+
+      <TabStripItem>
+        <Label text="TabStripItem 2">
+        </Label>
+        <Image src="res://icon">
+        </Image>
+      </TabStripItem>
+
+      <TabStripItem title="TabStripItem X" iconSource="res://icon">
+        <Label text="TabStripItem 3">
+        </Label>
+        <Image src="res://icon">
+        </Image>
+      </TabStripItem>
+
+      <TabStripItem>
+        <Label text="TabStripItem 4">
+        </Label>
+      </TabStripItem>
+
+      <TabStripItem>
+        <Image src="res://icon">
+        </Image>
+      </TabStripItem>
+
+      <TabStripItem title="TabStripItem 6">
+      </TabStripItem>
+
+      <TabStripItem iconSource="res://icon">
+      </TabStripItem>
+
+      <TabStripItem title="TabStripItem X" iconSource="res://icon">
+        <Label text="TabStripItem 8">
+        </Label>
+      </TabStripItem>
+
+      <TabStripItem title="TabStripItem 9" iconSource="res://icon">
+        <Image src="res://icon">
+        </Image>
+      </TabStripItem>
+
+    </TabStrip>
+
+    <TabContentItem>
+      <Label text="TabContentItem 1"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 2"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 3"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 4"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 5"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 6"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 7"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 8"></Label>
+    </TabContentItem>
+
+    <TabContentItem>
+      <Label text="TabContentItem 9"></Label>
+    </TabContentItem>
+
+  </Tabs>
+</Page>
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.d.ts
@@ -4,6 +4,8 @@
  */ /** */
 
 import { View, EventData } from "../../core/view";
+import { Image } from "../../image/image";
+import { Label } from "../../label/label";
 
 /**
  * Represents a tab strip entry.
@@ -19,6 +21,16 @@ export class TabStripItem extends View {
      */
     iconSource: string;
 
+    /**
+    * Gets or sets the label of the tab strip entry.
+    */
+    label: Label;
+
+    /**
+     * Gets or sets the image of the tab strip entry.
+     */
+    image: Image;
+
     /**
      * String value used when hooking to the tap event.
      */

diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts
@@ -21,6 +21,16 @@ export class TabStrip extends View {
      * Gets or sets the icon rendering mode on iOS
      */
     iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
+
+    /**
+     * @private
+     */
+    _hasImage: boolean;
+
+    /**
+     * @private
+     */
+    _hasTitle: boolean;
 }
 
 export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;
diff --git a/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts b/tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
@@ -14,6 +14,8 @@ export const traceCategory = "TabView";
 export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public items: TabStripItem[];
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
+    public _hasImage: boolean;
+    public _hasTitle: boolean;
 
     public eachChild(callback: (child: ViewBase) => boolean) {
         const items = this.items;
@@ -48,7 +50,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [backgroundColorProperty.setNative](value: Color) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarBackgroundColor(value);
     }
 

diff --git a/tns-core-modules/ui/tabs/tabs.android.ts b/tns-core-modules/ui/tabs/tabs.android.ts
@@ -234,29 +234,34 @@ function initializeNativeClasses() {
 }
 
 function createTabItemSpec(item: TabStripItem): org.nativescript.widgets.TabItemSpec {
-    const result = new org.nativescript.widgets.TabItemSpec();
-    result.title = item.title;
-
-    if (item.iconSource) {
-        if (item.iconSource.indexOf(RESOURCE_PREFIX) === 0) {
-            result.iconId = ad.resources.getDrawableId(item.iconSource.substr(RESOURCE_PREFIX.length));
-            if (result.iconId === 0) {
+    let iconSource;
+    const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
+
+    // Image and Label children of TabStripItem
+    // take priority over its `iconSource` and `title` properties
+    iconSource = item.image ? item.image.src : item.iconSource;
+    tabItemSpec.title = item.label ? item.label.text : item.title;
+
+    if (iconSource) {
+        if (iconSource.indexOf(RESOURCE_PREFIX) === 0) {
+            tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length));
+            if (tabItemSpec.iconId === 0) {
                 // TODO
-                // traceMissingIcon(item.iconSource);
+                // traceMissingIcon(iconSource);
             }
         } else {
-            const is = fromFileOrResource(item.iconSource);
+            const is = fromFileOrResource(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(application.android.context.getResources(), is.android);
+                tabItemSpec.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
             } else {
                 // TODO
-                // traceMissingIcon(item.iconSource);
+                // traceMissingIcon(iconSource);
             }
         }
     }
 
-    return result;
+    return tabItemSpec;
 }
 
 let defaultAccentColor: number = undefined;