Actionbar loading/animation issue



Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?


Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
I have 2 pages the first one has = true;, but the second one does have action bar. so when I go back and forth between then the actionbar doesn’t behave appropriately

Which platform(s) does your issue occur on?


Please provide the following version numbers that your issue occurs with:

  • CLI: (run tns --version to fetch it)

  • Cross-platform modules: (check the ‘version’ attribute in the
    node_modules/tns-core-modules/package.json file in your project)

  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project)
    tns-ios : version: 3.4.1

  • Plugin(s): (look for the version number in the package.json file of your
    @angular/animations”: “~5.2.0”,
    @angular/common”: “~5.2.0”,
    @angular/compiler”: “~5.2.0”,
    @angular/core”: “~5.2.0”,
    @angular/forms”: “~5.2.0”,
    @angular/http”: “~5.2.0”,
    @angular/platform-browser”: “~5.2.0”,
    @angular/platform-browser-dynamic”: “~5.2.0”,
    @angular/router”: “~5.2.0”,
    “nativescript-angular”: “~5.2.0”,
    “nativescript-drop-down”: “^3.2.4”,
    “nativescript-gradient”: “^2.0.1”,
    “nativescript-iqkeyboardmanager”: “^1.3.0”,
    “nativescript-platform-css”: “^1.6.5”,
    “nativescript-theme-core”: “~1.0.4”,
    “reflect-metadata”: “~0.1.8”,
    “rxjs”: “~5.5.2”,
    “tns-core-modules”: “~3.4.0”,
    “zone.js”: “~0.8.2”

Please tell us how to recreate the issue in as much detail as possible.


Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

first page

<GridLayout id="webIdGridTextFields" class="gridWithTextField" rows="auto">
    <TextField class="textField" row="0" hint="Organization Web ID" autocorrect="false"></TextField>

<GridLayout id="webIdBtnGrid" class="gridWithBtnAtButtom m-t-10" rows="auto,auto,auto" horizontalAlignment="center">
    <Button id="submitBtn" class="primaryBtn" text="Submit" row="0" (tap)="submit()"></Button>


second page

<ActionBar class="action-bar">
    <Label text="Hello" textWrap="true"></Label>
    <GridLayout id="userAndPassBtnGrid" class="gridWithBtnAtButtom" rows="auto" horizontalAlignment="center">
        <Button id="nextBtn" class="primaryBtn" row="0" text="Next" (tap)="next()"></Button>


Perhaps add an empty ActionBar to the first page as well to avoid this jump. Use <Actionbar flat="true"> to make it blend with the page as shown here:


Hi Eddy, thanks for the suggestion, but with that, it is hard to design all the pages that you don’t need navigation bar for it


Any respond on this please