TabView (or Tabs) inside BottomNavigation bug

[lbracun]

Environment

• CLI: 7.0.10
• Cross-platform modules: 7.0.13
• Android Runtime: 7.0.1

Describe the bug
If TabView is nested inside BottomNavigation, and you try to navigate to another page, the app crashes.

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onViewAttachedToWindow failed
System.err: Error: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
System.err: 
System.err: StackTrace:
System.err: commitCurrentTransaction(file: node_modules/@nativescript/core/ui/bottom-navigation/index.android.js:369:0)
System.err:     at changeTab(file: node_modules/@nativescript/core/ui/bottom-navigation/index.android.js:387:0)
System.err:     at _onAttachedToWindow(file: node_modules/@nativescript/core/ui/bottom-navigation/index.android.js:319:0)
System.err:     at AttachListener.onViewAttachedToWindow(file: node_modules/@nativescript/core/ui/bottom-navigation/index.android.js:163:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err:     at com.tns.gen.java.lang.Object_vendor_112166_28_AttachListener.onViewAttachedToWindow(Object_vendor_112166_28_AttachListener.java:18)
System.err:     at android.view.View.dispatchAttachedToWindow(View.java:19712)
System.err:     at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3455)
System.err:     at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3462)
System.err:     at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3462)
System.err:     at android.view.ViewGroup.addViewInner(ViewGroup.java:5174)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4960)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4900)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4873)
System.err:     at android.view.ViewOverlay$OverlayViewGroup.add(ViewOverlay.java:208)
System.err:     at android.view.ViewGroupOverlay.add(ViewGroupOverlay.java:72)
System.err:     at androidx.transition.ViewGroupOverlayApi18.add(ViewGroupOverlayApi18.java:48)
System.err:     at androidx.transition.Visibility.onDisappear(Visibility.java:428)
System.err:     at androidx.transition.Visibility.createAnimator(Visibility.java:257)
System.err:     at androidx.transition.Transition.createAnimators(Transition.java:747)
System.err:     at androidx.transition.TransitionSet.createAnimators(TransitionSet.java:480)
System.err:     at androidx.transition.Transition.playTransition(Transition.java:1821)
System.err:     at androidx.transition.TransitionManager$MultiListener.onPreDraw(TransitionManager.java:301)
System.err:     at android.view.ViewTreeObserver.dispatchOnPreDraw(ViewTreeObserver.java:1088)
System.err:     at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2983)
System.err:     at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1930)
System.err:     at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7988)
System.err:     at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1154)
System.err:     at android.view.Choreographer.doCallbacks(Choreographer.java:977)
System.err:     at android.view.Choreographer.doFrame(Choreographer.java:893)
System.err:     at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1139)
System.err:     at android.os.Handler.handleCallback(Handler.java:883)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:100)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7682)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:516)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:950)
System.err: Caused by: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
System.err:     at android.view.ViewGroup.addViewInner(ViewGroup.java:5131)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4960)
System.err:     at androidx.viewpager.widget.ViewPager.addView(ViewPager.java:1485)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4900)
System.err:     at android.view.ViewGroup.addView(ViewGroup.java:4873)
System.err:     at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:326)
System.err:     at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199)
System.err:     at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368)
System.err:     at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446)
System.err:     at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509)
System.err:     at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:2637)
System.err:     at androidx.fragment.app.FragmentManager.dispatchActivityCreated(FragmentManager.java:2589)
System.err:     at androidx.fragment.app.Fragment.performActivityCreated(Fragment.java:2723)
System.err:     at androidx.fragment.app.FragmentStateManager.activityCreated(FragmentStateManager.java:346)
System.err:     at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1200)
System.err:     at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368)
System.err:     at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446)
System.err:     at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:442)
System.err:     at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181)
System.err:     at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004)
System.err:     at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959)
System.err:     at androidx.fragment.app.FragmentManager.execSingleAction(FragmentManager.java:1830)
System.err:     at androidx.fragment.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:303)
System.err:     ... 39 more

To Reproduce

1. Create new NS project (with angular)
2. Create 2 pages (page-1 and page-2)
3. On page-1 create BottomNavigation
4. Inside one of the BottomNavigation tabs add button that navigates to page-2
5. Below the button add TabView
6. ns run android
7. Tap the button to navigate to page-2

Expected behavior
Should be able to navigate to page-2

Sample project
I have created sample project with 2 BottomNavigation tabs. Each tab has button that navigates to page-2, but only second tab has TabView. Navigation from first tab works. If you try to navigate from second tab, the error from above occurs.
https://github.com/lbracun/ns-bug

Additional context
I only tried it on Android, don't know if it happens on iOS too.
Tried it on iOS, and it works as intended. So the problem only happens on Android.
Forgot to mention before: i tried to create sample on the playground, but the error didn't show (because of NS 6 i think).

Update:
I also tried using Tabs instead of TabView, but same thing happens.

[mcalc001]

Hello, are there any updates on this? we are having exactly the same issue on android when navigating to a page with a Listview.
Thanks.

  "dependencies": {
    "@angular/animations": "~10.1.0",
    "@angular/common": "~10.1.0",
    "@angular/compiler": "~10.1.0",
    "@angular/core": "~10.1.0",
    "@angular/forms": "~10.1.0",
    "@angular/http": "~7.2.15",
    "@angular/platform-browser": "~10.1.0",
    "@angular/platform-browser-dynamic": "~10.1.0",
    "@angular/router": "~10.1.0",
    "@nativescript/angular": "~10.1.7",
    "@nativescript/animated-circle": "^1.1.5",
    "@nativescript/appversion": "~2.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/directions": "^2.0.0",
    "@nativescript/email": "~2.0.0",
    "@nativescript/fingerprint-auth": "~7.0.0",
    "@nativescript/firebase": "^11.1.0",
    "@nativescript/geolocation": "^7.0.0",
    "@nativescript/secure-storage": "~3.0.0",
    "@nstudio/nativescript-cardview": "2.0.1",
    "@nstudio/nativescript-https": "^3.0.1",
    "@nstudio/nativescript-mapbox": "^6.0.0-rc.0",
    "@nstudio/nativescript-pulltorefresh": "3.0.1",
    "@types/node": "^12.12.12",
    "html-encoder-decoder": "^1.3.8",
    "jwt-decode": "^2.2.0",
    "nativescript-awesome-webview-with-custom-menu-items": "^50.1.1",
    "nativescript-lottie": "^4.0.1",
    "nativescript-ngx-fonticon": "^7.0.0",
    "nativescript-root-detection": "^1.0.0",
    "nativescript-taptic-engine": "^2.1.0",
    "nativescript-ui-gauge": "^7.0.2",
    "nativescript-ui-listview": "^9.0.4",
    "reflect-metadata": "~0.1.13",
    "run": "^1.4.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.5.3",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~10.1.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.1.0",
    "@nativescript/types": "~7.1.0",
    "@nativescript/webpack": "4.0.0",
    "@ngtools/webpack": "~10.1.0",
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.5.0",
    "codelyzer": "~5.2.0",
    "eslint": "^7.11.0",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^6.13.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-nativescript": "0.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.3.7",
    "lint-staged": "^10.5.3",
    "node-sass": "^4.13.1",
    "prettier": "^2.1.2",
    "sonarqube-scanner": "^2.8.0",
    "typescript": "~3.9.0",
    "webpack-obfuscator": "^0.27.2"