Nativescript: TabView crashing

Created on 18 Jul 2019 · 10Comments · Source: NativeScript/NativeScript

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 6.0.0
Cross-platform modules: 6.0.1
Android Runtime: 6.0.0

Describe the bug
Updated app to NS6, and the previous approach to a TabView with page-router-outlets crashes:

<TabView 
androidTabsPosition="bottom" 
tabTextFontSize="10" 
iosIconRenderingMode="alwaysOriginal" 
(selectedIndexChanged)="tabViewIndexChange($event)">
  // Home Tab
  <page-router-outlet 
  *tabItem="homeTabItem" 
  name="homeTab" 
  actionBarVisibility="never">
</page-router-outlet>

  // Journey Tab
  <page-router-outlet 
  *tabItem="journeyTabItem"  
  name="journeyTab" 
  actionBarVisibility="never">
</page-router-outlet>

  // Profile Tab
  <page-router-outlet 
  *tabItem="profileTabItem" 
  name="profileTab" 
  actionBarVisibility="never">
</page-router-outlet>
</TabView>

This line https://github.com/NativeScript/NativeScript/blob/e72aaca12d4db003508affcf4b9d2116f14ad36c/tns-core-modules/ui/tabs/tabs.android.ts#L490 setTabStripItems throws because tabStrip is undefined.

Expected behavior
No crash and render fine.

Sample project
https://github.com/Max-Mobility/permobil-client/blob/master/apps/mobile/pushtracker/src/app/modules/tabs/tabs.component.html using it here in this project. It was working fine during the RC phase. However, today it has crashed with the following exception:

