From 55c9cc9072bad2f2859749de86fcd801b413e366 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <vasil.chimev@gmail.com>
Date: Fri, 23 Aug 2019 15:32:31 +0300
Subject: [PATCH] feat(TabStrip): add itemTap event (#7711)

---
 e2e/ui-tests-app/app/app-root.xml             |  2 +-
 e2e/ui-tests-app/app/app.ts                   | 18 +++--
 .../app/bottom-navigation/events-page.ts      | 42 +++++++++++
 .../app/bottom-navigation/events-page.xml     | 36 +++++++++
 .../app/bottom-navigation/first-page.ts       | 14 ++++
 .../app/bottom-navigation/first-page.xml      |  7 ++
 .../app/bottom-navigation/main-page.ts        |  2 +
 .../app/bottom-navigation/reselect-page.ts    | 61 ++++++++++++++++
 .../app/bottom-navigation/reselect-page.xml   | 37 ++++++++++
 .../app/bottom-navigation/second-page.ts      | 14 ++++
 .../app/bottom-navigation/second-page.xml     |  7 ++
 e2e/ui-tests-app/app/tabs/default-page.xml    |  2 +-
 e2e/ui-tests-app/app/tabs/events-page.ts      | 42 +++++++++++
 e2e/ui-tests-app/app/tabs/events-page.xml     | 36 +++++++++
 e2e/ui-tests-app/app/tabs/first-page.ts       | 14 ++++
 e2e/ui-tests-app/app/tabs/first-page.xml      |  7 ++
 e2e/ui-tests-app/app/tabs/main-page.ts        |  2 +
 e2e/ui-tests-app/app/tabs/reselect-page.ts    | 73 +++++++++++++++++++
 e2e/ui-tests-app/app/tabs/reselect-page.xml   | 37 ++++++++++
 e2e/ui-tests-app/app/tabs/second-page.ts      | 14 ++++
 e2e/ui-tests-app/app/tabs/second-page.xml     |  7 ++
 .../pages/navigation/pageA-new-activity.ts    | 27 -------
 tests/app/pages/navigation/pageA.ts           | 56 --------------
 .../pages/navigation/pageB-new-activity.ts    | 34 ---------
 tests/app/pages/navigation/pageB.ts           | 58 ---------------
 .../pages/navigation/pageC-new-activity.ts    | 34 ---------
 tests/app/pages/navigation/pageC.ts           | 43 -----------
 .../bottom-navigation.android.ts              | 64 ++++++++--------
 .../bottom-navigation.ios.ts                  | 32 ++++----
 .../tab-strip/tab-strip.d.ts                  | 30 +++++++-
 .../tab-strip/tab-strip.ts                    | 30 +++++---
 tns-core-modules/ui/tabs/tabs.android.ts      | 60 ++++++++-------
 tns-core-modules/ui/tabs/tabs.ios.ts          | 28 ++++---
 33 files changed, 610 insertions(+), 360 deletions(-)
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/events-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/events-page.xml
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/first-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/first-page.xml
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/second-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/second-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/events-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/events-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/first-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/first-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/reselect-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/reselect-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/second-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/second-page.xml
 delete mode 100644 tests/app/pages/navigation/pageA-new-activity.ts
 delete mode 100644 tests/app/pages/navigation/pageA.ts
 delete mode 100644 tests/app/pages/navigation/pageB-new-activity.ts
 delete mode 100644 tests/app/pages/navigation/pageB.ts
 delete mode 100644 tests/app/pages/navigation/pageC-new-activity.ts
 delete mode 100644 tests/app/pages/navigation/pageC.ts

diff --git a/e2e/ui-tests-app/app/app-root.xml b/e2e/ui-tests-app/app/app-root.xml
index ae1bc1ebf..dbf7e70ce 100644
--- a/e2e/ui-tests-app/app/app-root.xml
+++ b/e2e/ui-tests-app/app/app-root.xml
@@ -1 +1 @@
-<Frame defaultPage="main-page" />
\ No newline at end of file
+<Frame defaultPage="main-page" />
diff --git a/e2e/ui-tests-app/app/app.ts b/e2e/ui-tests-app/app/app.ts
index e5658de53..b2819d214 100644
--- a/e2e/ui-tests-app/app/app.ts
+++ b/e2e/ui-tests-app/app/app.ts
@@ -24,7 +24,7 @@ application.on("uncaughtError", args => {
     }
 });
 
