Nativescript bottom navigation in vuejs

plugins

#1

Hi,
I am trying to implement nativescript bottom navigation plugin in nativescript-vue template. if i register like this

Vue.registerElement('BottomNavigation', () => require('nativescript-bottom-navigation').BottomNavigation); 
<template>
    <Page class="page">
        <GridLayout rows="*, auto">
            <StackLayout row="0">
                <Label text="content"></Label>
            </StackLayout>
            <BottomNavigation :tabs="tabs" activeColor="red" inactiveColor="yellow" backgroundColor="black" keyLineColor="black" @tabSelected="onBottomNavigationTabSelected"
                row="1">
            </BottomNavigation>
        </GridLayout>
    </Page>
</template>

<script>
    import {
        BottomNavigation,
        BottomNavigationTab,
        OnTabSelectedEventData
    } from 'nativescript-bottom-navigation';
    export default {
        name: 'Master',
        data() {
            return {
                tabs: [
                    new BottomNavigationTab('First', 'ic_home'),
                    new BottomNavigationTab('Second', 'ic_view_list'),
                    new BottomNavigationTab('Third', 'ic_menu')
                ]
            }
        },
        methods: {
            onBottomNavigationTabSelected(args) {
                console.log(`Tab selected:  ${args.oldIndex}`);
            }
        },
        mounted() {

        }
    }
</script>

errors

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to resume activity {dailycricket.com.bd/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreateView failed

TypeError: Cannot read property 'android' of null
File: "file:///data/data/dailycricket.com.bd/files/app/app.js, line: 1, column: 153058

StackTrace: 
	Frame: function:'t.createTabs', file:'file:///data/data/dailycricket.com.bd/files/app/app.js', line: 1, column: 153059
	Frame: function:'t.(anonymous function)', file:'file:///data/data/dailycricket.com.bd/files/app/app.js', line: 1, column: 153317
	Frame: function:'applyAllNativeSetters', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 961, column: 28
	Frame: function:'initNativeView', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 905, column: 9
	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 206, column: 40
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'Page.onLoaded', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 105, column: 35
	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 504, column: 24
	Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js', line: 27, column: 38


	at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3429)
	at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3469)
	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2732)
	at android.app.ActivityThread.-wrap12(ActivityThread.java)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
	at android.os.Handler.dispatchMessage(Handler.java:102)
	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)
Caused by: com.tns.NativeScriptException: 
Calling js method onCreateView failed

TypeError: Cannot read property 'android' of null
File: "file:///data/data/dailycricket.com.bd/files/app/app.js, line: 1, column: 153058

StackTrace: 
	Frame: function:'t.createTabs', file:'file:///data/data/dailycricket.com.bd/files/app/app.js', line: 1, column: 153059
	Frame: function:'t.(anonymous function)', file:'file:///data/data/dailycricket.com.bd/files/app/app.js', line: 1, column: 153317
	Frame: function:'applyAllNativeSetters', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 961, column: 28
	Frame: function:'initNativeView', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js', line: 905, column: 9
	Frame: function:'ViewBase.onResumeNativeUpdates', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/page/page-common.js', line: 206, column: 40
	Frame: function:'ViewCommon.eachChild', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/core/view/view.js', line: 62, column: 35
	Frame: function:'Page.onLoaded', file:'file:///data/data/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/page/page.js', line: 105, column: 35
	Frame: function:'ViewBase._addViewCore', file:'file:///data/data/dailycricket.com.bd/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/dailycricket.com.bd/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/dailycricket.com.bd/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 504, column: 24
	Frame: function:'FragmentClass.onCreateView', file:'file:///data/data/dailycricket.com.bd/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:1101)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
	at com.tns.Runtime.callJSMethod(Runtime.java:970)
	at com.tns.Runtime.callJSMethod(Runtime.java:954)
	at com.tns.Runtime.callJSMethod(Runtime.java:946)
	at com.tns.FragmentClass.onCreateView(FragmentClass.java:45)
	at android.app.Fragment.performCreateView(Fragment.java:2353)
	at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:995)
	at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1171)
	at android.app.BackStackRecord.run(BackStackRecord.java:816)
	at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1578)
	at android.app.FragmentController.execPendingActions(FragmentController.java:371)
	at android.app.Activity.performResume(Activity.java:6777)
	at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3406)
	... 10 more

any idea, how to use this plugin as navigation in nativescript-vue

Thanks


#2

Did you ever make progress?


#3

In the above code it looks like he had to set items instead of tabs. Are you facing similar issue?


#4

From the example given https://github.com/henrychavez/nativescript-bottom-navigation on Angular, it does appear that tabs is what should be set.

In any case, I’m getting a different error with the same code (for IOS):

JavaScript stack trace:
1   createTabs@file:///app/app.js:13392:116
2   @file:///app/app.js:13403:24
3   applyAllNativeSetters@file:///app/tns_modules/tns-core-modules/ui/core/properties/properties.js:961:28
4   initNativeView@file:///app/tns_modules/tns-core-modules/ui/core/properties/properties.js:905:30
5   onResumeNativeUpdates@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:555:36
6   _resumeNativeUpdates@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:223:39
7   onLoaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:200:34
8   onLoaded@file:///app/app.js:13382:39
9   @file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:206:27
10  eachChildView@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:34
11  eachChild@file:///app/tns_modules/tns-core-modules/ui/core/view/view-common.js:699:27
12  _loadEachChild@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:205:23
13  onLoaded@file:<…>
JavaScript error:
file:///app/app.js:13392:116: JS ERROR TypeError: null is not an object (evaluating 'image_source_1.fromResource(tab.icon).ios')

Another question I have, I saw an example of TabView positioned at the bottom, what is the difference between bottom navigation and TabView? Any clarification is appreciated!


#5

I found a detailed answer regarding tabs vs bottom navigation here:


#6

Looks like you are not setting an image?


#7

I assume this is related to new BottomNavigationTab('First', 'ic_home'). Is there something I have to do before I can use ic_home and ic_view_list?


#8

Are you sure you have ic_home.png inside your App_Resources/iOS folder?