feat(tab-content-view): change tabContentItem to View (#7629)

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts

@@ -52,7 +52,7 @@ export class BottomNavigationViewModel extends Observable {
         const gridlayout = new GridLayout();
         label.text = "Content Item " + index;
         gridlayout.addChild(label);
-        contentItem.view = gridlayout;
+        contentItem.content = gridlayout;
 
         return contentItem;
     }

e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts

@@ -53,7 +53,7 @@ export class TabsBindingNavigationViewModel extends Observable {
         const gridlayout = new GridLayout();
         label.text = "Content Item " + index;
         gridlayout.addChild(label);
-        contentItem.view = gridlayout;
+        contentItem.content = gridlayout;
 
         return contentItem;
     }

tests/app/ui/bottom-navigation/bottom-navigation-navigation-tests.ts

@@ -23,7 +23,7 @@ function _createContentItems(count: number): Array<TabContentItem> {
         const label = new Label();
         label.text = "Tab " + i;
         const tabEntry = new TabContentItem();
-        tabEntry.view = label;
+        tabEntry.content = label;
         items.push(tabEntry);
     }
 
@@ -101,12 +101,12 @@ export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
         let items = Array<TabContentItem>();
         let tabViewitem = new TabContentItem();
         // tabViewitem.title = "Item1";
-        tabViewitem.view = _createFrameView();
+        tabViewitem.content = _createFrameView();
         items.push(tabViewitem);
 
         let tabViewitem2 = new TabContentItem();
         // tabViewitem2.title = "Item2";
-        tabViewitem2.view = _createFrameView();
+        tabViewitem2.content = _createFrameView();
         items.push(tabViewitem2);
 
         tabView.items = items;
@@ -145,7 +145,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
         let items = Array<TabContentItem>();
         let tabViewitem = new TabContentItem();
         // tabViewitem.title = "List";
-        tabViewitem.view = _createListView();
+        tabViewitem.content = _createListView();
         items.push(tabViewitem);
 
         let label = new Label();
@@ -155,7 +155,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
         aboutLayout.addChild(label);
         tabViewitem = new TabContentItem();
         // tabViewitem.title = "About";
-        tabViewitem.view = aboutLayout;
+        tabViewitem.content = aboutLayout;
         items.push(tabViewitem);
 
         tabView.items = items;
@@ -184,7 +184,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
 
     TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
 
-    TKUnit.assert(tabView.items[0].view instanceof ListView, "ListView should be created when navigating back to the main page.");
+    TKUnit.assert(tabView.items[0].content instanceof ListView, "ListView should be created when navigating back to the main page.");
 }
 
 function tabViewIsFullyLoaded(tabView: BottomNavigation): boolean {
@@ -232,8 +232,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
     }
 
     tabView.items.forEach((item, i) => {
-        item.view.on("loaded", createLoadedFor(i));
+        item.content.on("loaded", createLoadedFor(i));
-        item.view.on("unloaded", createUnloadedFor(i));
+        item.content.on("unloaded", createUnloadedFor(i));
     });
 
     const tabViewPage = new Page();
@@ -252,8 +252,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
     TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
 
     for (let i = 0; i < itemCount; i++) {
-        tabView.items[i].view.off("loaded");
+        tabView.items[i].content.off("loaded");
-        tabView.items[i].view.off("unloaded");
+        tabView.items[i].content.off("unloaded");
     }
 
     helper.goBack();
