From f00b370dbb1d67095df8e186c6e99b2b5603c000 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Fri, 26 Jul 2019 13:53:55 +0300
Subject: [PATCH] fix(tabs): tab bar not visible when nested in layout (#7544)

---
 e2e/ui-tests-app/app/tabs/main-page.ts        |  2 +
 .../tabs/nested-bottom-navigation-page.xml    | 39 ++++++++
 .../app/tabs/nested-layout-page.xml           | 26 +++++
 e2e/ui-tests-app/app/tabs/tabs-page.xml       | 63 +------------
 tns-core-modules/ui/tabs/tabs.ios.ts          | 94 +++----------------
 5 files changed, 84 insertions(+), 140 deletions(-)
 create mode 100644 e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/nested-layout-page.xml

diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
index 65d381991..17acc66e8 100644
--- a/e2e/ui-tests-app/app/tabs/main-page.ts
+++ b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -27,6 +27,8 @@ export function loadExamples() {
     examples.set("tabs-position", "tabs/tabs-position-page");
     examples.set("tabs-binding", "tabs/tabs-binding-page");
     examples.set("font-icons", "tabs/font-icons-page");
+    examples.set("nested-layout", "tabs/nested-layout-page");
+    examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
 
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml b/e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml
new file mode 100644
index 000000000..c2e750418
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/nested-bottom-navigation-page.xml
@@ -0,0 +1,39 @@
+<Page class="page">
+
+    <ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
+    </ActionBar>
+
+    <BottomNavigation>
+      <TabStrip>
+          <TabStripItem title="First"></TabStripItem>
+          <TabStripItem title="Second"></TabStripItem>
+      </TabStrip>
+  
+      <TabContentItem>
+          <Tabs>
+            <TabStrip backgroundColor="palevioletred">
+                <TabStripItem title="First"></TabStripItem>
+                <TabStripItem title="Second"></TabStripItem>
+            </TabStrip>
+        
+            <TabContentItem>
+                <GridLayout backgroundColor="skyblue">
+                  <Label text="First View"/>
+                </GridLayout>
+            </TabContentItem>
+        
+            <TabContentItem>
+                <GridLayout backgroundColor="gold">
+                  <Label text="Second View" />
+                </GridLayout>
+            </TabContentItem>
+          </Tabs>
+      </TabContentItem>
+  
+      <TabContentItem>
+          <GridLayout>
+            <Label text="Second View" />
+          </GridLayout>
+      </TabContentItem>
+    </BottomNavigation>
+  </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/nested-layout-page.xml b/e2e/ui-tests-app/app/tabs/nested-layout-page.xml
new file mode 100644
index 000000000..922365fe3
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/nested-layout-page.xml
@@ -0,0 +1,26 @@
+<Page class="page">
+
+    <ActionBar title="Tabs nested in Layout" icon="" class="action-bar">
+    </ActionBar>
+  
+    <GridLayout>
+      <Tabs>
+        <TabStrip backgroundColor="palevioletred">
+            <TabStripItem title="First"></TabStripItem>
+            <TabStripItem title="Second"></TabStripItem>
+        </TabStrip>
+    
+        <TabContentItem>
+            <GridLayout backgroundColor="skyblue">
+              <Label text="First View" />
+            </GridLayout>
+        </TabContentItem>
+    
+        <TabContentItem>
+            <GridLayout backgroundColor="gold">
+              <Label text="Second View" />
+            </GridLayout>
+        </TabContentItem>
+      </Tabs>
+    </GridLayout>
+  </Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/tabs-page.xml b/e2e/ui-tests-app/app/tabs/tabs-page.xml
index e16c9aa92..865a806fa 100644
--- a/e2e/ui-tests-app/app/tabs/tabs-page.xml
+++ b/e2e/ui-tests-app/app/tabs/tabs-page.xml
@@ -3,87 +3,34 @@
   <ActionBar title="Tabs" 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 -->
-  <Tabs id="tabsNav" automationText="tabNavigation"  >
-    <TabStrip>
+  <Tabs id="tabsNav" automationText="tabNavigation">
+    <TabStrip backgroundColor="palevioletred">
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
         <Label text="News" />
       </TabStripItem>
-      <!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
       <TabStripItem>
-        <!-- <Image src="res://icon" /> -->
         <Label text="Places" />
       </TabStripItem>
-      <!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
     </TabStrip>
 
     <TabContentItem>
-      <StackLayout backgroundColor="blue">
+      <StackLayout backgroundColor="skyblue">
         <Label text="First View"/>
         <Button tap="goToSecond" text="go to second" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
-      <StackLayout backgroundColor="red">
+      <StackLayout backgroundColor="gold">
         <Label text="Second View"/>
         <Button tap="goToFirst" text="go to first" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
-      <StackLayout backgroundColor="green">
+      <StackLayout backgroundColor="olive">
         <Label text="First View"/>
         <Button tap="goToSecond" text="go to second" />
       </StackLayout>
     </TabContentItem>
-    <!-- <TabContentItem>
-      <StackLayout>
-        <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
-      </StackLayout>
-    </TabContentItem>
-    <TabContentItem>
-      <StackLayout>
-        <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
-      </StackLayout>
-    </TabContentItem> -->
   </Tabs>
-
-  <!-- =============================================================================================== -->
-
-  <!-- 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
diff --git a/tns-core-modules/ui/tabs/tabs.ios.ts b/tns-core-modules/ui/tabs/tabs.ios.ts
index c3202c310..f85baf621 100644
--- a/tns-core-modules/ui/tabs/tabs.ios.ts
+++ b/tns-core-modules/ui/tabs/tabs.ios.ts
@@ -111,14 +111,23 @@ class UIPageViewControllerImpl extends UIPageViewController {
 
     public viewDidLayoutSubviews(): void {
         super.viewDidLayoutSubviews();
-
         const owner = this._owner.get();
+        if (!owner) {
+            return;
+        }
+
         const tabsPosition = owner.tabsPosition;
+        const parent = owner.parent;
 
         let tabBarTop = this.view.safeAreaInsets.top;
         let tabBarHeight = this.tabBar.frame.size.height;
         let scrollViewTop = this.tabBar.frame.size.height;
-        let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + this.view.safeAreaInsets.bottom;
+        let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height;
+
+        if (parent) {
+            // TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
+            tabBarTop = Math.max(this.view.safeAreaInsets.top, owner.parent.nativeView.safeAreaInsets.top);
+        }
 
         if (tabsPosition === "bottom") {
             tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - this.view.safeAreaInsets.bottom;
@@ -126,45 +135,7 @@ class UIPageViewControllerImpl extends UIPageViewController {
             scrollViewHeight = this.view.frame.size.height - this.view.safeAreaInsets.bottom;
         }
 
-        this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight); //this.view.safeAreaLayoutGuide.layoutFrame;
-        // this.additionalSafeAreaInsets = new UIEdgeInsets({ top: this.tabBar.frame.size.height, left: 0, bottom: 0, right: 0 });
-        // const tabBar = MDCTabBar.alloc().initWithFrame(this.view.safeAreaLayoutGuide.layoutFrame);
-
-        // tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        // ]);
-
-        // tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
-        // tabBar.tintColor = UIColor.greenColor;
-        // tabBar.barTintColor = UIColor.yellowColor;
-        // tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
-        // tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
-        // tabBar.sizeToFit();
-        // this.view.addSubview(tabBar);
-
-        // this.view.bringSubviewToFront(tabBar);
-
-        // const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
-        // tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0),
-        //     UITabBarItem.alloc().initWithTitleImageTag("Test", null, 0)
-        // ]);
-
-        // tabBar.itemAppearance = MDCTabBarItemAppearance.Titles;
-        // tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
-        // tabBar.sizeToFit();
-        // this.view.addSubview(tabBar);
+        this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
 
         const subViews: NSArray<UIView> = this.view.subviews;
         let scrollView: UIScrollView = null;
@@ -192,47 +163,6 @@ class UIPageViewControllerImpl extends UIPageViewController {
 
             scrollView.frame = CGRectMake(this.view.safeAreaInsets.left, scrollViewTop, this.view.bounds.size.width, scrollViewHeight); //this.view.bounds;
         }
-
-        // if (mdcBar) {
-        //     mdcBar.frame = this.view.bounds;
-        // }
-
-        // const owner = this.owner.get();
-        // if (owner) {
-        //     if (majorVersion >= 11) {
-        //         // Handle nested UILayoutViewController safe area application.
-        //         // Currently, UILayoutViewController can be nested only in a TabView.
-        //         // The TabView itself is handled by the OS, so we check the TabView's parent (usually a Page, but can be a Layout).
-        //         const tabViewItem = owner.parent;
-        //         const tabView = tabViewItem && tabViewItem.parent;
-        //         let parent = tabView && tabView.parent;
-
-        //         // Handle Angular scenario where TabView is in a ProxyViewContainer
-        //         // It is possible to wrap components in ProxyViewContainers indefinitely
-        //         // Not using instanceof ProxyViewContainer to avoid circular dependency
-        //         // TODO: Try moving UILayoutViewController out of view module
-        //         while (parent && !parent.nativeViewProtected) {
-        //             parent = parent.parent;
-        //         }
-
-        //         if (parent) {
-        //             const parentPageInsetsTop = parent.nativeViewProtected.safeAreaInsets.top;
-        //             const currentInsetsTop = this.view.safeAreaInsets.top;
-        //             const additionalInsetsTop = Math.max(parentPageInsetsTop - currentInsetsTop, 0);
-
-        //             const parentPageInsetsBottom = parent.nativeViewProtected.safeAreaInsets.bottom;
-        //             const currentInsetsBottom = this.view.safeAreaInsets.bottom;
-        //             const additionalInsetsBottom = Math.max(parentPageInsetsBottom - currentInsetsBottom, 0);
-
-        //             if (additionalInsetsTop > 0 || additionalInsetsBottom > 0) {
-        //                 const additionalInsets = new UIEdgeInsets({ top: additionalInsetsTop, left: 0, bottom: additionalInsetsBottom, right: 0 });
-        //                 this.additionalSafeAreaInsets = additionalInsets;
-        //             }
-        //         }
-        //     }
-
-        //     layoutView(this, owner);
-        // }
     }
 }