search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.22k stars 241 forks source link

[NS8] App flashes white when navigating from login to tabview screen #2341

Closed iamsecretsanta closed 3 years ago

iamsecretsanta commented 3 years ago

When I navigate from my login screen to a tab view, the screen flashes white even though my app background and page backgrounds are all set to black.

Root view:

<RootLayout class="base" background="black">
  <page-router-outlet></page-router-outlet>
</RootLayout>

Tabs: 

<ActionBar title="Tabs Component"
  class="action-bar"
  visibility="hidden"
  flat="true"></ActionBar>

<GridLayout class="wrapper tabs-wrapper" background="black">

  <GridLayout rows="*, 54"
    class="page"
    width="100%"
    height="100%">

    <page-router-outlet name="contactsTab"
      row="0"
      visibility="{{ activeTab === TabState.Contacts ? 'visible' : 'hidden' }}">
    </page-router-outlet>

    <page-router-outlet name="groupsTab"
      row="0"
      visibility="{{ activeTab === TabState.Groups ? 'visible' : 'hidden' }}">
    </page-router-outlet>

    <page-router-outlet name="chatsTab"
      row="0"
      visibility="{{ activeTab === TabState.Chats ? 'visible' : 'hidden' }}">
    </page-router-outlet>

    <page-router-outlet name="settingsTab"
      row="0"
      visibility="{{ activeTab === TabState.Settings ? 'visible' : 'hidden' }}">
    </page-router-outlet>

    <GridLayout width="100%"
      class="tab-container"
      height="54"
      row="1"
      columns="*, 360, *">

      <StackLayout class="tab-background"
        [class.on]="!tabsAnimated"
        col="0"
        colSpan="3">
      </StackLayout>

      <GridLayout col="1"
        columns="*, *, 90, *, *">

        <StackLayout col="0"
          class="tab-holder"
          (tap)="setTab(TabState.Contacts)">
          <ns-tab [isActive]="activeTab === TabState.Contacts"
            [tabsAnimated]="tabsAnimated"
            [route]="'contacts'">
          </ns-tab>
        </StackLayout>

        <StackLayout col="1"
          class="tab-holder"
          (tap)="setTab(TabState.Groups)">
          <ns-tab [isActive]="activeTab === TabState.Groups"
            [tabsAnimated]="tabsAnimated"
            [route]="'groups'">
          </ns-tab>
        </StackLayout>

        <StackLayout col="3"
          class="tab-holder"
          (tap)="setTab(TabState.Chats)">
          <ns-tab [isActive]="activeTab === TabState.Chats"
            [tabsAnimated]="tabsAnimated"
            [route]="'chats'">
          </ns-tab>
        </StackLayout>

        <StackLayout col="4"
          class="tab-holder"
          (tap)="setTab(TabState.Settings)">
          <ns-tab [isActive]="activeTab === TabState.Settings"
            [tabsAnimated]="tabsAnimated"
            [route]="'settings'">
          </ns-tab>
        </StackLayout>

      </GridLayout>
    </GridLayout>
  </GridLayout>

  <GridLayout width="60"
    height="60"
    borderRadius="100%"
    verticalAlignment="bottom"
    marginBottom="7"
    [class.on]="!tabsAnimated"
    (tap)="open()"
    class="middle-button oceanGradient">
    <GridLayout class="middle-button-inner tabBlackGradient-bg"
      borderRadius="100%"
      isButton
      width="56"
      height="56">
      <Image src="~/images/tabs/plus-icon-color.png"
        verticalAlignment="center"
        width="26"
        stretch="aspectFit">
      </Image>
    </GridLayout>
  </GridLayout>
</GridLayout>

Dependencies:

  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~3.0.0",
    "@nstudio/nativescript-checkbox": "^2.0.4",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@nstudio/nativescript-pulltorefresh": "^3.0.1",
    "@schematics/angular": "^9.1.0",
    "@triniwiz/nativescript-image-cache-it": "^7.0.5",
    "@triniwiz/nativescript-pager": "^13.0.1",
    "@types/mocha": "^8.2.2",
    "email-validator": "^2.0.4",
    "libphonenumber-js": "^1.9.13",
    "moment": "^2.29.1",
    "nativescript-lottie": "^5.0.3",
    "nativescript-materialdropdownlist": "^1.0.15",
    "nativescript-secure-storage": "^2.6.2",
    "nativescript-statusbar": "^5.0.0",
    "nativescript-taptic-engine": "^2.1.0",
    "nativescript-ui-listview": "^9.1.0",
    "nativescript-websockets": "^1.5.6",
    "numeral": "^2.0.6",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/schematics": "^11.0.0",
    "@nativescript/webpack": "~4.0.0",
    "@ngtools/webpack": "~11.0.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "tslint": "^6.1.3",
    "typescript": "~4.0.0"
  },