henrychavez / nativescript-bottom-navigation

Nativescript plugin for Android & iOS to have the bottom navigation bar of Material Design

Nativescript Material Bottom Navigation Bar

Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.

IMPORTANT: This package will be deprecated, this is the last release on this repository, the component will be moved to nativescript-material-components

Contents

1. Installation
2. Usage with Javascript
3. Usage with Angular
4. Usage with Vue
5. Css Styling
6. API

Prerequisites / Requirements

You need the version of NS6 or later to use this plugin.

Installation

tns plugin add nativescript-bottom-navigation

if you want to use the plugin with NS5 and above use the version 1.5.1

tns plugin add nativescript-bottom-navigation@1.5.1

BREAKING CHANGES

• BottomNavigation class now is BottomNavigationBar
• NativescriptBottomNavigationModule now is NativeScriptBottomNavigationBarModule
• res:// should be used to reference icons in the tabs
• The prefix On of the Event interfaces was removed:
  • Example: OnTabPressedEventData now is TabPressedEventData
• The prefix tab of Css properties was removed:
  • Example: tab-active-color now is active-color
• The documentation was updated review it :D

NEW FEATURES

• Badge now are supported using the method: showBadge(index, value)
  • NOTE: if you want to show a badge as a red dot no value should be passed to the function.

Usage

Before start using the plugin you need to add the icons for android & iOS in your App_Resources� directory.

Also you need to change your parent theme from Theme.AppCompat to Theme.MaterialComponents inside your App_Resources/Android/src/main/res/values/styles.xml file.

XML

You can set the tabs using the tabs property

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-bottom-navigation"
      loaded="pageLoaded"
      class="page">
    <GridLayout rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          tabs="{{ tabs }}"
          activeColor="green"
          inactiveColor="red"
          backgroundColor="black"
          tabSelected="tabSelected"
          row="1"
        ></mdc:BottomNavigationBar>
    </GridLayout>
</Page>

import { EventData } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
import {
  BottomNavigationTab,
  TabSelectedEventData,
} from 'nativescript-bottom-navigation';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  page.bindingContext = {
    tabs: [
      new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
      new BottomNavigationTab({
        title: 'Second',
        icon: 'res://ic_view_list',
        isSelectable: false,
      }),
      new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }),
    ],
  };
}

export function tabSelected(args: TabSelectedEventData) {
  console.log('tab selected ' + args.newIndex);
}

or you can add the tabs directly in your xml view

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-bottom-navigation"
      loaded="pageLoaded"
      class="page">
    <GridLayout rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigationBar
          activeColor="green"
          inactiveColor="red"
          backgroundColor="black"
          tabSelected="tabSelected"
          row="1"
        >
          <mdc:BottomNavigationTab title="First" icon="res://ic_home" />
          <mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
          <mdc:BottomNavigationTab title="Third" icon="res://ic_menu" />
        </mdc:BottomNavigationBar>
    </GridLayout>
</Page>

Angular