`System.err: An uncaught Exception occurred on "main" thread. System.err: Calling js method onCreateView failed System.err: TypeError: Cannot read property 'items' of undefined System.err: System.err: StackTrace: System.err: Frame: function:'webpackHotUpdate.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.onLoaded', file:'file:///node_modules/tns-core-modules/ui/tabs/tabs.js:442:0 System.err: Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:439:0 System.err: Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:233:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/content-view/content-view.js.ContentView.eachChildView', file:'file:///node_modules/tns-core-modules/ui/content-view/content-view.js:70:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/page/page-common.js.PageBase.eachChildView', file:'file:///node_modules/tns-core-modules/ui/page/page-common.js:126:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:992:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:232:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view.js.View.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:240:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/page/page.js.Page.onLoaded', file:'file:///node_modules/tns-core-modules/ui/page/page.js:43:0 System.err: Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0 System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.cal

Additional context
If this is expected behavior, what is the new configuration to do an app with TabView and pager-router-outlets for each tab?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

needs more info

Source

bradmartin

👍1

Most helpful comment

Found issue @MartoYankov

My tabs.component had the following component decorator:

@Component({
  moduleId: module.id,
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

I'm assuming at this point you can already see why this crash happens. Simply changing the selector is the solution to not conflict with the tabs in core-modules at runtime.

bradmartin on 1 Aug 2019

👍2 😕1 😄1

All 10 comments

This is quite strange. For some reason in your project you are using the TabView, but the Tabs widget crashes. This is a completely separate widget. We isolated the old TabView and didn't change its code in any way intentionally, so that apps don't crash and there are no breaking changes. The new Tabs and BottomNavigation widgets were built from the ground up.

I can't run this project. I get the error that I don't have access to the maxmobility-private-keys repo.

I also can't reproduce this with our template or with the login-tab-navigation-ng app. Do you have any idea how I can reproduce this?

MartoYankov on 18 Jul 2019

I thought it was very strange also. Again, it was running fine just a few days ago on the RC CLI. Yesterday on my first run it crashed. Left me very confused why since I thought they were isolated.

I based the project on that template actually, so yeah super confused why it ends up trying to fire the onloaded for tabs.

No where in the project uses tabs or bottomnavigation.

I'll try to isolate it so you can run it @MartoYankov without the private dependency, or you can remove that from the deps and the import where it's being used. It's just a private repo with keys for kinvey, mapbox, etc. Shouldn't prevent the app from the running if just commented out and removed from deps.

I can do that for you on a branch later tho to save you a bit of time. Thanks for response.

bradmartin on 18 Jul 2019

Same setup with page-router-outlet here produces

<TabView androidTabsPosition="bottom">

    <page-router-outlet
            *tabItem="{title: 'Materiaal'}"
            name="materialsTab" actionBarVisibility="never">
    </page-router-outlet>

    <page-router-outlet
            *tabItem="{title: 'Planning'}"
            name="weekOverviewTab" actionBarVisibility="never">
    </page-router-outlet>

    <page-router-outlet
            *tabItem="{title: 'Pakmaat'}"
            name="sizesTab" actionBarVisibility="never">
    </page-router-outlet>

    <page-router-outlet
            *tabItem="{title: 'Opties'}"
            name="optionsTab" actionBarVisibility="never">
    </page-router-outlet>

</TabView>

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'items' of undefined
System.err: 
System.err: StackTrace:
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.onLoaded', file:'file:///node_modules/tns-core-modules/ui/tabs/tabs.js:385:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:439:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:233:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/content-view/content-view.js.ContentView.eachChildView', file:'file:///node_modules/tns-core-modules/ui/content-view/content-view.js:70:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/page/page-common.js.PageBase.eachChildView', file:'file:///node_modules/tns-core-modules/ui/page/page-common.js:126:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:992:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:232:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view.js.View.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:240:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/page/page.js.Page.onLoaded', file:'file:///node_modules/tns-core-modules/ui/page/page.js:43:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:439:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addViewCore', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:434:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:420:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.FragmentCallbacksImplementation.onCreateView', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:684:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/fragment.js.FragmentClass.onCreateView', file:'file:///node_modules/tns-core-modules/ui/frame/fragment.js:26:0
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     at com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
System.err:     at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2439)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
System.err:     at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:802)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
System.err:     at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
System.err:     at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
System.err:     at androidx.fragment.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
System.err:     at android.os.Handler.handleCallback(Handler.java:751)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6119)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

WebDaMa on 28 Jul 2019

@WebDaMa Can you please provide a sample application where I can reproduce this?

MartoYankov on 30 Jul 2019

I'm going to prep mine today and see if it's repro'd (vacation last week so was MIA). Will post here when ready.

bradmartin on 30 Jul 2019

@MartoYankov - https://github.com/Max-Mobility/permobil-client/tree/ns7541

This branch has the private deps removed and should allow you to run the app. Be sure to run the setup.all script prior to the npm run pt.m.a script that will start the android mobile app in question with the tabview - any questions ping me on slack if you need quicker discussion.

bradmartin on 30 Jul 2019

I've tried several things:

Swapped out the page-router-outlets in my app with the ones from the https://github.com/NativeScript/login-tab-navigation-ng sample app. Issue still persists, so doesn't seem specific to databinding the tabItem data.
Changed the routes to use ~/app/modules/ instead of ../modules/

Neither has fixed the crash.

bradmartin on 30 Jul 2019

Tried several other things such as loading the tabs initially and not the login component, same error. No approach I can come up with seems to fix the tabview trying to set the tabstrip items.

So after many attempts at changing the structure and removing code, still get:

Successfully synced application com.permobil.pushtracker on device emulator-5554.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: AppComponent_Constructor: 13.00ms
JS: DEBUG:  app.component OnInit
JS: ---------------------------------------------------
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: Sentry Breadcrumb:  {
JS:   "message": "HomeTabComponent OnInit",
JS:   "category": "Info",
JS:   "level": "info"
JS: }
JS: ---------------------------------------------------
JS: Sentry Breadcrumb:  {
JS:   "message": "journey-tab.component ngOnInit",
JS:   "category": "Info",
JS:   "level": "info"
JS: }
JS: ---------------------------------------------------
JS: Sentry Breadcrumb:  {
JS:   "message": "profile-tab.component ngOnInit",
JS:   "category": "Info",
JS:   "level": "info"
JS: }
JS: ---------------------------------------------------
JS: null
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'items' of undefined
System.err: 
System.err: StackTrace:
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.onLoaded', file:'file:///node_modules/tns-core-modules/ui/tabs/tabs.js:385:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:439:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:233:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/content-view/content-view.js.ContentView.eachChildView', file:'file:///node_modules/tns-core-modules/ui/content-view/content-view.js:70:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/page/page-common.js.PageBase.eachChildView', file:'file:///node_modules/tns-core-modules/ui/page/page-common.js:126:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:992:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:232:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view.js.View.onLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:240:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/page/page.js.Page.onLoaded', file:'file:///node_modules/tns-core-modules/ui/page/page.js:43:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:439:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addViewCore', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:434:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase._addView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:420:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.FragmentCallbacksImplementation.onCreateView', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:684:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/fragment.js.FragmentClass.onCreateView', file:'file:///node_modules/tns-core-modules/ui/frame/fragment.js:26:0
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     at com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
System.err:     at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2439)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
System.err:     at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
System.err:     at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:802)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)
System.err:     at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)
System.err:     at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)
System.err:     at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2273)
System.err:     at androidx.fragment.app.FragmentManagerImpl$1.run(FragmentManager.java:733)
System.err:     at android.os.Handler.handleCallback(Handler.java:873)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
JS: ERROR:  uncaughtError Error: Calling js method onCreateView failed
JS: TypeError: Cannot read property 'items' of undefined
JS: ---------------------------------------------------

In that log, you can see some logs for the components of each tab, those are the ngOnInit of the components being loaded. So the components for the tabs are loading fine it seems.

bradmartin on 30 Jul 2019

@bradmartin Yeah, I think all is fine except it confuses the old TabView component with the new Tabs one.

I still can't run the app though. At first the setup.all script crashed with a problem with the authentication problem in setup.se.mobile script, which I think is the other app. I removed it and continued forward, but still get an error Cannot find module '@maxmobility/private-keys' in src/app/services/location.service.ts at import { MaboxKeys } from '@maxmobility/private-kleys';.

I tried removing this, but then these modules are used and it crashes again...

MartoYankov on 31 Jul 2019

Found issue @MartoYankov

My tabs.component had the following component decorator:

@Component({
  moduleId: module.id,
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

I'm assuming at this point you can already see why this crash happens. Simply changing the selector is the solution to not conflict with the tabs in core-modules at runtime.

bradmartin on 1 Aug 2019

👍2 😕1 😄1

Was this page helpful?

0 / 5 - 0 ratings