fix(bottom-navigation): wrong bar position on android

Author: farfromrefug

src/bottom-navigation/index.android.ts

@@ -2,7 +2,9 @@ import { TabContentItem } from '@nativescript-community/ui-material-core/tab-nav
 import { PRIMARY_COLOR, TabNavigation } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-navigation/index.android';
 import { TabStrip } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip';
 import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip-item';
+import { TabsPosition } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-navigation/index-common';
 import { CSSType, Color, Utils } from '@nativescript/core';
+
 export { TabContentItem, TabStrip, TabStripItem };
 
 interface BottomNavigationBar extends com.nativescript.material.core.BottomNavigationBar {
@@ -26,7 +28,6 @@ function initializeNativeClasses() {
         }
 
         public onSelectedPositionChange(position: number, prevPosition: number): void {
-            console.log('onSelectedPositionChange', position, prevPosition);
             const owner = this.owner;
             if (!owner) {
                 return;
@@ -39,7 +40,6 @@ function initializeNativeClasses() {
             if (!owner) {
                 return false;
             }
-            console.log('onTap', position, owner.onTabsBarTap(position));
             return owner.onTabsBarTap(position);
         }
     }
@@ -49,6 +49,7 @@ function initializeNativeClasses() {
 
 @CSSType('BottomNavigation')
 export class BottomNavigation extends TabNavigation<com.nativescript.material.core.BottomNavigationBar> {
+    tabsPosition = TabsPosition.Bottom;
     protected updateTabsBarItemAt(position: number, itemSpec: com.nativescript.material.core.TabItemSpec) {
         this.mTabsBar.updateItemAt(position, itemSpec);
     }
@@ -65,11 +66,6 @@ export class BottomNavigation extends TabNavigation<com.nativescript.material.co
         initializeNativeClasses();
         const tabsBar = new BottomNavigationBar(context, this);
         const primaryColor = Utils.android.resources.getPaletteColor(PRIMARY_COLOR, context);
-        // const accentColor = getDefaultAccentColor(context);
-        // if (accentColor) {
-        //     tabsBar.setSelectedIndicatorColors([accentColor]);
-        // }
-
         if (primaryColor) {
             tabsBar.setBackgroundColor(primaryColor);
         }

src/core/tab-navigation-base/tab-navigation/index-common.ts

@@ -11,10 +11,15 @@ export namespace knownCollections {
     export const items = 'items';
 }
 
+export enum TabsPosition {
+    Top = 'top',
+    Bottom = 'bottom'
+}
+
 export class TabNavigationBase extends TabNavigationBaseBase implements TabsDefinition {
     public swipeEnabled: boolean;
     public offscreenTabLimit: number;
-    public tabsPosition: 'top' | 'bottom';
+    public tabsPosition: TabsPosition;
     // public iOSTabBarItemsAlignment: IOSTabBarItemsAlignment;
     public animationEnabled: boolean;
     @cssProperty rippleColor: Color;
@@ -34,7 +39,7 @@ export const offscreenTabLimitProperty = new Property<TabNavigationBase, number>
 });
 offscreenTabLimitProperty.register(TabNavigationBase);
 
-export const tabsPositionProperty = new Property<TabNavigationBase, 'top' | 'bottom'>({ name: 'tabsPosition', defaultValue: 'top' });
+export const tabsPositionProperty = new Property<TabNavigationBase, TabsPosition>({ name: 'tabsPosition' });
 tabsPositionProperty.register(TabNavigationBase);
 
 // export type IOSTabBarItemsAlignment = 'leading' | 'justified' | 'center' | 'centerSelected';

src/core/tab-navigation-base/tab-navigation/index.android.ts

@@ -394,6 +394,7 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
     protected mSelectedItemColor: Color;
     protected mUnSelectedItemColor: Color;
     fragments: androidx.fragment.app.Fragment[] = [];
+    protected tabBarLayoutParams: org.nativescript.widgets.CommonLayoutParams;
 
     constructor() {
         super();
@@ -431,6 +432,7 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
         } else {
             nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
             nativeView.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
+            this.tabBarLayoutParams = lp;
         }
 
         nativeView.addView(viewPager);
@@ -482,7 +484,7 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
             const tabsBar = (this.mTabsBar = this.createNativeTabBar(context));
             setElevation(null, tabsBar, this.tabsPosition);
             if (this.tabsPosition !== 'top') {
-                tabsBar.setLayoutParams(this.mViewPager.getLayoutParams());
+                tabsBar.setLayoutParams(this.tabBarLayoutParams);
             }
             nativeView.addView(tabsBar);
             nativeView['tabsBar'] = tabsBar;
@@ -1090,7 +1092,6 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
         // if (traceEnabled()) {
         //     traceWrite("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
         // }
-        console.log('selectedIndexProperty', value, new Error().stack);
         this.mViewPager.setCurrentItem(value, this.animationEnabled);
     }
 

src/core/tab-navigation-base/tab-navigation/index.d.ts

@@ -8,6 +8,7 @@ import { TabNavigationBase } from '../tab-navigation-base';
 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 { TabsPosition } from './index-common';
 export { TabContentItem, TabStrip, TabStripItem };
 /**
  * Represents a swipeable tabs view.
@@ -42,7 +43,7 @@ export abstract class TabNavigation<T = any> extends TabNavigationBase {
     /**
      * Gets or sets the position state of the Tabs.
      */
-    tabsPosition: 'top' | 'bottom';
+    tabsPosition: TabsPosition;
 
     /**
      * Allow custom positioning of Tabs within another view

src/core/tab-navigation-base/tab-navigation/index.ios.ts

@@ -842,7 +842,6 @@ export abstract class TabNavigation<
     }
 
     public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
-        console.log('setTabBarItemFontInternal');
         this.setViewTextAttributes(tabStripItem.label);
     }
 
@@ -851,7 +850,6 @@ export abstract class TabNavigation<
     }
 
     public setTabBarFontInternal(): void {
-        console.log('setTabBarFontInternal');
         const defaultTabItemFontSize = 10;
         const tabItemFontSize = this.tabStrip.style.fontSize || defaultTabItemFontSize;
         const font: UIFont = (this.tabStrip.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));