CODEWITHSUNDEEP
angularnativescriptangular2-nativescriptnativescript-angular
keerl
keerl

Reputation: 116

Tab navigation using BottomNavigation (not TabView) crashing

I am trying to make a tabbed navigation app using BottomNavigation instead of TabView. I based it off this example which supports nested page-router-outlets. I am able to make it work, but one issue I am having is when I resume the app, it crashes, seen here. I am assuming this is because what I am doing with the page-router-outlets is dirty. 

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to resume activity {org.nativescript.nestedroutertabview/com.tns.NativeScriptActivity}: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3822)
at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3854)
at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:51)
at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:145)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:70)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1816)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6718)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
at android.view.ViewGroup.addViewInner(ViewGroup.java:5034)
at android.view.ViewGroup.addView(ViewGroup.java:4865)
at android.view.ViewGroup.addView(ViewGroup.java:4805)
at android.view.ViewGroup.addView(ViewGroup.java:4778)

I'll explain the things I have changed.

In app-routing.module: I removed the line { path: "", redirectTo: "/login", pathMatch: "full" }, because wanted to app to start on the tab page and not the login page. I couldn't figure out a good way of doing this besides adding this.routerExtension.navigate(["/tabs/default"], { clearHistory: true }); in app.component.

In tabs.component.html this is my page-router-outlet setup:

<GridLayout rows="*, auto">
    <page-router-outlet name="playerTab" actionBarVisibility="never" visibility="{{  (selectedTab == 0) ? 'visible' : 'collapsed' }}"></page-router-outlet>
    <page-router-outlet name="teamTab" actionBarVisibility="never" visibility="{{  (selectedTab == 1) ? 'visible' : 'collapsed' }}"></page-router-outlet>

    <StackLayout row="1" verticalAlignment="bottom">
        <BottomNavigation id="bottomNavigation" activeColor="#00C99D" [tabs]="tabs" titleVisibility="never" (tabSelected)="onBottomNavigationTabSelected($event)"></BottomNavigation>
    </StackLayout>
</GridLayout>

I simply hide the outlets that are not in use and show the current tab. None of what I am doing seems very clean to me.

Here is a link to my project: https://github.com/keerl/login-bottom-navigation-ng

Any help is appreciated.

Upvotes: 1

Views: 561

Answers (2)

keerl
keerl

Reputation: 116

I found a solution for the time being. If I use the 'hidden' property instead of 'collapsed' on the visibility attribute it does not crash any more. I still do not think this is the proper way of doing this, so if anyone has any ideas, it would be appreciated.

Upvotes: 1

Henry Ch&#225;vez
Henry Ch&#225;vez

Reputation: 21

Thanks for using my plugin :D I think the problem is that u are using the visibility property. I suggest you to use ngSwitch instead. Set the NgSwitch in your main GridLayout then wrap each page-router-outlet inside a StackLayout where u can set the NgCase to display an page-router-outlet based on the selected tab.

I hope this can be helpful :D

Upvotes: 0

Related Questions