fix(tabs): ios allow custom positioning with iosCustomPositioning

Author: farfromrefug

src/bottom-navigation/index.d.ts

@@ -44,6 +44,11 @@ export class BottomNavigation extends TabNavigationBase {
      */
     selectedIndex: number;
 
+    /**
+     * Allow custom positioning of Tabs within another view
+     */
+    public iosCustomPositioning: boolean;
+
     /**
      * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
      */
@@ -59,7 +64,7 @@ export class BottomNavigation extends TabNavigationBase {
      */
     public static selectedIndexChangedEvent: string;
 
-    /** 
+    /**
      * @hidden
      * 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").
@@ -73,7 +78,6 @@ export class BottomNavigation extends TabNavigationBase {
      */
     on(event: 'selectedIndexChanged', callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
 
-
     // parameter to allow the bottom-navigation to be positioned correcly within layouts and thus not be full size
     // be careful it will then be influenced by safeArea. Default is false
     iosCustomPositioning: boolean;

src/tabs/tabs.d.ts

@@ -44,6 +44,11 @@ export class Tabs extends TabNavigationBase {
      */
     tabsPosition: 'top' | 'bottom';
 
+    /**
+     * Allow custom positioning of Tabs within another view
+     */
+    public iosCustomPositioning: boolean;
+
     /**
      * Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Defaults to "justified"
      * Valid values are:

src/tabs/tabs.ios.ts

@@ -1,5 +1,5 @@
 import { themer } from '@nativescript-community/ui-material-core';
-import { Color, Device, Font, Frame, IOSHelper, ImageSource, Trace, Utils, View, ViewBase } from '@nativescript/core';
+import { Color, Device, Font, Frame, IOSHelper, ImageSource, Property, Trace, Utils, View, ViewBase, booleanConverter } from '@nativescript/core';
 import { TabsBase, swipeEnabledProperty } from './tabs-common';
 
 import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-navigation-base';
@@ -424,7 +424,7 @@ function updateBackgroundPositions(tabStrip: TabStrip, tabStripItem: TabStripIte
     }
     let bgView = (tabStripItem as any).bgView;
     const index = tabStripItem._index;
-    const width = tabStrip.nativeView.frame.size.width / (tabStrip.items.filter(s=>s._index!== undefined).length);
+    const width = tabStrip.nativeView.frame.size.width / tabStrip.items.filter((s) => s._index !== undefined).length;
     const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
     if (!bgView) {
         bgView = UIView.alloc().initWithFrame(frame);
@@ -466,6 +466,12 @@ function updateTitleAndIconPositions(tabStripItem: TabStripItem, tabBarItem: UIT
     }
 }
 
+export const iosCustomPositioningProperty = new Property<Tabs, boolean>({
+    name: 'iosCustomPositioning',
+    defaultValue: false,
+
+    valueConverter: booleanConverter
+});
 export class Tabs extends TabsBase {
     public nativeViewProtected: UIView;
     public selectedIndex: number;
@@ -494,6 +500,7 @@ export class Tabs extends TabsBase {
     public _animateNextChange = true;
     private _selectionIndicatorColor: Color;
     private _rippleColor: Color;
+    public iosCustomPositioning: boolean;
 
     constructor() {
         super();
@@ -548,11 +555,15 @@ export class Tabs extends TabsBase {
     }
 
     public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
-        //
+        if (this.iosCustomPositioning) {
+            super.layoutNativeView(left, top, right, bottom);
+        }
     }
 
     public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
-        //
+        if (this.iosCustomPositioning) {
+            super._setNativeViewFrame(nativeView, frame);
+        }
     }
 
     public onSelectedIndexChanged(oldIndex: number, newIndex: number): void {
@@ -1295,3 +1306,4 @@ export class Tabs extends TabsBase {
         }
     }
 }
+iosCustomPositioningProperty.register(Tabs);