Wrapping page-router-outlet with a layout causes crash when navigating to a page with tabs (iOS only)

[williamjuan027]

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: 7.0.4
• Cross-platform modules: 7.0.0
• Android Runtime: 7.0.0
• iOS Runtime: 7.0.0
• Plugin(s): 0
• NativeScript-Angular: 10.1.0
• Angular: 10.1.0

Describe the bug Tabs causes app to crash on navigating to it when the page-router-outlet is wrapped within a layout (GridLayout). This happens on both NS6 and NS7. When page-router-outlet is wrapped with a layout, it doesn't crash only when the page that contains the Tabs is the first page being navigated to by the app - subsequent navigation to pages containing Tabs causes the same crash.

The errors are different with different configuration of the Tabs (i.e. with the Tabstrip vs omitting the Tabstrip). Removing the layout that wraps page-router-outlet seems to fix both errors (in < NS7)

// WITHOUT TABSTRIP
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot set property 'hidden' of null
at
push.../node_modules/@nativescript/core/ui/tabs/index.js.UIPageViewControllerImpl.viewDidLayoutSubviews(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:167:0)

// WITH TABSTRIP
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'setTitleColorForState' of null
at
setTabBarColor(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:856:0)
at [color:setNative](file: node_modules/@nativescript/core/ui/tab-navigation-base/tab-strip/index.js:82:0)
at applyPendingNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/index.js:1059:0)
at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/index.js:1018:0)
at onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:695:22)
at _resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:259:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:214:0)
at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0)
at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0)
at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0)
at eachChild(file: node_modules/@nativescript/core/ui/tab-navigation-base/tab-navigation-base/index.js:42:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0)
at onLoaded(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:412:0)
at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0)
at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0)
at l<…>

To Reproduce The sample project (linked below) currently has the page-router-outlet wrapped in a GridLayout (app.component.html), notice that on tapping the button that navigates to the page containing the Tabs will cause a crash. It no longer crashes if the GridLayout is removed (in < NS7).

Expected behavior App doesn't crash when navigating to a page that contains Tabs even when page-router-outlet is wrapped by a layout (which when not wrapped in a layout in NS7 results in an com.tns.NativeScriptException: Calling js method onCreate failed error as described here)

Sample project https://github.com/williamjuan027/issues-repro/tree/master/tabs-router-layout

$ npm i && ns run ios --no-hmr 

[mcalc001]

Hey, is there any updates on this? Im experiencing the same issue.

Environment.

"dependencies": {
    "@angular/animations": "~11.2.7",
    "@angular/common": "~11.2.7",
    "@angular/compiler": "~11.2.7",
    "@angular/core": "~11.2.7",
    "@angular/forms": "~11.2.7",
    "@angular/platform-browser": "~11.2.7",
    "@angular/platform-browser-dynamic": "~11.2.7",
    "@angular/router": "~11.2.7",
    "@nativescript/angular": "~11.2.0",
    "@nativescript/appversion": "~2.0.0",
    "@nativescript/core": "~7.3.0",
    "@nativescript/email": "~2.0.0",
    "@nativescript/fingerprint-auth": "~7.0.0",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/secure-storage": "~3.0.0",
    "@nstudio/nativescript-https": "^3.0.1",
    "@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": "^70.1.1",
    "nativescript-carousel": "^7.0.1",
    "nativescript-lottie": "^5.0.3",
    "nativescript-ngx-fonticon": "^7.0.0",
    "nativescript-phone": "^2.0.0",
    "nativescript-rater": "^2.1.2",
    "nativescript-root-detection": "^1.0.0",
    "nativescript-taptic-engine": "^2.1.0",
    "nativescript-ui-gauge": "^7.0.2",
    "nativescript-ui-listview": "^9.1.0",
    "reflect-metadata": "~0.1.13",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.5.3",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.2.7",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.2.0",
    "@nativescript/types": "~7.3.0",
    "@nativescript/webpack": "~4.1.0",
    "@ngtools/webpack": "~11.2.6",
    "@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": "~4.0.0",
    "webpack-obfuscator": "^0.27.2"
  },

***** Fatal JavaScript exception - application has been terminated. ***** NativeScript encountered a fatal error: Uncaught TypeError: Cannot set property 'hidden' of null at push.../node_modules/@nativescript/core/ui/tabs/index.js.UIPageViewControllerImpl.viewDidLayoutSubviews(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:168:0)