@@ -267,7 +267,7 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
 
 function _clickTheFirstButtonInTheListViewNatively(tabView: BottomNavigation) {
     if (tabView.android) {
-        const androidListView = <android.widget.ListView>tabView.items[0].view.nativeView;
+        const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
         // var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
         // var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
         var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);

tests/app/ui/bottom-navigation/bottom-navigation-root-tests.ts

@@ -47,7 +47,7 @@ function createFrame(i: number, page: Page) {
 function createTabItem(i: number, frame: Frame) {
     const tabEntry = new TabContentItem();
     // tabEntry.title = "Tab " + i;
-    tabEntry.view = frame;
+    tabEntry.content = frame;
     tabEntry["index"] = i;
 
     return tabEntry;

tests/app/ui/bottom-navigation/bottom-navigation-tests.ts

@@ -27,7 +27,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
             const label = new Label();
             label.text = "Tab " + i;
             const tabEntry = new TabContentItem();
-            tabEntry.view = label;
+            tabEntry.content = label;
             items.push(tabEntry);
         }
 
@@ -208,7 +208,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
         TKUnit.assertThrows(() => {
             let item = new TabContentItem();
             // item.title = "Tab 0";
-            item.view = undefined;
+            item.content = undefined;
             tabView.items = [item];
 
         }, "Binding TabNavigation to a TabItem with undefined view should throw.");
@@ -221,7 +221,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
         TKUnit.assertThrows(() => {
             let item = new TabContentItem();
             // item.title = "Tab 0";
-            item.view = null;
+            item.content = null;
             tabView.items = [item];
 
         }, "Binding TabNavigation to a TabItem with null view should throw.");

tests/app/ui/tabs/tabs-navigation-tests.ts

@@ -23,7 +23,7 @@ function _createContentItems(count: number): Array<TabContentItem> {
         const label = new Label();
         label.text = "Tab " + i;
         const tabEntry = new TabContentItem();
-        tabEntry.view = label;
+        tabEntry.content = label;
         items.push(tabEntry);
     }
 
@@ -101,12 +101,12 @@ export function testBackNavigationToTabViewWithNestedFramesShouldWork() {
         let items = Array<TabContentItem>();
         let tabViewitem = new TabContentItem();
         // tabViewitem.title = "Item1";
-        tabViewitem.view = _createFrameView();
+        tabViewitem.content = _createFrameView();
         items.push(tabViewitem);
 
         let tabViewitem2 = new TabContentItem();
         // tabViewitem2.title = "Item2";
-        tabViewitem2.view = _createFrameView();
+        tabViewitem2.content = _createFrameView();
         items.push(tabViewitem2);
 
         tabView.items = items;
@@ -145,7 +145,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
         let items = Array<TabContentItem>();
         let tabViewitem = new TabContentItem();
         // tabViewitem.title = "List";
-        tabViewitem.view = _createListView();
+        tabViewitem.content = _createListView();
         items.push(tabViewitem);
 
         let label = new Label();
@@ -155,7 +155,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
         aboutLayout.addChild(label);
         tabViewitem = new TabContentItem();
         // tabViewitem.title = "About";
-        tabViewitem.view = aboutLayout;
+        tabViewitem.content = aboutLayout;
         items.push(tabViewitem);
 
         tabView.items = items;
@@ -184,7 +184,7 @@ export function testWhenNavigatingBackToANonCachedPageContainingATabViewWithALis
 
     TKUnit.waitUntilReady(() => topFrame.currentPage === rootPage);
 
-    TKUnit.assert(tabView.items[0].view instanceof ListView, "ListView should be created when navigating back to the main page.");
+    TKUnit.assert(tabView.items[0].content instanceof ListView, "ListView should be created when navigating back to the main page.");
 }
 
 function tabViewIsFullyLoaded(tabView: Tabs): boolean {
@@ -232,8 +232,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
     }
 
     tabView.items.forEach((item, i) => {
-        item.view.on("loaded", createLoadedFor(i));
+        item.content.on("loaded", createLoadedFor(i));
-        item.view.on("unloaded", createUnloadedFor(i));
+        item.content.on("unloaded", createUnloadedFor(i));
     });
 
     const tabViewPage = new Page();
@@ -252,8 +252,8 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
     TKUnit.assertEqual(topFrame.currentPage, tabViewPage);
 
     for (let i = 0; i < itemCount; i++) {
-        tabView.items[i].view.off("loaded");
+        tabView.items[i].content.off("loaded");
-        tabView.items[i].view.off("unloaded");
+        tabView.items[i].content.off("unloaded");
     }
 
     helper.goBack();
@@ -267,7 +267,7 @@ export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
 
 function _clickTheFirstButtonInTheListViewNatively(tabView: Tabs) {
     if (tabView.android) {
-        const androidListView = <android.widget.ListView>tabView.items[0].view.nativeView;
+        const androidListView = <android.widget.ListView>tabView.items[0].content.nativeView;
         // var viewPager: android.support.v4.view.ViewPager = (<any>tabView)._viewPager;
         // var androidListView = <android.widget.ListView>viewPager.getChildAt(0);
         var stackLayout = <org.nativescript.widgets.StackLayout>androidListView.getChildAt(0);

tests/app/ui/tabs/tabs-root-tests.ts

@@ -35,7 +35,7 @@ function createFrame(i: number, page: Page) {
 function createTabItem(i: number, frame: Frame) {
     const tabEntry = new TabContentItem();
     // tabEntry.title = "Tab " + i;
-    tabEntry.view = frame;
+    tabEntry.content = frame;
     tabEntry["index"] = i;
 
     return tabEntry;

tests/app/ui/tabs/tabs-tests.ts

@@ -27,7 +27,7 @@ export class TabsTest extends UITest<Tabs> {
             const label = new Label();
             label.text = "Tab " + i;
             const tabEntry = new TabContentItem();
-            tabEntry.view = label;
+            tabEntry.content = label;
             items.push(tabEntry);
         }
 
@@ -210,7 +210,7 @@ export class TabsTest extends UITest<Tabs> {
         TKUnit.assertThrows(() => {
             let item = new TabContentItem();
             // item.title = "Tab 0";
-            item.view = undefined;
+            item.content = undefined;
             tabView.items = [item];
 
         }, "Binding TabNavigation to a TabItem with undefined view should throw.");
@@ -223,7 +223,7 @@ export class TabsTest extends UITest<Tabs> {
         TKUnit.assertThrows(() => {
             let item = new TabContentItem();
             // item.title = "Tab 0";
-            item.view = null;
+            item.content = null;
             tabView.items = [item];
 
         }, "Binding TabNavigation to a TabItem with null view should throw.");

tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts

@@ -85,7 +85,7 @@ function initializeNativeClasses() {
         public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
             const tabItem = this.tab.items[this.index];
 
-            return tabItem.view.nativeViewProtected;
+            return tabItem.nativeViewProtected;
         }
     }
 
@@ -211,11 +211,10 @@ function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets
     return tabItemSpec;
 }
 
-function setElevation(grid: org.nativescript.widgets.GridLayout, bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
+function setElevation(bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
     const compat = <any>androidx.core.view.ViewCompat;
     if (compat.setElevation) {
         const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
-        compat.setElevation(grid, val);
         compat.setElevation(bottomNavigationBar, val);
     }
 }
@@ -288,7 +287,7 @@ export class BottomNavigation extends TabNavigationBase {
         nativeView.addView(bottomNavigationBar);
         (<any>nativeView).bottomNavigationBar = bottomNavigationBar;
 
-        setElevation(nativeView, bottomNavigationBar);
+        setElevation(bottomNavigationBar);
 
         const primaryColor = ad.resources.getPaletteColor(PRIMARY_COLOR, context);
         if (primaryColor) {
@@ -341,12 +340,12 @@ export class BottomNavigation extends TabNavigationBase {
         toUnload.forEach(index => {
             const item = items[index];
             if (items[index]) {
-                item.unloadView(item.view);
+                item.unloadView(item.content);
             }
         });
 
         const newItem = items[newIndex];
-        const selectedView = newItem && newItem.view;
+        const selectedView = newItem && newItem.content;
         if (selectedView instanceof Frame) {
             selectedView._pushInFrameStackRecursive();
         }
@@ -354,7 +353,7 @@ export class BottomNavigation extends TabNavigationBase {
         toLoad.forEach(index => {
             const item = items[index];
             if (this.isLoaded && items[index]) {
-                item.loadView(item.view);
+                item.loadView(item.content);
             }
         });
     }

tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts

@@ -260,7 +260,7 @@ export class BottomNavigation extends TabNavigationBase {
         super.onLoaded();
 
         const selectedIndex = this.selectedIndex;
-        const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].view;
+        const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
         if (selectedView instanceof Frame) {
             selectedView._pushInFrameStackRecursive();
         }
@@ -295,18 +295,18 @@ export class BottomNavigation extends TabNavigationBase {
         const oldItem = items[oldIndex];
         if (oldItem) {
             oldItem.canBeLoaded = false;
-            oldItem.unloadView(oldItem.view);
+            oldItem.unloadView(oldItem.content);
         }
 
         const newItem = items[newIndex];
         if (newItem && this.isLoaded) {
-            const selectedView = items[newIndex].view;
+            const selectedView = items[newIndex].content;
             if (selectedView instanceof Frame) {
                 selectedView._pushInFrameStackRecursive();
             }
 
             newItem.canBeLoaded = true;
-            newItem.loadView(newItem.view);
+            newItem.loadView(newItem.content);
         }
 
         super.onSelectedIndexChanged(oldIndex, newIndex);
@@ -463,7 +463,7 @@ export class BottomNavigation extends TabNavigationBase {
     }
 
     private getViewController(item: TabContentItem): UIViewController {
-        let newController: UIViewController = item.view ? item.view.viewController : null;
+        let newController: UIViewController = item.content ? item.content.viewController : null;
 
         if (newController) {
             (<any>item).setViewController(newController, newController.view);
@@ -471,17 +471,17 @@ export class BottomNavigation extends TabNavigationBase {
             return newController;
         }
 
-        if (item.view.ios instanceof UIViewController) {
+        if (item.content.ios instanceof UIViewController) {
-            newController = item.view.ios;
+            newController = item.content.ios;
             (<any>item).setViewController(newController, newController.view);
-        } else if (item.view.ios && item.view.ios.controller instanceof UIViewController) {
+        } else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
-            newController = item.view.ios.controller;
+            newController = item.content.ios.controller;
             (<any>item).setViewController(newController, newController.view);
         } else {
-            newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.view)) as UIViewController;
+            newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
-            newController.view.addSubview(item.view.nativeViewProtected);
+            newController.view.addSubview(item.content.nativeViewProtected);
-            item.view.viewController = newController;
+            item.content.viewController = newController;
-            (<any>item).setViewController(newController, item.view.nativeViewProtected);
+            (<any>item).setViewController(newController, item.content.nativeViewProtected);
         }
 
         return newController;

tns-core-modules/ui/tab-navigation-base/tab-content-item/tab-content-item-common.ts

@@ -5,38 +5,15 @@ import { TabNavigationBase } from "../tab-navigation-base";
 
 // Requires
 import { View, ViewBase, CSSType } from "../../core/view";
-
+import { ContentView } from "../../content-view";
 export const traceCategory = "TabView";
 
 @CSSType("TabContentItem")
-export abstract class TabContentItemBase extends ViewBase implements TabContentItemDefinition, AddChildFromBuilder {
+export abstract class TabContentItemBase extends ContentView implements TabContentItemDefinition, AddChildFromBuilder {
-    private _view: View;
 
-    public _addChildFromBuilder(name: string, value: any): void {
+    public eachChild(callback: (child: View) => boolean) {
-        if (value instanceof View) {
+        if (this.content) {
-            this.view = value;
+            callback(this.content);
-        }
-    }
-
-    // TODO: Should we rename this to content? Or even better - inherit ContentView???
-    get view(): View {
-        return this._view;
-    }
-    set view(value: View) {
-        if (this._view !== value) {
-            if (this._view) {
-                throw new Error("Changing the view of an already loaded TabContentItem is not currently supported.");
-            }
-
-            this._view = value;
-            this._addView(value);
-        }
-    }
-
-    public eachChild(callback: (child: ViewBase) => boolean) {
-        const view = this._view;
-        if (view) {
-            callback(view);
         }
     }
 

tns-core-modules/ui/tab-navigation-base/tab-content-item/tab-content-item.android.ts

@@ -1,15 +1,16 @@
 // Types
 import { TabContentItem as TabContentItemDefinition } from ".";
 import { TabNavigationBase } from "../tab-navigation-base";
+import { GridLayout } from "../../layouts/grid-layout";
 
 // Requires
 import { TabContentItemBase, traceCategory } from "./tab-content-item-common";
-import { traceEnabled, traceWrite, traceMessageType } from "../../core/view";
+import { View, traceWrite, traceMessageType } from "../../core/view";
 
 export * from "./tab-content-item-common";
 
 export class TabContentItem extends TabContentItemBase {
-    public nativeViewProtected: android.widget.TextView;
+    public nativeViewProtected: org.nativescript.widgets.GridLayout;
     public tabItemSpec: org.nativescript.widgets.TabItemSpec;
     public index: number;
 
@@ -17,6 +18,27 @@ export class TabContentItem extends TabContentItemBase {
         return true;
     }
 
+    public createNativeView() {
+        const layout = new org.nativescript.widgets.GridLayout(this._context);
+        layout.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
+
+        return layout;
+    }
+
+    public initNativeView(): void {
+        super.initNativeView();
+        this.nativeViewProtected.setBackgroundColor(-1); // White color.
+    }
+
+    public _addViewToNativeVisualTree(child: View, atIndex?: number): boolean {
+        // Set the row property for the child
+        if (this.nativeViewProtected && child.nativeViewProtected) {
+                GridLayout.setRow(child, 0);
+        }
+
+        return super._addViewToNativeVisualTree(child, atIndex);
+    }
+
     public disposeNativeView(): void {
         super.disposeNativeView();
         (<TabContentItemDefinition>this).canBeLoaded = false;

tns-core-modules/ui/tab-navigation-base/tab-content-item/tab-content-item.d.ts

@@ -4,16 +4,12 @@
  */ /** */
 
 import { View, ViewBase } from "../../core/view";
+import { ContentView } from "../../content-view";
 
 /**
  * Represents a tab navigation content entry.
  */
-export class TabContentItem extends ViewBase {
+export class TabContentItem extends ContentView {
-    /**
-     * Gets or sets the view of the TabViewItem.
-     */
-    public view: View;
-
     /**
      * @private
      */

tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts

@@ -45,7 +45,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
     get _selectedView(): View {
         let selectedIndex = this.selectedIndex;
 
-        return selectedIndex > -1 ? this.items[selectedIndex].view : null;
+        return selectedIndex > -1 ? this.items[selectedIndex].content : null;
     }
 
     get _childrenCount(): number {
@@ -72,7 +72,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         const items = this.items;
         if (items) {
             items.forEach((item, i) => {
-                callback(item.view);
+                callback(item.content);
             });
         }
     }
@@ -84,8 +84,8 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
 
         if (newItems) {
             newItems.forEach(item => {
-                if (!item.view) {
+                if (!item.content) {
-                    throw new Error(`TabContentItem must have a view.`);
+                    throw new Error(`TabContentItem must have a content (view).`);
                 }
 
                 this._addView(item);

tns-core-modules/ui/tabs/tabs.android.ts

@@ -82,7 +82,7 @@ function initializeNativeClasses() {
         public onCreateView(inflater: android.view.LayoutInflater, container: android.view.ViewGroup, savedInstanceState: android.os.Bundle): android.view.View {
             const tabItem = this.tab.items[this.index];
 
-            return tabItem.view.nativeViewProtected;
+            return tabItem.nativeViewProtected;
         }
     }
 
@@ -337,11 +337,15 @@ function getDefaultAccentColor(context: android.content.Context): number {
     return defaultAccentColor;
 }
 
-function setElevation(grid: org.nativescript.widgets.GridLayout, tabsBar: org.nativescript.widgets.TabsBar) {
+function setElevation(grid: org.nativescript.widgets.GridLayout, tabsBar: org.nativescript.widgets.TabsBar, tabsPosition: string) {
     const compat = <any>androidx.core.view.ViewCompat;
     if (compat.setElevation) {
         const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
+
+        if (tabsPosition === "top") {
             compat.setElevation(grid, val);
+        }
+
         compat.setElevation(tabsBar, val);
     }
 }
@@ -422,7 +426,7 @@ export class Tabs extends TabsBase {
         nativeView.addView(tabsBar);
         (<any>nativeView).tabsBar = tabsBar;
 
-        setElevation(nativeView, tabsBar);
+        setElevation(nativeView, tabsBar, this.tabsPosition);
 
         if (accentColor) {
             tabsBar.setSelectedIndicatorColors([accentColor]);
@@ -471,12 +475,12 @@ export class Tabs extends TabsBase {
         toUnload.forEach(index => {
             const item = items[index];
             if (items[index]) {
-                item.unloadView(item.view);
+                item.unloadView(item.content);
             }
         });
 
         const newItem = items[newIndex];
-        const selectedView = newItem && newItem.view;
+        const selectedView = newItem && newItem.content;
         if (selectedView instanceof Frame) {
             (<Frame>selectedView)._pushInFrameStackRecursive();
         }
@@ -484,7 +488,7 @@ export class Tabs extends TabsBase {
         toLoad.forEach(index => {
             const item = items[index];
             if (this.isLoaded && items[index]) {
-                item.loadView(item.view);
+                item.loadView(item.content);
             }
         });
     }

tns-core-modules/ui/tabs/tabs.ios.ts

@@ -520,7 +520,7 @@ export class Tabs extends TabsBase {
         super.onLoaded();
 
         const selectedIndex = this.selectedIndex;
-        const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].view;
+        const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
         if (selectedView instanceof Frame) {
             (<Frame>selectedView)._pushInFrameStackRecursive();
         }
@@ -599,12 +599,12 @@ export class Tabs extends TabsBase {
         toUnload.forEach(index => {
             const item = items[index];
             if (items[index]) {
-                item.unloadView(item.view);
+                item.unloadView(item.content);
             }
         });
 
         const newItem = items[newIndex];
-        const selectedView = newItem && newItem.view;
+        const selectedView = newItem && newItem.content;
         if (selectedView instanceof Frame) {
             selectedView._pushInFrameStackRecursive();
         }
@@ -612,7 +612,7 @@ export class Tabs extends TabsBase {
         toLoad.forEach(index => {
             const item = items[index];
             if (this.isLoaded && items[index]) {
-                item.loadView(item.view);
+                item.loadView(item.content);
             }
         });
     }
@@ -687,7 +687,7 @@ export class Tabs extends TabsBase {
     // }
 
     public getViewController(item: TabContentItem): UIViewController {
-        let newController: UIViewController = item.view ? item.view.viewController : null;
+        let newController: UIViewController = item.content ? item.content.viewController : null;
 
         if (newController) {
             (<any>item).setViewController(newController, newController.view);
@@ -695,17 +695,17 @@ export class Tabs extends TabsBase {
             return newController;
         }
 
-        if (item.view.ios instanceof UIViewController) {
+        if (item.content.ios instanceof UIViewController) {
-            newController = item.view.ios;
+            newController = item.content.ios;
             (<any>item).setViewController(newController, newController.view);
-        } else if (item.view.ios && item.view.ios.controller instanceof UIViewController) {
+        } else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
-            newController = item.view.ios.controller;
+            newController = item.content.ios.controller;
             (<any>item).setViewController(newController, newController.view);
         } else {
-            newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.view)) as UIViewController;
+            newController = iosView.UILayoutViewController.initWithOwner(new WeakRef(item.content)) as UIViewController;
-            newController.view.addSubview(item.view.nativeViewProtected);
+            newController.view.addSubview(item.content.nativeViewProtected);
-            item.view.viewController = newController;
+            item.content.viewController = newController;
-            (<any>item).setViewController(newController, item.view.nativeViewProtected);
+            (<any>item).setViewController(newController, item.content.nativeViewProtected);
         }
 
         return newController;