First you need to include the NativeScriptBottomNavigationBarModule in your app.module.ts�`

import { NativeScriptBottomNavigationBarModule} from "nativescript-bottom-navigation/angular";

@NgModule({
    imports: [
        NativeScriptBottomNavigationBarModule
    ],
    ...
})

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    [tabs]="tabs"
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    (tabSelected)="onBottomNavigationTabSelected($event)"
    (tabPressed)="onBottomNavigationTabPressed($event)"
    row="1"
  ></BottomNavigationBar>
</GridLayout>

or you can declare the BottomNavigationTab in your html directly

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    (tabSelected)="onBottomNavigationTabSelected($event)"
    (tabPressed)="onBottomNavigationTabPressed($event)"
    row="1"
  >
    <BottomNavigationTab
      title="First"
      icon="res://ic_home"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title="Second"
      icon="res://ic_view_list"
      [isSelectable]="false"
    ></BottomNavigationTab>
    <BottomNavigationTab
      title="Third"
      icon="res://ic_menu"
    ></BottomNavigationTab>
  </BottomNavigationBar>
</GridLayout>

Vue

If you want to use this plugin with Vue, do this in your app.js or main.js:

import BottomNavigationBar from 'nativescript-bottom-navigation/vue';

Vue.use(BottomNavigationBar);

This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <label text="content"></label>
  </StackLayout>
  <BottomNavigationBar
    activeColor="red"
    inactiveColor="yellow"
    backgroundColor="black"
    @tabSelected="onBottomNavigationTabSelected"
    row="1"
  >
    <BottomNavigationTab title="First" icon="ic_home" />
    <BottomNavigationTab
      title="Second"
      icon="ic_view_list"
      isSelectable="false"
    />
    <BottomNavigationTab title="Third" icon="ic_menu" />
  </BottomNavigationBar>
</GridLayout>

You can find more information of how to use nativescript plugins with Vue Here!

CSS Styling

You can also use your css file to set or change the activeColor�, inactiveColor & backgroundColor of the Bottom Navigation Bar.

.botom-nav {
  active-color: green;
  inactive-color: black;
  background-color: blue;
}

API

1. BottomNavigationBar
2. BottomNavigationTab

• Properties (bindable): Properties settable through XML/HTML
• Properties (internal): Properties accessible through JS/TS instance
• Events: Event properties settable thew XML/HTML

Bottom Navigation Bar

Properties (bindable)

Property	Required	Default	Type	Description
tabs	true	[]	Array<BottomNavigationTab>	Array containing the tabs for the BottomNavigationBar
titleVisibility	false	TitleVisibility.Selected�	TitleVisibility	Title Visibility for each BottomNavigationTab
activeColor	false	"black"	String	Color of the BottomNavigationTab when it's selected
inactiveColor	false	"gray"	String	Color of the BottomNavigationTab when it's not selected
backgroundColor	false	"white"	String	Color of the BottomNavigation background

Properties (internal)

Property	Default	Type	Description
selectedTabIndex	0	Number	Index of the selected tab
titleVisibility	TitleVisibility.Selected�	TitleVisibility	Title Visibility for each BottomNavigationTab
activeColor	"black"	String	Color of the BottomNavigationTab when it's selected
inactiveColor	"gray"	String	Color of the BottomNavigationTab when it's not selected
backgroundColor	"white"	String	Color of the BottomNavigation background

Events

Name	Type	Description
tabPressed	(args: TabPressedEventData): void	Function fired every time the user tap a tab with isSelectable: false
tabSelected	(args: TabSelectedEventData): void	Function fired every time the user select a new tab
tabReselected	(args: TabReselectedEventData): void	Function fired every time the user select a tab that is already selected

Methods

Property	Type	Description
selectTab(index: number)	void	Select a tab programmatically
showBadge(index: number, value?: number)	void	Show a badge for an specific tab

Bottom Navigation Tab

Properties (bindable)

Property	Required	Default	Type	Description
title	true	null	string	Title of the tab
icon	true	null	string	Icon of the tab
isSelectable	false	true	boolean	Determine if the tab can be selected or not

nativescript-bottom-navigation's Issues

support of fontawesome

Is there any plan to support fontawesome?

Update:
it seems like that someone already asked a similar question.
This ticket can be close.

XML syntax of the example is wrong

you have an opening bottomNav:BottomNavigation tag, but closing bottomBar:BottomNavigation in your XML examples...

Add default background on iOS.

When backgroundColor is omited on iOS the app crashes.

*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Expected 1 or 4 constructor parameters.
at
1   Color@file:///app/tns_modules/tns-core-modules/color/color-common.js:31:75
2   Color@file:///app/tns_modules/tns-core-modules/color/color.js:6:47
3   initNativeView@file:///app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js:61:57

Error: Invalid boolean: undefined Vuejs

Which platform(s) does your issue occur on?

• Android
• 8.1
• device

Please, provide the following version numbers that your issue occurs with:

template = https://github.com/nativescript-vue/vue-cli-template/

Error: Invalid boolean: undefined

System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: at com.tns.FragmentClass.onCreateView(FragmentClass.java:45)
System.err: at android.app.Fragment.performCreateView(Fragment.java:2508)
System.err: at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1279)
System.err: at android.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2412)
System.err: at android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2191)
System.err: at android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2147)
System.err: at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2048)
System.err: at android.app.FragmentManagerImpl$1.run(FragmentManager.java:719)
System.err: at android.os.Handler.handleCallback(Handler.java:790)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:171)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6633)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:823)

Multicolor Icon

Hi guys,
it's possibile to use icon without override color and use the png with the default color? I want replicate the navbar like facebook app.
Thanks

An uncaught Exception occurred on "main" thread.

Just trying to use it for the first time, followed the exact instructions and got this exception:
(Running on Android v8.0 on a physical android device - using Angular version)

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.sg.SportsGame/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
Calling js method onStart failed

TypeError: Cannot read property 'android' of null
File: "file:///data/data/org.sg.SportsGame/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js, line: 50, column: 79

StackTrace:
Frame: function:'BottomNavigation.createTabs', file:'file:///data/data/org.sg.SportsGame/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js', line: 50, column: 80
Frame: function:'BottomNavigation.(anonymous function)', file:'file:///data/data/org.sg.SportsGame/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js', line: 60, column: 14
Frame: function:'applyAllNativeSetters', file:'file:///data/data/org.sg.SportsGame/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 961, column: 28
Frame: function:'initNativeView', file:'file:///data/data/org.sg.SportsGame/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 905, column: 9
....

Demo app cannot run and confused about how to use it to navigate

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?

iOS emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
  3.4.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  The above are all from the latest angular sample app in this repository

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.
After I downloaded the project and add the iOS platform for demo-angular, I ran "tns run ios --emulator", and then got this error:
file:///app/item/items.component.js:5:47: JS ERROR Error: Could not find module 'nativescript-bottom-navigation'. Computed path '/Users/myname/Library/Developer/CoreSimulator/Devices/BB3CE3BE-B73A-4242-9A16-576F446FD80C/data/Containers/Bundle/Application/5BC55D01-7E8B-4F10-83F2-45FA7B44CF58/demoangular.app/app/tns_modules/nativescript-bottom-navigation'.

Wanted to know how to solve it so I might get a better idea of how to navigate pages by this plugin.
Thanks!

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.
  It is this repository.

Error java.lang.ArrayIndexOutOfBoundsException: length=5; index=5 if Tabs greater than 3(as SHOWN in demo)

Hi,
I'm getting array out of bound error when I increase the number of tabs from 3 to any number like 5.
I know this may not be a bug but rather enhancement/extension.
But hope to see it implemented along with horizontal auto scroll of tabs to see hidden tabs(4 and 5)
Code:
<BottomNavigation activeColor="red" inactiveColor="yellow" backgroundColor="black" keyLineColor="black" (tabSelected)="onBottomNavigationTabSelected($event)" row="1"> <BottomNavigationTab title="First" icon="ic_home_black_24dp"></BottomNavigationTab> <BottomNavigationTab title="Second" icon="ic_home_black_24dp"></BottomNavigationTab> <BottomNavigationTab title="Third" icon="ic_home_black_24dp"></BottomNavigationTab> <BottomNavigationTab title="Forth" icon="ic_home_black_24dp"></BottomNavigationTab> <BottomNavigationTab title="Fifth" icon="ic_home_black_24dp"></BottomNavigationTab> <BottomNavigationTab title="Sixth" icon="ic_home_black_24dp"></BottomNavigationTab> </BottomNavigation>

Error:
`System.err: java.lang.ArrayIndexOutOfBoundsException: length=5; index=5
System.err: at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createC
lassicItems(AHBottomNavigation.java:459)
System.err: at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createI
tems(AHBottomNavigation.java:282)
System.err: at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.onSizeC
hanged(AHBottomNavigation.java:150)
System.err: at android.view.View.sizeChange(View.java:18129)
System.err: at android.view.View.setFrame(View.java:18091)
System.err: at android.view.View.layout(View.java:18006)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at org.nativescript.widgets.CommonLayoutParams.layoutChild(Commo
nLayoutParams.java:222)
System.err: at org.nativescript.widgets.GridLayout.onLayout(GridLayout.java:
353)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at org.nativescript.widgets.CommonLayoutParams.layoutChild(Commo
nLayoutParams.java:222)
System.err: at org.nativescript.widgets.GridLayout.onLayout(GridLayout.java:
353)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at org.nativescript.widgets.CommonLayoutParams.layoutChild(Commo
nLayoutParams.java:222)
System.err: at org.nativescript.widgets.ContentLayout.onLayout(ContentLayout
.java:73)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at android.widget.FrameLayout.layoutChildren(FrameLayout.java:34
4)
System.err: at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1
742)
System.err: at android.widget.LinearLayout.layoutVertical(LinearLayout.java:
1585)
System.err: at android.widget.LinearLayout.onLayout(LinearLayout.java:1494)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at android.widget.FrameLayout.layoutChildren(FrameLayout.java:34
4)
System.err: at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
System.err: at com.android.internal.policy.PhoneWindow$DecorView.onLayout(Ph
oneWindow.java:3175)
System.err: at android.view.View.layout(View.java:18010)
System.err: at android.view.ViewGroup.layout(ViewGroup.java:5817)
System.err: at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:277
6)
System.err: at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java
:2477)
System.err: at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1544)