-application.on(application.launchEvent, function(args: application.LaunchEventData) {
+application.on(application.launchEvent, function (args: application.LaunchEventData) {
     if (args.android) {
         // For Android applications, args.android is an android.content.Intent class.
         console.log("### Launched application with: " + args.android + ".");
@@ -34,7 +34,7 @@ application.on(application.launchEvent, function(args: application.LaunchEventDa
     }
 });
 
-application.on(application.suspendEvent, function(args: application.ApplicationEventData) {
+application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("#" + ++countSuspend + "# SuspendEvent Activity: " + args.android);
@@ -44,7 +44,7 @@ application.on(application.suspendEvent, function(args: application.ApplicationE
     }
 });
 
-application.on(application.resumeEvent, function(args: application.ApplicationEventData) {
+application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("#" + ++countResume + "# ResumeEvent Activity: " + args.android);
@@ -54,7 +54,7 @@ application.on(application.resumeEvent, function(args: application.ApplicationEv
     }
 });
 
-application.on(application.exitEvent, function(args: application.ApplicationEventData) {
+application.on(application.exitEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("### ExitEvent Activity: " + args.android);
@@ -64,7 +64,7 @@ application.on(application.exitEvent, function(args: application.ApplicationEven
     }
 });
 
-application.on(application.lowMemoryEvent, function(args: application.ApplicationEventData) {
+application.on(application.lowMemoryEvent, function (args: application.ApplicationEventData) {
     if (args.android) {
         // For Android applications, args.android is an android activity class.
         console.log("### LowMemoryEvent Activity: " + args.android);
@@ -74,14 +74,14 @@ application.on(application.lowMemoryEvent, function(args: application.Applicatio
     }
 });
 
-application.on(application.uncaughtErrorEvent, function(args: application.UnhandledErrorEventData) {
+application.on(application.uncaughtErrorEvent, function (args: application.UnhandledErrorEventData) {
     console.log("### NativeScriptError: " + args.error);
     console.log("### nativeException: " + (<any>args.error).nativeException);
     console.log("### stackTrace: " + (<any>args.error).stackTrace);
     console.log("### stack: " + args.error.stack);
 });
 
-application.on(application.discardedErrorEvent, function(args: application.DiscardedErrorEventData) {
+application.on(application.discardedErrorEvent, function (args: application.DiscardedErrorEventData) {
     console.log("### [Discarded] NativeScriptError: " + args.error);
     console.log("### [Discarded] nativeException: " + (<any>args.error).nativeException);
     console.log("### [Discarded] stackTrace: " + (<any>args.error).stackTrace);
@@ -89,6 +89,8 @@ application.on(application.discardedErrorEvent, function(args: application.Disca
 });
 
 application.setCssFileName("app.css");
-
 application._start({ moduleName: "main-page" });
+
+// TODO: investigate tab-view -> tabviewcss test crash
+// TODO: investigate css -> layouts border overlap failure
 // application.run({ moduleName: "app-root" });
diff --git a/e2e/ui-tests-app/app/bottom-navigation/events-page.ts b/e2e/ui-tests-app/app/bottom-navigation/events-page.ts
new file mode 100644
index 000000000..27dafcd47
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/events-page.ts
@@ -0,0 +1,42 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <Tabs>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/events-page.xml b/e2e/ui-tests-app/app/bottom-navigation/events-page.xml
new file mode 100644
index 000000000..174a28d3f
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/events-page.xml
@@ -0,0 +1,36 @@
+<Page>
+
+  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip>
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" />
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second View" backgroundColor="green" />
+        <Button tap="goToThird" text="go to thrid" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="blue" />
+        <Button tap="goToFirst" text="go to first" />
+      </StackLayout>
+    </TabContentItem>
+
+  </BottomNavigation>
+
+</Page>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/first-page.ts b/e2e/ui-tests-app/app/bottom-navigation/first-page.ts
new file mode 100644
index 000000000..3df754637
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/first-page.ts
@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("bottom-navigation/second-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/first-page.xml b/e2e/ui-tests-app/app/bottom-navigation/first-page.xml
new file mode 100644
index 000000000..0f47fd902
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/first-page.xml
@@ -0,0 +1,7 @@
+<Page backgroundColor="lightgreen" actionBarHidden="true">
+  <StackLayout>
+    <Label text="First Page"  />
+    <Button tap="goToSecond" text="go to second page" />
+    <Button tap="goBack" text="go to back" />
+  </StackLayout>
+</Page>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
index f3f6801af..344d41ef8 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
@@ -15,6 +15,7 @@ export function loadExamples() {
     examples.set("issue-5470", "bottom-navigation/issue-5470-page");
     examples.set("background-color", "bottom-navigation/background-color-page");
     examples.set("color", "bottom-navigation/color-page");
+    examples.set("events", "bottom-navigation/events-page");
     examples.set("font", "bottom-navigation/font-page");
     examples.set("text-transform", "bottom-navigation/text-transform-page");
     examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
     examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
     examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
     examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
+    examples.set("reselect", "bottom-navigation/reselect-page");
 
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts b/e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts
new file mode 100644
index 000000000..91963cdf8
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/reselect-page.ts
@@ -0,0 +1,61 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame/frame";
+import { Page } from "tns-core-modules/ui/page";
+import {
+  TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip,
+} from "tns-core-modules/ui/bottom-navigation";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  bottomNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onItemTap(args: TabStripItemEventData) {
+  console.log("---> onItemTap", args.eventName);
+  console.log("---> onItemTap", args.index);
+  console.log("---> onItemTap", args.object);
+
+  const tabStrip = <TabStrip>args.object;
+  const page = <Page>tabStrip.page;
+  const frame = <Frame>page.getViewById("frame");
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+
+  console.log("---> onItemTap selectedIndex", bottomNav.selectedIndex);
+  if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
+    frame.goBack();
+  }
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml b/e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml
new file mode 100644
index 000000000..916171886
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/reselect-page.xml
@@ -0,0 +1,37 @@
+<Page>
+
+  <BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip itemTap="onItemTap">
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" id="label" />
+        <Button tap="goToSecond" text="go to second item" id="button" />
+        <Frame defaultPage="bottom-navigation/first-page" id="frame" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second Content Item" backgroundColor="lightgreen" />
+        <Button tap="goToThird" text="go to thrid item" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First Content Item" backgroundColor="lightblue" />
+        <Button tap="goToFirst" text="go to first item" />
+      </StackLayout>
+    </TabContentItem>
+
+  </BottomNavigation>
+
+</Page>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/second-page.ts b/e2e/ui-tests-app/app/bottom-navigation/second-page.ts
new file mode 100644
index 000000000..bc0a5d0b0
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/second-page.ts
@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("bottom-navigation/first-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/second-page.xml b/e2e/ui-tests-app/app/bottom-navigation/second-page.xml
new file mode 100644
index 000000000..1ca882475
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/second-page.xml
@@ -0,0 +1,7 @@
+<Page backgroundColor="lightblue" actionBarHidden="true">
+  <StackLayout>
+    <Label text="Second Page"  />
+    <Button tap="goToFirst" text="go to first page" />
+    <Button tap="goBack" text="go back" />
+  </StackLayout>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/default-page.xml b/e2e/ui-tests-app/app/tabs/default-page.xml
index e16c9aa92..4760c9256 100644
--- a/e2e/ui-tests-app/app/tabs/default-page.xml
+++ b/e2e/ui-tests-app/app/tabs/default-page.xml
@@ -86,4 +86,4 @@
       <Label text="Second Tab" />
     </TabStripItem>
   </BottomNavigationBar> -->
-</Page>
\ No newline at end of file
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/events-page.ts b/e2e/ui-tests-app/app/tabs/events-page.ts
new file mode 100644
index 000000000..aa049d535
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/events-page.ts
@@ -0,0 +1,42 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}
diff --git a/e2e/ui-tests-app/app/tabs/events-page.xml b/e2e/ui-tests-app/app/tabs/events-page.xml
new file mode 100644
index 000000000..ec44be255
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/events-page.xml
@@ -0,0 +1,36 @@
+<Page>
+
+  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip>
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" />
+        <Button tap="goToSecond" text="go to second" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second View" backgroundColor="green" />
+        <Button tap="goToThird" text="go to thrid" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="blue" />
+        <Button tap="goToFirst" text="go to first" />
+      </StackLayout>
+    </TabContentItem>
+
+  </Tabs>
+
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/first-page.ts b/e2e/ui-tests-app/app/tabs/first-page.ts
new file mode 100644
index 000000000..098ed4140
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/first-page.ts
@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("tabs/second-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}
diff --git a/e2e/ui-tests-app/app/tabs/first-page.xml b/e2e/ui-tests-app/app/tabs/first-page.xml
new file mode 100644
index 000000000..0f47fd902
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/first-page.xml
@@ -0,0 +1,7 @@
+<Page backgroundColor="lightgreen" actionBarHidden="true">
+  <StackLayout>
+    <Label text="First Page"  />
+    <Button tap="goToSecond" text="go to second page" />
+    <Button tap="goBack" text="go to back" />
+  </StackLayout>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
index ec0632f91..0edd590c1 100644
--- a/e2e/ui-tests-app/app/tabs/main-page.ts
+++ b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -16,6 +16,7 @@ export function loadExamples() {
     examples.set("issue-5470", "tabs/issue-5470-page");
     examples.set("background-color", "tabs/background-color-page");
     examples.set("color", "tabs/color-page");
+    examples.set("events", "tabs/events-page");
     examples.set("font", "tabs/font-page");
     examples.set("text-transform", "tabs/text-transform-page");
     examples.set("highlight-color", "tabs/highlight-color-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
     examples.set("swipe-disabled", "tabs/swipe-disabled-page");
     examples.set("strip-item", "tabs/tab-strip-item-page");
     examples.set("strip-items", "tabs/tab-strip-items-page");
+    examples.set("reselect", "tabs/reselect-page");
     examples.set("tabs-position", "tabs/tabs-position-page");
     examples.set("tabs-binding", "tabs/tabs-binding-page");
     examples.set("font-icons", "tabs/font-icons-page");
diff --git a/e2e/ui-tests-app/app/tabs/reselect-page.ts b/e2e/ui-tests-app/app/tabs/reselect-page.ts
new file mode 100644
index 000000000..012e393c8
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/reselect-page.ts
@@ -0,0 +1,73 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame/frame";
+import { Page } from "tns-core-modules/ui/page";
+import {
+  TabStripItemEventData, SelectedIndexChangedEventData, Tabs, TabStrip //, TabStripItem
+} from "tns-core-modules/ui/tabs";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+  console.log("---> goToSecond");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 1;
+}
+
+export function goToThird(args: EventData) {
+  console.log("---> goToThird");
+  const page = <Page>(<any>args.object).page;
+  const tabsNav = <Tabs>page.getViewById("tabsNav");
+  tabsNav.selectedIndex = 2;
+}
+
+export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+  console.log("---> onSelectedIndexChanged", args.eventName);
+  console.log("---> oldIndex", args.oldIndex);
+  console.log("---> newIndex", args.newIndex);
+}
+
+export function onItemTap(args: TabStripItemEventData) {
+  console.log("---> onItemTap", args.eventName);
+  console.log("---> onItemTap", args.index);
+  console.log("---> onItemTap", args.object);
+
+  const tabStrip = <TabStrip>args.object;
+  const page = <Page>tabStrip.page;
+  const frame = <Frame>page.getViewById("frame");
+  const tabs = <Tabs>page.getViewById("tabsNav");
+
+  console.log("---> onItemTap selectedIndex", tabs.selectedIndex);
+  if (tabs.selectedIndex === args.index && frame.canGoBack()) {
+    frame.goBack();
+  }
+}
+
+export function onFirstTabStripItemTap(args: EventData) {
+  console.log("---> onFirstTabStripItemTap", args.eventName);
+  // console.log("---> onFirstTabStripItemTap", args.eventName);
+  // console.log("---> onFirstTabStripItemTap", args.object);
+  // const tabStripItem = <TabStripItem>args.object;
+
+  // const page = tabStripItem.page;
+  // const frame = <Frame>page.getViewById("frame");
+  // const tabs = <Tabs>page.getViewById("tabsNav");
+  // console.log("---> tabs.selectedIndex", tabs.selectedIndex);
+
+  // if (tabs.selectedIndex === 0 && frame.canGoBack()) {
+  //   frame.goBack();
+  // }
+}
+
+export function onSecondTabStripItemTap(args: EventData) {
+  console.log("---> onSecondTabStripItemTap", args.eventName);
+}
+
+export function onThirdTabStripItemTap(args: EventData) {
+  console.log("---> onThirdTabStripItemTap", args.eventName);
+}
diff --git a/e2e/ui-tests-app/app/tabs/reselect-page.xml b/e2e/ui-tests-app/app/tabs/reselect-page.xml
new file mode 100644
index 000000000..a4974e509
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/reselect-page.xml
@@ -0,0 +1,37 @@
+<Page>
+
+  <Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
+
+    <TabStrip itemTap="onItemTap">
+      <TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
+      <TabStripItem tap="onSecondTabStripItemTap">
+        <Label text="Second" />
+      </TabStripItem>
+      <TabStripItem title="First" tap="onThirdTabStripItemTap">
+        <Label text="Third" />
+      </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First View" backgroundColor="red" id="label" />
+        <Button tap="goToSecond" text="go to second item" id="button" />
+        <Frame defaultPage="tabs/first-page" id="frame" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="Second Content Item" backgroundColor="lightgreen" />
+        <Button tap="goToThird" text="go to thrid item" />
+      </StackLayout>
+    </TabContentItem>
+    <TabContentItem>
+      <StackLayout>
+        <Label text="First Content Item" backgroundColor="lightblue" />
+        <Button tap="goToFirst" text="go to first item" />
+      </StackLayout>
+    </TabContentItem>
+
+  </Tabs>
+
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/second-page.ts b/e2e/ui-tests-app/app/tabs/second-page.ts
new file mode 100644
index 000000000..cc6782463
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/second-page.ts
@@ -0,0 +1,14 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Button } from "tns-core-modules/ui/button/button";
+
+export function goToFirst(args: EventData) {
+  console.log("---> goToFirst Page");
+  const button = <Button>args.object;
+  button.page.frame.navigate("tabs/first-page");
+}
+
+export function goBack(args: EventData) {
+  console.log("---> goBack");
+  const button = <Button>args.object;
+  button.page.frame.goBack();
+}
diff --git a/e2e/ui-tests-app/app/tabs/second-page.xml b/e2e/ui-tests-app/app/tabs/second-page.xml
new file mode 100644
index 000000000..1ca882475
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/second-page.xml
@@ -0,0 +1,7 @@
+<Page backgroundColor="lightblue" actionBarHidden="true">
+  <StackLayout>
+    <Label text="Second Page"  />
+    <Button tap="goToFirst" text="go to first page" />
+    <Button tap="goBack" text="go back" />
+  </StackLayout>
+</Page>
diff --git a/tests/app/pages/navigation/pageA-new-activity.ts b/tests/app/pages/navigation/pageA-new-activity.ts
deleted file mode 100644
index a4b2f8780..000000000
--- a/tests/app/pages/navigation/pageA-new-activity.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-
-    var btn = new button.Button();
-    btn.text = "Page B new activity";
-    btn.on(button.Button.tapEvent, function () {
-        var nextPage = "tests/pages/navigation/pageB-new-activity";
-        frame.topmost().navigate(nextPage);
-    });
-    stack.addChild(btn);
-
-    var txt = new text.TextField();
-    txt.text = "text new A";
-    stack.addChild(txt);
-
-    page.content = stack;
-
-    return page;
-}
-//export var Page = page;
diff --git a/tests/app/pages/navigation/pageA.ts b/tests/app/pages/navigation/pageA.ts
deleted file mode 100644
index 079ed62a5..000000000
--- a/tests/app/pages/navigation/pageA.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-import * as color from "tns-core-modules/color";
-import * as list from "tns-core-modules/ui/list-view";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-    stack.style.backgroundColor = new color.Color("#FF8833FF");
-
-    var btn = new button.Button();
-    btn.text = "Page B";
-    btn.on(button.Button.tapEvent, function () {
-        var nextPage = "tests/pages/navigation/pageB";
-        frame.topmost().navigate(nextPage);
-    });
-    stack.addChild(btn);
-
-    var btnActivity = new button.Button();
-    btnActivity.text = "start activity";
-    btnActivity.on(button.Button.tapEvent, function () {
-        var newPage = "tests/pages/navigation/pageA-new-activity";
-
-        var newFrame = new frame.Frame();
-        newFrame.navigate(newPage);
-    });
-    stack.addChild(btnActivity);
-
-    var txt = new text.TextField();
-    txt.text = "text A";
-    stack.addChild(txt);
-
-    var lv = new list.ListView();
-    var data = [];
-    for (var i = 0; i < 100; i++) {
-        data[i] = "here is item " + i;
-    }
-    lv.height = 200;
-    lv.items = data;
-    lv.on(list.ListView.itemLoadingEvent, (args: list.ItemEventData) => {
-        var btn = <button.Button> args.view;
-        if (!btn) {
-            btn = new button.Button();
-            args.view = btn;
-        }
-        btn.text = data[args.index];
-    });
-    stack.addChild(lv);
-
-    page.content = stack;
-
-    return page;
-}
diff --git a/tests/app/pages/navigation/pageB-new-activity.ts b/tests/app/pages/navigation/pageB-new-activity.ts
deleted file mode 100644
index 2c5312555..000000000
--- a/tests/app/pages/navigation/pageB-new-activity.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-
-    var btn = new button.Button();
-    btn.text = "Page C new activity";
-    btn.on(button.Button.tapEvent, function () {
-        var nextPage = "tests/pages/navigation/pageC-new-activity";
-        frame.topmost().navigate(nextPage);
-    });
-    stack.addChild(btn);
-
-    var backBtn = new button.Button();
-    backBtn.text = "BACK";
-    backBtn.on(button.Button.tapEvent, function () {
-        frame.topmost().goBack();
-    });
-    stack.addChild(backBtn);
-
-    var txt = new text.TextField();
-    txt.text = "text new B";
-    stack.addChild(txt);
-
-    page.content = stack;
-
-    return page;
-}
-//export var Page = page;
diff --git a/tests/app/pages/navigation/pageB.ts b/tests/app/pages/navigation/pageB.ts
deleted file mode 100644
index 989766350..000000000
--- a/tests/app/pages/navigation/pageB.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-import * as color from "tns-core-modules/color";
-import * as scroll from "tns-core-modules/ui/scroll-view";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-    stack.style.backgroundColor = new color.Color("#FFFFFF00");
-
-    var btn = new button.Button();
-    btn.text = "Page C";
-    btn.on(button.Button.tapEvent, function () {
-        var nextPage = "tests/pages/navigation/pageC";
-        frame.topmost().navigate(nextPage);
-    });
-    stack.addChild(btn);
-
-    var btnActivity = new button.Button();
-    btnActivity.text = "start activity";
-    btnActivity.on(button.Button.tapEvent, function () {
-        var newFrame = new frame.Frame();
-        var newPage = "tests/pages/navigation/pageA-new-activity";
-        newFrame.navigate(newPage);
-    });
-    stack.addChild(btnActivity);
-
-    var backBtn = new button.Button();
-    backBtn.text = "BACK";
-    backBtn.on(button.Button.tapEvent, function () {
-        frame.topmost().goBack();
-    });
-    stack.addChild(backBtn);
-
-    var txt = new text.TextField();
-    txt.text = "text B";
-    stack.addChild(txt);
-
-    var sv = new scroll.ScrollView();
-    sv.height = 200;
-    stack.addChild(sv);
-
-    var content = new stackModule.StackLayout();
-    sv.content = content;
-    for (var i = 0; i < 50; i++) {
-        var b = new button.Button();
-        b.text = "button " + i;
-        content.addChild(b);
-    }
-
-    page.content = stack;
-
-    return page;
-}
-//export var Page = page;
diff --git a/tests/app/pages/navigation/pageC-new-activity.ts b/tests/app/pages/navigation/pageC-new-activity.ts
deleted file mode 100644
index 0af3783e5..000000000
--- a/tests/app/pages/navigation/pageC-new-activity.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-
-    var btn = new button.Button();
-    btn.text = "Page A ???";
-    btn.on(button.Button.tapEvent, function () {
-        var newPage = "tests/pages/navigation/pageA";
-        frame.topmost().navigate(newPage);
-    });
-    stack.addChild(btn);
-
-    var backBtn = new button.Button();
-    backBtn.text = "BACK";
-    backBtn.on(button.Button.tapEvent, function () {
-        frame.topmost().goBack();
-    });
-    stack.addChild(backBtn);
-
-    var txt = new text.TextField();
-    txt.text = "text new C";
-    stack.addChild(txt);
-
-    page.content = stack;
-
-    return page;
-}
-//export var Page = page;
diff --git a/tests/app/pages/navigation/pageC.ts b/tests/app/pages/navigation/pageC.ts
deleted file mode 100644
index 61260e640..000000000
--- a/tests/app/pages/navigation/pageC.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import * as frame from "tns-core-modules/ui/frame";
-import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
-import * as button from "tns-core-modules/ui/button";
-import * as text from "tns-core-modules/ui/text-field";
-
-export function createPage() {
-    var page = new pages.Page();
-    var stack = new stackModule.StackLayout();
-
-    var newActivity = new button.Button();
-    newActivity.text = "start activity";
-    newActivity.on(button.Button.tapEvent, function () {
-        var newFrame = new frame.Frame();
-        var newPage = "tests/pages/navigation/pageA-new-activity";
-        newFrame.navigate(newPage);
-    });
-    stack.addChild(newActivity);
-
-    var btn = new button.Button();
-    btn.text = "Page A ???";
-    btn.on(button.Button.tapEvent, function () {
-        var nextPage = "tests/pages/navigation/pageA";
-        frame.topmost().navigate(nextPage);
-    });
-    stack.addChild(btn);
-
-    var backBtn = new button.Button();
-    backBtn.text = "BACK";
-    backBtn.on(button.Button.tapEvent, function () {
-        frame.topmost().goBack();
-    });
-    stack.addChild(backBtn);
-
-    var txt = new text.TextField();
-    txt.text = "text C";
-    stack.addChild(txt);
-
-    page.content = stack;
-
-    return page;
-}
-//export var Page = page;
diff --git a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
index effd1ef5d..4da582b59 100644
--- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
+++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
@@ -1,20 +1,20 @@
 // Types
+import { TabContentItem } from "../tab-navigation-base/tab-content-item";
 import { TabStrip } from "../tab-navigation-base/tab-strip";
 import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
-import { TabContentItem } from "../tab-navigation-base/tab-content-item";
 import { TextTransform } from "../text-base";
 
 // Requires
-import { 
-    TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
-} from "../tab-navigation-base/tab-navigation-base";
-import { Font } from "../styling/font";
-import { getTransformedText } from "../text-base";
-import { CSSType, Color } from "../core/view";
-import { Frame, View } from "../frame";
-import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
-import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
 import * as application from "../../application";
+import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
+import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
+import { Color, CSSType } from "../core/view";
+import { Frame, View } from "../frame";
+import { Font } from "../styling/font";
+import {
+    getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
+} from "../tab-navigation-base/tab-navigation-base";
+import { getTransformedText } from "../text-base";
 
 // TODO: Impl trace
 // import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace";
@@ -126,10 +126,12 @@ function initializeNativeClasses() {
                 return false;
             }
 
-            const tabStripItems = owner.tabStrip && owner.tabStrip.items;
+            const tabStrip = owner.tabStrip;
+            const tabStripItems = tabStrip && tabStrip.items;
 
             if (position >= 0 && tabStripItems[position]) {
                 tabStripItems[position]._emit(TabStripItem.tapEvent);
+                tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
             }
 
             if (!owner.items[position]) {
@@ -271,7 +273,7 @@ export class BottomNavigation extends TabNavigationBase {
 
         this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
         (<any>this._bottomNavigationBar).owner = this;
-        
+
         if (this.tabStrip) {
             this.tabStrip.setNativeView(this._bottomNavigationBar);
         }
@@ -504,37 +506,37 @@ export class BottomNavigation extends TabNavigationBase {
 
     private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
         const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
-    
+
         if (tabStripItem.isLoaded) {
             const titleLabel = tabStripItem.label;
             let title = titleLabel.text;
-    
+
             // TEXT-TRANSFORM
             const textTransform = titleLabel.style.textTransform;
             if (textTransform) {
                 title = getTransformedText(title, textTransform);
             }
             tabItemSpec.title = title;
-    
+
             // BACKGROUND-COLOR
             const backgroundColor = tabStripItem.style.backgroundColor;
             if (backgroundColor) {
                 tabItemSpec.backgroundColor = backgroundColor.android;
             }
-    
+
             // COLOR
             const color = titleLabel.style.color;
             if (color) {
                 tabItemSpec.color = color.android;
             }
-    
+
             // FONT
             const fontInternal = titleLabel.style.fontInternal;
             if (fontInternal) {
                 tabItemSpec.fontSize = fontInternal.fontSize;
                 tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
             }
-    
+
             // ICON
             const iconSource = tabStripItem.image && tabStripItem.image.src;
             if (iconSource) {
@@ -546,7 +548,7 @@ export class BottomNavigation extends TabNavigationBase {
                     }
                 } else {
                     const icon = this.getIcon(tabStripItem);
-    
+
                     if (icon) {
                         // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
                         // tslint:disable-next-line:deprecation
@@ -558,13 +560,13 @@ export class BottomNavigation extends TabNavigationBase {
                 }
             }
         }
-    
+
         return tabItemSpec;
     }
 
     private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
         const iconSource = tabStripItem.image && tabStripItem.image.src;
-    
+
         let is: ImageSource;
         if (isFontIconURI(iconSource)) {
             const fontIconCode = iconSource.split("//")[1];
@@ -575,35 +577,35 @@ export class BottomNavigation extends TabNavigationBase {
         } else {
             is = fromFileOrResource(iconSource);
         }
-    
+
         let imageDrawable: android.graphics.drawable.BitmapDrawable;
         if (is && is.android) {
             let image = is.android;
-    
+
             if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
                 image = this.getFixedSizeIcon(image);
             }
-    
+
             imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
         } else {
             // TODO
             // traceMissingIcon(iconSource);
         }
-    
+
         return imageDrawable;
     }
-    
+
     private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
         const inWidth = image.getWidth();
         const inHeight = image.getHeight();
-        
+
         const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
-    
+
         const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
         const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
-    
+
         const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
-    
+
         return scaledImage;
     }
 
@@ -660,7 +662,7 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
-        const titleLabel = tabStripItem.label;    
+        const titleLabel = tabStripItem.label;
         const title = getTransformedText(titleLabel.text, value);
         tabStripItem.nativeViewProtected.setText(title);
     }
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 330aa0485..7ea8e43dd 100644
--- a/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
+++ b/tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
@@ -1,21 +1,22 @@
 // Types
-import { TabStrip } from "../tab-navigation-base/tab-strip";
 import { TabContentItem } from "../tab-navigation-base/tab-content-item";
+import { TabStrip } from "../tab-navigation-base/tab-strip";
 import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { TextTransform } from "../text-base";
 
-//Requires
-import { 
-    TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
-} from "../tab-navigation-base/tab-navigation-base";
-import { Font } from "../styling/font";
-import { getTransformedText } from "../text-base";
-import { Frame } from "../frame";
-import { ios as iosView, View, CSSType } from "../core/view";
-import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
-import { device } from "../../platform";
+// Requires
 import { Color } from "../../color";
 import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
+import { device } from "../../platform";
+import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
+import { CSSType, ios as iosView, View } from "../core/view";
+import { Frame } from "../frame";
+import { Font } from "../styling/font";
+import {
+    getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
+} from "../tab-navigation-base/tab-navigation-base";
+import { getTransformedText } from "../text-base";
+
 // TODO:
 // import { profile } from "../../profiling";
 
@@ -107,9 +108,12 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
             if (tabBarController.viewControllers) {
                 const position = tabBarController.viewControllers.indexOfObject(viewController);
                 if (position !== NSNotFound) {
-                    const tabStripItems = owner.tabStrip && owner.tabStrip.items;
+                    const tabStrip = owner.tabStrip;
+                    const tabStripItems = tabStrip && tabStrip.items;
+
                     if (tabStripItems && tabStripItems[position]) {
                         tabStripItems[position]._emit(TabStripItem.tapEvent);
+                        tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
                     }
                 }
             }
@@ -555,7 +559,7 @@ export class BottomNavigation extends TabNavigationBase {
 
             if (is && is.ios) {
                 image = is.ios;
-                
+
                 if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
                     image = this.getFixedSizeIcon(image);
                 }
@@ -575,7 +579,7 @@ export class BottomNavigation extends TabNavigationBase {
     private getFixedSizeIcon(image: UIImage): UIImage {
         const inWidth = image.size.width;
         const inHeight = image.size.height;
-        
+
         const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
 
         const widthPts = iconSpecSize.width;
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
index bead5cda8..22b629890 100644
--- 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
@@ -3,8 +3,8 @@
  * @module "ui/tab-navigation/tab-strip"
  */ /** */
 
-import { View, Property } from "../../core/view";
 import { Color } from "../../../color";
+import { EventData, Property, View } from "../../core/view";
 import { TabStripItem } from "../tab-strip-item";
 
 /**
@@ -36,6 +36,34 @@ export class TabStrip extends View {
      * @private
      */
     _hasTitle: boolean;
+
+    /**
+     * String value used when hooking to itemTap event.
+     */
+    public static itemTapEvent: string;
+
+    /**
+     * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
+     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
+     * @param callback - Callback function which will be executed when event is raised.
+     * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
+     */
+    on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
+
+    /**
+     * Raised when an TabStripItem is tapped.
+     */
+    on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
+}
+
+/**
+ * Event data containing information for the TabStripItem's index.
+ */
+export interface TabStripItemEventData extends EventData {
+    /**
+     * The index of the TabStripItem.
+     */
+    index: number;
 }
 
 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
index f28bb5c68..f6654c4c5 100644
--- 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
@@ -1,14 +1,14 @@
-// Types
-import { TabStrip as TabStripDefinition } from ".";
-import { TabStripItem } from "../tab-strip-item";
-import { TabNavigationBase } from "../tab-navigation-base";
+// Types
 import { Color } from "../../../color";
-import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
+import { AddArrayFromBuilder, AddChildFromBuilder, EventData, ViewBase } from "../../core/view";
+import { TabNavigationBase } from "../tab-navigation-base";
+import { TabStripItem } from "../tab-strip-item";
+import { TabStripItemEventData, TabStrip as TabStripDefinition } from "./";
 
 // Requires
-import { 
-    View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty, 
-    colorProperty, fontInternalProperty, booleanConverter
+import {
+    backgroundColorProperty, backgroundInternalProperty, booleanConverter,
+    colorProperty, CSSType, fontInternalProperty, Property, View
 } from "../../core/view";
 import { textTransformProperty } from "../../text-base";
 
@@ -20,6 +20,7 @@ export const highlightColorProperty = new Property<TabStrip, Color>({ name: "hig
 
 @CSSType("TabStrip")
 export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
+    public static itemTapEvent = "itemTap";
     public items: TabStripItem[];
     public isIconSizeFixed: boolean;
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -89,7 +90,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [colorProperty.setNative](value: Color) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarColor(value);
     }
 
@@ -100,7 +101,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [fontInternalProperty.setNative](value: any) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarFontInternal(value);
     }
 
@@ -111,7 +112,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [textTransformProperty.setNative](value: any) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarTextTransform(value);
     }
 
@@ -122,11 +123,16 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [highlightColorProperty.setNative](value: number | Color) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarHighlightColor(value);
     }
 }
 
+export interface TabStrip {
+    on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
+    on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
+}
+
 export const itemsProperty = new Property<TabStrip, TabStripItem[]>({
     name: "items", valueChanged: (target, oldValue, newValue) => {
         target.onItemsChanged(oldValue, newValue);
diff --git a/tns-core-modules/ui/tabs/tabs.android.ts b/tns-core-modules/ui/tabs/tabs.android.ts
index cfdfd5045..c2334f859 100644
--- a/tns-core-modules/ui/tabs/tabs.android.ts
+++ b/tns-core-modules/ui/tabs/tabs.android.ts
@@ -5,15 +5,17 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { TextTransform } from "../text-base";
 
 // Requires
-import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
-import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
-import { Font } from "../styling/font";
-import { getTransformedText } from "../text-base";
-import { Frame } from "../frame";
-import { Color } from "../core/view";
-import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
-import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
 import * as application from "../../application";
+import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
+import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
+import { Color } from "../core/view";
+import { Frame } from "../frame";
+import { Font } from "../styling/font";
+import {
+    getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
+} from "../tab-navigation-base/tab-navigation-base";
+import { getTransformedText } from "../text-base";
+import { offscreenTabLimitProperty, swipeEnabledProperty, TabsBase } from "./tabs-common";
 
 export * from "./tabs-common";
 
@@ -265,10 +267,12 @@ function initializeNativeClasses() {
                 return false;
             }
 
-            const tabStripItems = owner.tabStrip && owner.tabStrip.items;
+            const tabStrip = owner.tabStrip;
+            const tabStripItems = tabStrip && tabStrip.items;
 
             if (position >= 0 && tabStripItems[position]) {
                 tabStripItems[position]._emit(TabStripItem.tapEvent);
+                tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
             }
 
             if (!owner.items[position]) {
@@ -577,37 +581,37 @@ export class Tabs extends TabsBase {
 
     private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
         const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
-    
+
         if (tabStripItem.isLoaded) {
             const nestedLabel = tabStripItem.label;
             let title = nestedLabel.text;
-    
+
             // TEXT-TRANSFORM
             const textTransform = nestedLabel.style.textTransform;
             if (textTransform) {
                 title = getTransformedText(title, textTransform);
             }
             tabItemSpec.title = title;
-    
+
             // BACKGROUND-COLOR
             const backgroundColor = tabStripItem.style.backgroundColor;
             if (backgroundColor) {
                 tabItemSpec.backgroundColor = backgroundColor.android;
             }
-    
+
             // COLOR
             const color = nestedLabel.style.color;
             if (color) {
                 tabItemSpec.color = color.android;
             }
-    
+
             // FONT
             const fontInternal = nestedLabel.style.fontInternal;
             if (fontInternal) {
                 tabItemSpec.fontSize = fontInternal.fontSize;
                 tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
             }
-    
+
             // ICON
             const iconSource = tabStripItem.image && tabStripItem.image.src;
             if (iconSource) {
@@ -619,7 +623,7 @@ export class Tabs extends TabsBase {
                     }
                 } else {
                     const icon = this.getIcon(tabStripItem);
-    
+
                     if (icon) {
                         // TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
                         // tslint:disable-next-line:deprecation
@@ -631,13 +635,13 @@ export class Tabs extends TabsBase {
                 }
             }
         }
-    
+
         return tabItemSpec;
     }
-    
+
     private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
         const iconSource = tabStripItem.image && tabStripItem.image.src;
-    
+
         let is: ImageSource;
         if (isFontIconURI(iconSource)) {
             const fontIconCode = iconSource.split("//")[1];
@@ -648,35 +652,35 @@ export class Tabs extends TabsBase {
         } else {
             is = fromFileOrResource(iconSource);
         }
-    
+
         let imageDrawable: android.graphics.drawable.BitmapDrawable;
         if (is && is.android) {
             let image = is.android;
-    
+
             if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
                 image = this.getFixedSizeIcon(image);
             }
-    
+
             imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
         } else {
             // TODO
             // traceMissingIcon(iconSource);
         }
-    
+
         return imageDrawable;
     }
-    
+
     private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
         const inWidth = image.getWidth();
         const inHeight = image.getHeight();
-        
+
         const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
 
         const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
         const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
-    
+
         const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
-    
+
         return scaledImage;
     }
 
@@ -772,7 +776,7 @@ export class Tabs extends TabsBase {
     }
 
     public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
-        const nestedLabel = tabStripItem.label;    
+        const nestedLabel = tabStripItem.label;
         const title = getTransformedText(nestedLabel.text, value);
         tabStripItem.nativeViewProtected.setText(title);
     }
diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts
index 1156446f9..4a664cb1a 100644
--- a/tns-core-modules/ui/tabs/tabs.ios.ts
+++ b/tns-core-modules/ui/tabs/tabs.ios.ts
@@ -1,19 +1,20 @@
 // Types
 import { TabContentItem } from "../tab-navigation-base/tab-content-item";
-import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { TabStrip } from "../tab-navigation-base/tab-strip";
+import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
 import { TextTransform } from "../text-base";
 
 // Requires
-import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
-import { TabsBase, swipeEnabledProperty } from "./tabs-common";
-import { Font } from "../styling/font";
-import { Frame } from "../frame";
-import { ios as iosView, View } from "../core/view";
 import { Color } from "../../color";
-import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
-// import { device } from "../../platform";
 import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
+import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
+import { ios as iosView, View } from "../core/view";
+import { Frame } from "../frame";
+import { Font } from "../styling/font";
+import {
+    getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
+} from "../tab-navigation-base/tab-navigation-base";
+import { swipeEnabledProperty, TabsBase } from "./tabs-common";
 
 // TODO
 // import { profile } from "../../profiling";
@@ -44,9 +45,12 @@ class MDCTabBarDelegateImpl extends NSObject implements MDCTabBarDelegate {
             owner._canSelectItem = false;
         }
 
-        const tabStripItems = owner.tabStrip && owner.tabStrip.items;
+        const tabStrip = owner.tabStrip;
+        const tabStripItems = tabStrip && tabStrip.items;
+
         if (tabStripItems && tabStripItems[selectedIndex]) {
             tabStripItems[selectedIndex]._emit(TabStripItem.tapEvent);
+            tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: selectedIndex });
         }
 
         return shouldSelectItem;
@@ -856,7 +860,7 @@ export class Tabs extends TabsBase {
             if (!this.tabStrip._hasImage) {
                 this.tabStrip._hasImage = !!image;
             }
-    
+
             if (!this.tabStrip._hasTitle) {
                 this.tabStrip._hasTitle = !!title;
             }
@@ -907,7 +911,7 @@ export class Tabs extends TabsBase {
 
             if (is && is.ios) {
                 image = is.ios;
-                
+
                 if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
                     image = this.getFixedSizeIcon(image);
                 }
@@ -927,7 +931,7 @@ export class Tabs extends TabsBase {
     private getFixedSizeIcon(image: UIImage): UIImage {
         const inWidth = image.size.width;
         const inHeight = image.size.height;
-        
+
         const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
 
         const widthPts = iconSpecSize.width;