fix(bottomnavigationbar): initial selectedTabIndex fix

Author: farfromrefug

demo-vue/app/examples/BottomNavigationBar.vue

@@ -18,6 +18,7 @@
                 row="1"
                 activeColor="blue"
                 inactiveColor="green"
+                selectedTabIndex="2"
                  class="mdi"
                 @loaded="onbottomNavigationBarLoaded"
                 @tabPressed="onBottomNavigationTabPressed"

src/bottomnavigationbar/bottomnavigationbar-common.ts

@@ -1,4 +1,4 @@
-import { CSSType, Color, CssProperty, EventData, ImageSource, Property, Style, View, booleanConverter } from '@nativescript/core';
+import { CSSType, CoercibleProperty, Color, CssProperty, EventData, ImageSource, Property, Style, View, booleanConverter } from '@nativescript/core';
 import { cssProperty } from '@nativescript-community/ui-material-core';
 
 /**
@@ -47,6 +47,32 @@ export enum TitleVisibility {
     never = 2
 }
 
+export const selectedTabIndexProperty = new CoercibleProperty<BottomNavigationBarBase, number>({
+    name: 'selectedTabIndex',
+    defaultValue: -1,
+    affectsLayout: global.isIOS,
+    valueChanged: (target, oldValue, newValue) => {
+        target.onSelectedTabIndexChanged(oldValue, newValue);
+    },
+    coerceValue: (target, value) => {
+        const items = target.items;
+        if (items) {
+            const max = items.length - 1;
+            if (value < 0) {
+                value = 0;
+            }
+            if (value > max) {
+                value = max;
+            }
+        } else {
+            value = -1;
+        }
+
+        return value;
+    },
+    valueConverter: (v) => parseInt(v, 10)
+});
+
 @CSSType('BottomNavigationBar')
 export abstract class BottomNavigationBarBase extends View {
     static tabPressedEvent = 'tabPressed';
@@ -58,7 +84,7 @@ export abstract class BottomNavigationBarBase extends View {
     @cssProperty badgeColor: Color;
     @cssProperty badgeTextColor: Color;
 
-    selectedTabIndex = 0;
+    selectedTabIndex: number;
     titleVisibility: TitleVisibility = TitleVisibility.always;
     autoClearBadge: boolean;
 
@@ -98,15 +124,7 @@ export abstract class BottomNavigationBarBase extends View {
     }
 
     _emitTabSelected(index: number) {
-        const eventData: TabSelectedEventData = {
-            eventName: BottomNavigationBarBase.tabSelectedEvent,
-            object: this,
-            oldIndex: this.selectedTabIndex,
-            newIndex: index
-        };
-        this.selectedTabIndex = index;
-        this.notify(eventData);
-
+        this.onSelectedTabIndexChanged(this.selectedTabIndex, index);
         if (this.autoClearBadge) {
             this.removeBadge(index);
         }
@@ -138,8 +156,23 @@ export abstract class BottomNavigationBarBase extends View {
         this._items[index] && this._items[index].removeBadge();
     }
 
+    [selectedTabIndexProperty.setNative](value: number) {
+        this.selectTab(value);
+    }
+
     protected abstract selectTabNative(index: number): void;
     protected abstract createTabs(tabs: BottomNavigationTabBase[] | undefined): void;
+
+    public onSelectedTabIndexChanged(oldIndex: number, newIndex: number): void {
+        this.selectedTabIndex = newIndex;
+        // to be overridden in platform specific files
+        this.notify({
+            eventName: BottomNavigationBarBase.tabSelectedEvent,
+            object: this,
+            oldIndex,
+            newIndex
+        } as TabSelectedEventData);
+    }
 }
 
 export const tabsProperty = new Property<BottomNavigationBarBase, BottomNavigationTabBase[]>({
@@ -195,6 +228,7 @@ export const badgeTextColorCssProperty = new CssProperty<Style, Color>({
     valueConverter: (v) => new Color(v)
 });
 badgeTextColorCssProperty.register(Style);
+selectedTabIndexProperty.register(BottomNavigationBarBase);
 
 // Bottom Navigation Tab
 

src/bottomnavigationbar/bottomnavigationbar.android.ts

@@ -1,16 +1,14 @@
-import { getFullColorStateList, state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
-import { Color, fontInternalProperty, ImageSource, Utils } from '@nativescript/core';
+import { state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
+import { Color, ImageSource, Utils } from '@nativescript/core';
 import {
     BottomNavigationBarBase,
     BottomNavigationTabBase,
     TitleVisibility,
     activeColorCssProperty,
-    badgeColorCssProperty,
-    badgeTextColorCssProperty,
+    iconProperty,
     inactiveColorCssProperty,
     tabsProperty,
-    titleVisibilityProperty,
-    iconProperty
+    titleVisibilityProperty
 } from './bottomnavigationbar-common';
 
 // Types shortcuts
@@ -122,6 +120,7 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
         // Create the tabs before setting the default values for each tab
         // We call this method here to create the tabs defined in the xml
         this.createTabs(this._items);
+        this.selectTabNative(this.selectedTabIndex);
     }
     disposeNativeView(): void {
         this.nativeViewProtected.setOnNavigationItemReselectedListener(null);
@@ -205,8 +204,8 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
         if (bottomNavigationTabs.size() === 0) {
             return;
         }
-
-        this.nativeView.setSelectedItemId(index);
+        this.nativeViewProtected.setSelectedItemId(index);
+        this.selectedTabIndex = index;
     }
 }
 

src/bottomnavigationbar/bottomnavigationbar.ios.ts

@@ -7,10 +7,10 @@ import {
     activeColorCssProperty,
     badgeColorCssProperty,
     badgeTextColorCssProperty,
+    iconProperty,
     inactiveColorCssProperty,
     tabsProperty,
-    titleVisibilityProperty,
-    iconProperty
+    titleVisibilityProperty
 } from './bottomnavigationbar-common';
 
 @NativeClass
@@ -154,6 +154,7 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
         this.nativeViewProtected.items = new NSArray({ array: bottomNavigationTabs });
 
         // TODO: this is for he v8 runtime. Should not have to need this setTimeout(), find better way.
+        this.selectTabNative(this.selectedTabIndex);
         setTimeout(() => {
             this.nativeViewProtected.selectedItem = this.nativeViewProtected.items[this.selectedTabIndex];
         }, 0);