System.err: at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.
java:7607)
System.err: at android.view.Choreographer$CallbackRecord.run(Choreographer.j
ava:911)
System.err: at android.view.Choreographer.doCallbacks(Choreographer.java:686
)
System.err: at android.view.Choreographer.doFrame(Choreographer.java:622)
System.err: at android.view.Choreographer$FrameDisplayEventReceiver.run(Chor
eographer.java:897)
System.err: at android.os.Handler.handleCallback(Handler.java:739)
System.err: at android.os.Handler.dispatchMessage(Handler.java:95)
System.err: at android.os.Looper.loop(Looper.java:148)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7402)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(Zy
goteInit.java:1230)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)

ActivityManager: Process org.nativescript.HelloWorld (pid 8788)(adj 0) has died(
122,268)
ActivityManager: cleanUpApplicationRecord -- 8788
ActivityManager: removeProcessNameLocked mProcessNames.remove pid=8788 ,hash=158
870356 ,name=org.nativescript.HelloWorld`

Default Tab

How do you specify the default tab that should be highlighted when first displaying a page?

How can you make it so that NO tab is initially selected?

Support Swift 4.0 ?

Hi @henrychavez
I've noticed that the plugin shows some errors when the XCode try to compile it with Swift 4.0.

Do you have some free time to make it work with Swift 4.0, please?

White top border cannot be removed (and can't change color)

Hello,
while using the component with a dark theme I noticed there is a white line, I am not able to remove it.

This is my css:

.bottom-nav {
    tab-active-color: white;
    tab-inactive-color: #c56856;
    tab-background-color: #4A4A4A;
}

This is the component:

<BottomNavigation [tabs]="homeTabsService.tabs"
                      (tabSelected)="onBottomNavigationTabSelected($event)"
                      class="bottom-nav">
    </BottomNavigation>

And this is the visible white line:

Thanks,
Dem

How do I change the navigation programmatically when using vue js?

I tried using
<BottomNavigation ref="bottomNav" ></BottomNavigation>

in my script

this.$refs.bottomNav.selectTab(1), but it doesn't work

Using it in my nativescript vue project

tabs property not rendering

Which platform(s) does your issue occur on?

• iOS/Android/Both

Please, provide the following version numbers that your issue occurs with:

• tns version
  3.2.1

Description

-tabs doesn't render using [tabs] property, it works when declaring the tabs in the HTML directly though.

Code

HTML

"



<BottomNavigation [tabs]="tabs"
activeColor="red"
inactiveColor="yellow"
backgroundColor="black"
(tabSelected)="onBottomNavigationTabSelected($event)"
row="1">
"

TS

import { Component, OnInit } from "@angular/core";
import { BottomNavigation, BottonNavigationTab, OnTabSelectedEventData } from 'nativescript-bottom-navigation';

@component(
{
selector: "ns-app",
moduleId: module.id,
templateUrl: "./app.component.html",
}
)
export class AppComponent {

public tabs: BottonNavigationTab[] = [
new BottomNavigationTab('First', 'ic_home'),
new BottomNavigationTab('Second', 'ic_view_list'),
new BottomNavigationTab('Third', 'ic_menu')
];

onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
console.log(Tab selected: ${args.oldIndex});
}
}

tabSelected and tabPressed events not fired on iOS.

Using example code tabSelected and tabPressed events not fired on iOS.
The icon changes, but no event.

export function bottomNavigationLoaded(args) {
    const bottomNavigation: BottomNavigation = args.object;
    bottomNavigation.on('tabSelected', tabSelected);
    bottomNavigation.on('tabPressed', tabSelected);
}

export function tabSelected(args: OnTabSelectedEventData) {
    console.log('tabSelected::'+ args.newIndex);
}

<bottomNav:BottomNavigation
    id="nav"
    activeColor="#FF8000"
    inactiveColor="#BECBD2"
    backgroundColor="#FFFFFF"
    loaded="bottomNavigationLoaded"
>
    <bottomNav:BottomNavigationTab icon="home"></bottomNav:BottomNavigationTab>
    <bottomNav:BottomNavigationTab icon="immunotherapy"></bottomNav:BottomNavigationTab>
    <bottomNav:BottomNavigationTab icon="calendar"></bottomNav:BottomNavigationTab>
    <bottomNav:BottomNavigationTab icon="notification"></bottomNav:BottomNavigationTab>
    <bottomNav:BottomNavigationTab icon="perfil"></bottomNav:BottomNavigationTab>
</bottomNav:BottomNavigation>

tns --version:
4.2.1

/usr/bin/xcodebuild -version:
Xcode 10.0
Build version 10A255

nativescript-bottom-navigation@^1.4.0
tns-core-modules@^4.2.1

Unexpected value DIRECTIVES when trying to build

Hello, I have an issue when I try to build my app after adding the plugin. In develop run mode there's no issue, but now I'm trying to build the app to get the APK it fails with this message:

Unexpected value 'DIRECTIVES in /project/node_modules/nativescript-bottom-navigation/angular/nativescript-bottom-navigation.directives.js' declared by the module 'NativescriptBottomNavigationModule in /project/node_modules/nativescript-bottom-navigation/angular/nativescript-bottom-navigation.module.d.ts'. Please add a @Pipe/@Directive/@component annotation.

Do you have an idea? Thanks!

Getting error after installing plugin

I'm getting weird error after installing plugin and run tns run android.

Which platform(s) does your issue occur on?

• Android
• emulator or device. What type of device? emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 5.1.0
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project) 5.1.0
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here) 1.5.0

Error:
System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err:
System.err: TypeError: Cannot read property 'android' of null
System.err: File: "file:///data/data/com.atrixdigital.flow/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js, line: 63, column: 79
System.err:
System.err: StackTrace:
System.err: Frame: function:'BottomNavigation.createTabs', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js', line: 63, column: 80
System.err: Frame: function:'BottomNavigation.(anonymous function)', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js', line: 72, column: 14
System.err: Frame: function:'applyAllNativeSetters', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 960, column: 28
System.err: Frame: function:'initNativeView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 904, column: 9
System.err: Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 626, column: 22
System.err: Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 272, column: 18
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 231, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'ContentView.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'ScrollViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/scroll-view/scroll-view-common.js', line: 31, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 233, column: 19
System.err: Frame: function:'ContentView.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
System.err: Frame: function:'PageBase.eachChildView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 120, column: 40
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 884, column: 14
System.err: Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 232, column: 14
System.err: Frame: function:'View.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 217, column: 35
System.err: Frame: function:'Page.onLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 43, column: 35
System.err: Frame: function:'', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 90
System.err: Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 304, column: 9
System.err: Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 311, column: 14
System.err: Frame: function:'ViewBase.loadView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 439, column: 18
System.err: Frame: function:'ViewBase._addViewCore', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 434, column: 18
System.err: Frame: function:'ViewBase._addView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 420, column: 14
System.err: Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 653, column: 19
System.err: Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/com.atrixdigital.flow/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js', line: 26, column: 38

Vue implementation

Any documentation to implement this amazing pluging with nativescript-vue (VueJS)?

Clicking on an already active tab doesn't send a tabSelected event.

Which platform(s) does your issue occur on?

• Android Emulator (Android 8.1.0 or API 27)
• OnePlus 6 (Android 8.1.0 or API 27)

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.1.2
• Cross-platform modules: 3.4.1
• Runtime(s): tns-android 3.4.1
• Plugin(s): nativescript-bottom-navigation 1.2.X

Please, tell us how to recreate the issue in as much detail as possible.

In any NativeScript project using nativescript-bottom-navigation, trying to select an already selected tab won't send the tabSelected event.

It looks like (src/bottom-navigation.android.ts:39)[https://github.com/henrychavez/nativescript-bottom-navigation/blob/master/src/bottom-navigation.android.ts#L39] is causing this issue on Android. I can't find a similar line in (https://github.com/henrychavez/nativescript-bottom-navigation/blob/master/src/bottom-navigation.ios.ts)[src/bottom-navigation.ios.ts].

Looking at nativescript-bottom-navigation's code, this is intended behavior. In my case, I'm working on an application where clicking on a bottom navigation tab will take you to an index page, and any page under that index page will keep that bottom navigation tab active. I want to be able to click on the already active bottom navigation tab to bring me back to the index page.

How an application handles clicking on an already active tab should be up to the developer IMO.

Thanks!

• Miras

Way to check when same tab is selected?

I would like check when same tab is selected.

Keep the labels always visible

Is there a way to keep the labels always visible? Now, is visible only the selected one.

Thanks ;)

Cannot read property 'TitleState' of undefined

Make sure to check the demo app(s) for sample usage

In the demo app its working. I checked everything and it still occures 😢

Make sure to check the existing issues in this repository

Checked all

If the demo apps cannot help and there is no issue for your problem, tell us about it

Which platform(s) does your issue occur on?

Android 9

Please, provide the following version numbers that your issue occurs with:

• CLI: 5.2.4
• Cross-platform modules: 5.2.2
• Runtime(s): 5.2.1
• Plugin(s):

  "dependencies": {
    "@vue/devtools": "5.0.0-beta.3",
    "nativescript-barcodescanner": "^3.1.2",
    "nativescript-bottom-navigation": "^1.5.0",
    "nativescript-intl": "^3.0.0",
    "nativescript-toast": "^1.4.6",
    "nativescript-vue": "^2.0.0",
    "nativescript-vue-devtools": "^1.0.0",
    "nativescript-theme-core": "~1.0.4",
    "tns-core-modules": "^5.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "next",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.1.0",
    "tns-platform-declarations": "^5.1.2",
    "typescript": "^3.2.4",
    "vue": "^2.5.22",
    "vue-loader": "^15.2.6",
    "webpack": "^4.16.4",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Copied App_Resources folder from Demo to my to have the same icons.
Added Vue.use to main.ts, added BottomNavigation to my Vue file.

<BottomNavigation
                    ref="bottomNavigation"
                    activeColor="red"
                    inactiveColor="yellow"
                    backgroundColor="black"
                    keyLineColor="black"
                    row="1"
            >
                <BottomNavigationTab title="First" icon="ic_home"/>
                <BottomNavigationTab title="Second" icon="ic_view_list"/>
                <BottomNavigationTab title="Third" icon="ic_menu"/>
            </BottomNavigation>

System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{de.shyim.frosh_admin/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: Cannot read property 'TitleState' of undefined
System.err: File: "file:///data/data/de.shyim.frosh_admin/files/app/vendor.js, line: 4653, column: 6

iPhone X support

Hello,
I've just tested the app on an iPhone X and the bottom safe area is not considered:

I don't know if the version 1.1.1 of the original MiniTabBar fixed this, is there a specific reason why you forked it?

Thanks,
Dem

Does not exist method on

in the loaded function in the main-page.ts file

export function loaded(args) { let bar: BottomNavigation = args.object; bar.on('tabSelected', tabSelected); }

mark me that the on method does not exist

I fixed the index of the plugin and it is true, it does not exist

Import { BottomNavigationBase, BottomNavigationTabBase } from './bottom-navigation.common';
import { EventData } from 'tns-core-modules/data/observable';

export declare interface OnTabSelectedEventData extends EventData { oldIndex: number; newIndex: number; }

export declare class BottomNavigation extends BottomNavigationBase { private _delegate; public tabs: BottomNavigationTab[]; public selectedTabIndex: number; public activeColor: string; public inactiveColor: string; public backgroundColor: string; constructor(); readonly ios: any; createTabs(tabs: BottomNavigationTab[]): void; selectTab(index: number): void; protected selectTabNative(index: number): void; }

export declare class BottomNavigationTab extends BottomNavigationTabBase { constructor(title: string, icon: string, parent?: WeakRef<BottomNavigationBase>); }

Initial load

It's keep giving error when login into the app.
ERROR TypeError: undefined is not an object (evaluating 'this.nativeView.selectItemAnimated')

• iOS 11.2.5 iphone 6
• tns 3.4.0
• tns ios 3.4.1

{
  "description": "xxx",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.xxxx",
    "tns-android": {
      "version": "3.4.0"
    },
    "tns-ios": {
      "version": "3.4.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "~4.4.1",
    "@angular/compiler": "~4.4.1",
    "@angular/core": "~4.4.1",
    "@angular/forms": "~4.4.1",
    "@angular/http": "~4.4.1",
    "@angular/platform-browser": "~4.4.1",
    "@angular/router": "~4.4.1",
    "email-validator": "^1.1.1",
    "nativescript-angular": "~4.4.0",
    "nativescript-bottom-navigation": "^1.0.2",
    "nativescript-couchbase": "^1.0.18",
    "nativescript-floatingactionbutton": "4.1.3",
    "nativescript-fontawesome": "1.0.0",
    "nativescript-geolocation": "^4.2.2",
    "nativescript-gradient": "^2.0.1",
    "nativescript-iqkeyboardmanager": "1.1.0",
    "nativescript-photoviewer": "1.2.0",
    "nativescript-pro-ui": "3.3.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "^3.4.0",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  }
}

The issue is when i call selectTab()

Template BottomNavigationTab initialization not working with localization

Which platform(s) does your issue occur on?

• Android
• 7.1.1
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.2
• Cross-platform modules: 3.4.1
• Runtime(s): 3.4.1
• Plugin(s):
  "dependencies": { "@angular/animations": "~5.2.0", "@angular/common": "~5.2.0", "@angular/compiler": "~5.2.0", "@angular/core": "~5.2.0", "@angular/forms": "~5.2.0", "@angular/http": "~5.2.0", "@angular/platform-browser": "~5.2.0", "@angular/platform-browser-dynamic": "~5.2.0", "@angular/router": "~5.2.0", "nativescript-angular": "~5.2.0", "nativescript-bottom-navigation": "^1.2.0", "nativescript-bottombar": "^3.0.8", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.8", "rxjs": "~5.5.2", "tns-core-modules": "~3.4.0", "zone.js": "~0.8.2" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.6.0", "typescript": "~2.6.2" }

Please, tell us how to recreate the issue in as much detail as possible.

Hi (me again ^^)

I am using the ns-localize bundle (https://github.com/lfabreges/nativescript-localize) for translations and wanted to also include it on the tabs. But when I define the tabs in the template the localization does not work.

So
<BottomNavigationTab title="{{ 'calendar' | L }}" icon="calendar"></BottomNavigationTab>
does not work, but
new BottomNavigationTab(localize('calendar'), "calendar")
works.

The localization in general works. I added a text field to check if the key gets translated. I don't know if this is an issue here or on the localization side as I don't know in which order things are handled internally, e.g. before passing to the class.

So, more to let you know if this is something on your side :)

Thanks again for the plugin

When the page is switched, the page will be rendered again. Is there any way to avoid it?

Which platform(s) does your issue occur on?

• Android
• 7.0
• xiaomi max

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.0.0
• Cross-platform modules: 4.0.0
• Runtime(s): 4.0.1
• Plugin(s): "dependencies": {
  "angular/animations": "~5.2.0",
  "angular/common": "~5.2.0",
  "angular/compiler": "~5.2.0",
  "angular/core": "~5.2.0",
  "angular/forms": "~5.2.0",
  "angular/http": "~5.2.0",
  "angular/platform-browser": "~5.2.0",
  "angular/platform-browser-dynamic": "~5.2.0",
  "angular/router": "~5.2.0",
  "nativescript-angular": "~5.2.0",
  "nativescript-bottom-navigation": "^1.3.0",
  "nativescript-theme-core": "~1.0.4",
  "reflect-metadata": "~0.1.8",
  "rxjs": "~5.5.2",
  "tns-core-modules": "^4.0.0",
  "zone.js": "~0.8.18"
  },
  "devDependencies": {
  "angular/compiler-cli": "~5.2.0",
  "ngtools/webpack": "~1.9.4",
  "babel-traverse": "6.26.0",
  "babel-types": "6.26.0",
  "babylon": "6.18.0",
  "clean-webpack-plugin": "~0.1.19",
  "copy-webpack-plugin": "~4.3.0",
  "css-loader": "~0.28.7",
  "extract-text-webpack-plugin": "~3.0.2",
  "lazy": "1.0.11",
  "nativescript-dev-typescript": "~0.6.0",
  "nativescript-dev-webpack": "^0.11.0",
  "nativescript-worker-loader": "~0.8.1",
  "raw-loader": "~0.5.1",
  "resolve-url-loader": "~2.2.1",
  "tslint": "^5.9.1",
  "typescript": "~2.6.2",
  "uglifyjs-webpack-plugin": "~1.1.6",
  "webpack": "~3.10.0",
  "webpack-bundle-analyzer": "^2.9.1",
  "webpack-sources": "~1.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Hello, the author is a great plug-in, but I found a problem when I used it. When you switch the page, the page will be re - rendered. Is there any way to avoid it

App failing in android with the icons set on ns 5.0

I am having issues with the plugin on android, Works fine on iOS. I have placed the icons in //res/drawable-{hdpi, mdpi, xhdpi,xxhdpi,xxxhdpi} using the ic_{filename} . I am running ns 5.0 and vue

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onCreateView failed

TypeError: Cannot read property 'android' of null
File: "file:///data/data/com.zeepay.instntmny/files/app/vendor.js, line: 26355, column: 73

StackTrace:
Frame: function:'BottomNavigation.createTabs', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 26355, column: 74
Frame: function:'BottomNavigation.(anonymous function)', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 26368, column: 10
Frame: function:'applyAllNativeSetters', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59426, column: 22
Frame: function:'initNativeView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59353, column: 5
Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60461, column: 18
Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59994, column: 12
Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59940, column: 10
Frame: function:'View.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 62143, column: 31
Frame: function:'', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60043, column: 20
Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60032, column: 5
Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60042, column: 10
Frame: function:'ViewBase.loadView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60219, column: 12
Frame: function:'', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59943, column: 13
Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 70852, column: 20
Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 61643, column: 10
Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59942, column: 10
Frame: function:'View.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 62143, column: 31
Frame: function:'', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60043, column: 20
Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60032, column: 5
Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60042, column: 10
Frame: function:'ViewBase.loadView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60219, column: 12
Frame: function:'', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59943, column: 13
Frame: function:'ContentView.eachChildView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 57587, column: 7
Frame: function:'PageBase.eachChildView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 72279, column: 36
Frame: function:'ViewCommon.eachChild', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 61643, column: 10
Frame: function:'ViewBase.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 59942, column: 10
Frame: function:'View.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 62143, column: 31
Frame: function:'Page.onLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 72411, column: 31
Frame: function:'', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60043, column: 20
Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60032, column: 5
Frame: function:'ViewBase.callLoaded', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60042, column: 10
Frame: function:'ViewBase.loadView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60219, column: 12
Frame: function:'ViewBase._addViewCore', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60213, column: 12
Frame: function:'ViewBase._addView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 60192, column: 10
Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 67281, column: 13
Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/com.zeepay.instntmny/files/app/vendor.js', line: 64876, column: 34

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
at com.tns.Runtime.callJSMethod(Runtime.java:983)
at com.tns.Runtime.callJSMethod(Runtime.java:967)
at com.tns.Runtime.callJSMethod(Runtime.java:959)
at com.tns.FragmentClass.onCreateView(FragmentClass.java:45)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:2439)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:802)
at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

[Vue] How to change the stacklayout content when a tab is selected?

I would prefer to change the content of the stacklayout instead of using manual routing (this.$navigateTo(page)) way.

I want to achieve similar to when using TabView, however TabView doesn't shrink its TabViewItem when we have more than 3 TabViewItems.

Please help.

Support for badges on iOS

On Android the AHBottomNavigation has support for badges, so i can call

    bottomNavigation.android.setNotification("1", 3);

Is it possible to do on iOS too?
If yes, can it turns a agnostic feature?

iOS. Events issues after selectTab() function usage

Using selectTab function to select second tab leads to event issues when clicking first (default) tab.

Clicking first tab fires tabReselected event instead of tabSelected event.

Problem found updating app plugin version from 1.3.0 to 1.5.0.

tns-core-modules 4.0.0 supprt

hello, could you please bump it in package.json?

npm WARN [email protected] requires a peer of tns-core-modules@^3.0.0 but none was installed.

Tab name goes missing after some time of usage

Make sure to check the demo app(s) for sample usage

checked the demo app

Make sure to check the existing issues in this repository

there is no issue open /closed

If the demo apps cannot help and there is no issue for your problem, tell us about it

Each Tab has a icon+name. The name goes missing while after some usage of the app / after minimizing the app

Which platform(s) does your issue occur on?

• iOS/Android/Both

Please, provide the following version numbers that your issue occurs with:

• CLI:3.4.2
• Cross-platform modules: 3.1.1
• Runtime(s): android-3.4.2 , ios-3.4.1
• Plugin(s): 1.3.0

Hide title possibility

Hi

It would be nice to have possibility to create navigation without title and only with icons if possible.

Icons - Vue

Sorry for my ignorance, but when you say " add your icons to App_Resource", where are the icons supposed to be coming from? :D

cannot run ios js demo (Error: Building UI from XML)

Hi, I am trying to run the demo (non angular) on ios.
after npm install and tns run ios
it gives an error

JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:12:9

which is referring to this line

<bottomBar:BottomNavigation class="bottom-nav"

I think I am missing some setup here. Sorry for being a novice

Error: Could not load view for: nativebottomnavigation

Hi there.

I've installed this

npm i nativescript-bottom-navigation

And tried to use with the blank Vue application

app.js

Vue.registerElement('BottomNavigation', () => require('nativescript-bottom-navigation').BottomNavigation);
Vue.registerElement('BottomNavigationTab', () => require('nativescript-bottom-navigation').BottomNavigationTab);

Home.Vue

        <GridLayout rows="*, auto">
            <StackLayout row="0">
               <Label text="content"></Label>
            </StackLayout>
            <BottomNavigation activeColor="red"
                              inactiveColor="yellow"
                              backgroundColor="black"
                              keyLineColor="black"

                              row="1">
                <BottomNavigationTab title="First" icon="ic_home" />
                <BottomNavigationTab title="Second" icon="ic_view_list" />
                <BottomNavigationTab title="Third" icon="ic_menu" />
            </BottomNavigation>
        </GridLayout>

It causes error at console (use preview at Iphone 7)

2019-02-01 23:25:47.498 nsplaydev[2716:1033934] Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Could not load view for: nativebottomnavigation. ReferenceError: Can't find variable: MDCBottomNavigationBarDelegate

tns version: 5.1.1
npm version: 5.5.1

packages.json

    "dependencies": {
        "nativescript-bottom-navigation": "^1.4.4",
        "nativescript-theme-core": "~1.0.4",
        "nativescript-vue": "~2.0.0",
        "tns-core-modules": "~5.1.0"
    },
    "devDependencies": {
        "@babel/core": "~7.1.0",
        "@babel/preset-env": "~7.1.0",
        "babel-loader": "~8.0.0",
        "nativescript-dev-webpack": "~0.19.0",
        "nativescript-vue-template-compiler": "~2.0.0",
        "node-sass": "~4.9.0",
        "vue-loader": "~15.4.0"
    },

thank you!

iOS Safe zone support for new Material Design

The last Podfile had safe zone support but this one don't.

Font Support for icons?

hi, my doubt is , can i implement the bottomtabs with font icons instead of png ? thanks.

Badge with no value, just as notification indicator

I am using a badge on the icons, but for my case I don't really want numbers in them. I would simply just want a smaller red dot to indicate a notification. If I set the badgeValue to an empty string, it works great on iOS, but it doesn't show up on Android. If I make the badgeValue a space it appears on both, but they are obnoxiously big. See pictures.

Is it possible to implement this feature on Android?

Which platform(s) does your issue occur on?

• Android

Is there any code involved?

    const tabIndex = 1;
    const badgeValue = ""; 

    if (isIOS) {
        const tab = this._bottomNavigation.ios.items[tabIndex];
        tab.badgeValue = badgeValue;
    } else {
        // Android
        this._bottomNavigation.android.setNotification(badgeValue, tabIndex);
    }

Tab highlighting always a step behind

Here's my code for when a tab is selected:

onBottomNavigationTabSelected(args: OnTabSelectedEventData): void { switch(args.newIndex){ case 0: this.router.navigate(['home/']); break; case 1: this.router.navigate(['search/' + "something"]); break; case 2: this.router.navigate(['user/']); break; } }

and my tabs in the xml:
<BottomNavigation [tabs]="tabs" activeColor="red" inactiveColor="yellow" backgroundColor="black" (tabSelected)="onBottomNavigationTabSelected($event)" row="1"></BottomNavigation>

Yet, when I click the tabs in the navigation, it always takes two "taps" to get it to highlight in red. Like the highlighting is actually based on the args.oldIndex or something.

Am I implementing the code incorrectly?

thanks,
Blake

Vue support

I've made a new project. Tried adding a couple of plugins following instructions in docs, but in both cases the app throws TypeError: Cannot read property 'android' of null File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 19943, column: 79.

Does this plugin support vue template ?
I'm using the latest template and ^0.2.0 nativescript-vue-externals.

My code:

import Vue from 'nativescript-vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import router from './router'
import store from './store'
import './styles.scss'

// Uncommment the following to see NativeScript-Vue output logs
// Vue.config.silent = false;
const sidedrawer = require('nativescript-ui-sidedrawer').RadSideDrawer
const dataform = require('nativescript-ui-dataform').RadDataForm
const bottomNavigation = require('nativescript-bottom-navigation').BottomNavigation
const bottomNavigationTab = require('nativescript-bottom-navigation').BottomNavigationTab
const onTabSelectedEventData = require('nativescript-bottom-navigation').OnTabSelectedEventData

Vue.registerElement('RadSideDrawer', () => sidedrawer)
Vue.registerElement('RadDataForm', () => dataform)
Vue.registerElement('BottomNavigation', () => bottomNavigation)
Vue.registerElement('BottomNavigationTab', () => bottomNavigationTab)
Vue.registerElement('OnTabSelectedEventData', () => onTabSelectedEventData)

Vue.use(VueAxios, Axios)

new Vue({
  router,
  store,
}).$start()

TypeError: Cannot read property 'android' of null
File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 19943, column: 79

StackTrace: 
	Frame: function:'BottomNavigation.createTabs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 19943, column: 80
	Frame: function:'BottomNavigation.(anonymous function)', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 19953, column: 14
	Frame: function:'applyAllNativeSetters', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 961, column: 28
	Frame: function:'initNativeView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 905, column: 9
	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 555, column: 22
	Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 223, column: 18
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 200, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 206, column: 19
	Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 699, column: 14
	Frame: function:'ViewBase._loadEachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 205, column: 14
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 201, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 206, column: 19
	Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
	Frame: function:'PageBase.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 206, column: 40
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 699, column: 14
	Frame: function:'ViewBase._loadEachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 205, column: 14
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 201, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'Page.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 105, column: 35
	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 360, column: 18
	Frame: function:'ViewBase._addView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 346, column: 14
	Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 504, column: 24
	Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js', line: 27, column: 38


	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2778)
	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2856)
	at android.app.ActivityThread.-wrap11(Unknown Source:0)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1589)
	at android.os.Handler.dispatchMessage(Handler.java:106)
	at android.os.Looper.loop(Looper.java:164)
	at android.app.ActivityThread.main(ActivityThread.java:6494)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
Caused by: com.tns.NativeScriptException: 
Calling js method onCreateView failed

TypeError: Cannot read property 'android' of null
File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 19943, column: 79

StackTrace: 
	Frame: function:'BottomNavigation.createTabs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 19943, column: 80
	Frame: function:'BottomNavigation.(anonymous function)', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 19953, column: 14
	Frame: function:'applyAllNativeSetters', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 961, column: 28
	Frame: function:'initNativeView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 905, column: 9
	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 555, column: 22
	Frame: function:'ViewBase._resumeNativeUpdates', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 223, column: 18
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 200, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 206, column: 19
	Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js', line: 125, column: 26
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 699, column: 14
	Frame: function:'ViewBase._loadEachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 205, column: 14
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 201, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 206, column: 19
	Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js', line: 70, column: 13
	Frame: function:'PageBase.eachChildView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 206, column: 40
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js', line: 699, column: 14
	Frame: function:'ViewBase._loadEachChild', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 205, column: 14
	Frame: function:'ViewBase.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 201, column: 14
	Frame: function:'View.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'Page.onLoaded', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 105, column: 35
	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 360, column: 18
	Frame: function:'ViewBase._addView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js', line: 346, column: 14
	Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 504, column: 24
	Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js', line: 27, column: 38


	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
	at com.tns.Runtime.callJSMethod(Runtime.java:957)
	at com.tns.Runtime.callJSMethod(Runtime.java:941)
	at com.tns.Runtime.callJSMethod(Runtime.java:933)
	at com.tns.FragmentClass.onCreateView(FragmentClass.java:40)
	at android.app.Fragment.performCreateView(Fragment.java:2508)
	at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1279)
	at android.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2407)
	at android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2186)
	at android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2142)
	at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2043)
	at android.app.FragmentManagerImpl.dispatchMoveToState(FragmentManager.java:3032)
	at android.app.FragmentManagerImpl.dispatchStart(FragmentManager.java:2984)
	at android.app.FragmentController.dispatchStart(FragmentController.java:189)
	at android.app.Activity.performStart(Activity.java:7035)
	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2741)

I: TypeError: AHBottomNavigation is not a constructor

Which platform(s) does your issue occur on?

• Android
• 7.1.1
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.2
• Cross-platform modules: 3.4.1
• Runtime(s): 3.4.1
• Plugin(s):
  "dependencies": { "@angular/animations": "~5.2.0", "@angular/common": "~5.2.0", "@angular/compiler": "~5.2.0", "@angular/core": "~5.2.0", "@angular/forms": "~5.2.0", "@angular/http": "~5.2.0", "@angular/platform-browser": "~5.2.0", "@angular/platform-browser-dynamic": "~5.2.0", "@angular/router": "~5.2.0", "nativescript-angular": "~5.2.0", "nativescript-bottom-navigation": "^1.2.0", "nativescript-bottombar": "^3.0.8", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.8", "rxjs": "~5.5.2", "tns-core-modules": "~3.4.0", "zone.js": "~0.8.2" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.6.0", "typescript": "~2.6.2" }

Please, tell us how to recreate the issue in as much detail as possible.

I create a new TNS project from the NG template and wanted to add the bottom bar, as in your demo app.

The error is:

System.err: Calling js method onCreateView failed
System.err: TypeError: AHBottomNavigation is not a constructor
System.err: File: "file:///data/data/org.nativescript.xyz/files/app/tns_modules/nativescript-bottom-navigation/bottom-navigation.js, line: 22, column: 26

Please add a @NgModule annotation.

I've tried the last version 1.4.0. Everything is fine during the build but I had a problem with the app started. I got this error :
JS ERROR Error: Unexpected value 'NativescriptBottomNavigationModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

I spend some time to understand what is wrong with my app because the demo works perfectly without that error.

Do you have any ideas?

Thanks.

Hi i'm kinda new to nativescript and using this plugin.

Is it possible to have the default active/selected tab to be the 2nd one ? Eg,

1 2(selected) 3

Thanks.

Q: Image format for icons

Which platform(s) does your issue occur on?

• Android
• 7.1.1
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.2
• Cross-platform modules: 3.4.1
• Runtime(s): 3.4.1
• Plugin(s):
  "dependencies": { "@angular/animations": "~5.2.0", "@angular/common": "~5.2.0", "@angular/compiler": "~5.2.0", "@angular/core": "~5.2.0", "@angular/forms": "~5.2.0", "@angular/http": "~5.2.0", "@angular/platform-browser": "~5.2.0", "@angular/platform-browser-dynamic": "~5.2.0", "@angular/router": "~5.2.0", "nativescript-angular": "~5.2.0", "nativescript-bottom-navigation": "^1.2.0", "nativescript-bottombar": "^3.0.8", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.8", "rxjs": "~5.5.2", "tns-core-modules": "~3.4.0", "zone.js": "~0.8.2" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.6.0", "typescript": "~2.6.2" }

Please, tell us how to recreate the issue in as much detail as possible.

Hi

I used the Demo example and copied everything to my own environment and it runs perfectly.

Now, I want to change the icons and used http://nsimage.brosteins.com/ to create new icons. I set the icons in the template (e.g. instead of ic_home my own icon) and it doesn't crash or anything, but the icon is a plain white circle.
The image itself is of a circular shape. Does the image only use the outline? Or are there any other conditions to meet? Can no colored, fully fledged images be used?

Thanks

Angular: BottomNavigation making TabView's tabBackgroundColor to fail

Which platform(s) does your issue occur on?

• Android 5.0.2, phone.

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: 4.1.0
• Runtime: 4.1.3
• Plugin: "nativescript-bottom-navigation": "^1.3.0"

Please, tell us how to recreate the issue in as much detail as possible.

Comment out BottomNavigation from the example below to see that tabBackgroundColor working properly. Uncomment to see it fails.

Is there any code involved?

<GridLayout rows="*, auto">
    <StackLayout row="0">
        <TabView [tabTextColor]="'red'"
                 [selectedTabTextColor]="'white'"
                 [tabBackgroundColor]="'blue'"
                 [androidSelectedTabHighlightColor]="'red'"
        >
            <StackLayout *tabItem="{title: 'Tab 1'}">
                <Label text="Label in Tab 1"></Label>
            </StackLayout>
            <StackLayout *tabItem="{title: 'Tab 2'}">
                <Label text="Label in Tab 2"></Label>
            </StackLayout>
        </TabView>
    </StackLayout>
    <BottomNavigation row="1">
        <BottomNavigationTab title="home" icon="ic_home"></BottomNavigationTab>
    </BottomNavigation>
</GridLayout>

How do I keep the navigation while switching components?

How do I keep the bottom navigation while switching components?

I have multiple components that use the bottom navigation. I'm new to nativescript (with angular 2) and I don't know how to keep the navigation bar while switching the components.

JS ERROR TypeError: undefined is not an object (evaluating 'application_1.ios.window.safeAreaInsets.bottom')

I have a problem with the plugin when I run the app on iPhone 7 iOS 10.2

┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 3.4.3           │ 4.0.0          │ Update available │
│ tns-core-modules │ 3.4.1           │ 4.0.0          │ Update available │
│ tns-android      │ 3.4.2           │ 4.0.1          │ Update available │
│ tns-ios          │ 3.4.1           │ 4.0.1          │ Update available │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

I think you should add some condition in case we run the app on iOS <11.

Thanks @henrychavez :)

view ActionBar

its possible to show ActionBar of view inside tab?

Always show captions?

Hi

Is there someway to always show captions under the tab icons?