Tabview disappears on iOS when navigated to from other page

[rowdyrabouw]

Which platform(s) does your issue occur on?

• iOS
• iOS 11.3 + 11.4
• emulator and device (iPhone 6)

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

• CLI: 4.2.3
• Cross-platform modules: 4.2.0
• Runtime(s): 4.2.0
• Plugin(s):

 "dependencies": {
    "@angular/animations": "6.1.1",
    "@angular/common": "6.1.1",
    "@angular/compiler": "6.1.1",
    "@angular/core": "6.1.1",
    "@angular/forms": "6.1.1",
    "@angular/http": "6.1.1",
    "@angular/platform-browser": "6.1.1",
    "@angular/platform-browser-dynamic": "6.1.1",
    "@angular/router": "6.1.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "email-validator": "^2.0.4",
    "lodash": "4.17.5",
    "nativescript-angular": "6.1.0",
    "nativescript-calendar": "2.0.0",
    "nativescript-carousel": "4.0.2",
    "nativescript-geolocation": "4.3.0",
    "nativescript-google-maps-sdk": "2.6.1",
    "nativescript-local-notifications": "3.0.0",
    "nativescript-ngx-fonticon": "4.0.0",
    "nativescript-theme-core": "1.0.4",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.3.1",
    "tns-android": "4.2.0",
    "tns-core-modules": "^4.2.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~6.1.0",
    "@ngtools/webpack": "~6.1.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "0.7.2",
    "nativescript-dev-webpack": "^0.15.1",
    "tns-platform-declarations": "4.2.0",
    "typescript": "2.7.2"
  }

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

@sis0k0 has my original project

• Start app in iOS simulator

• Welcome! page will be shown first

• Click search on Welcome! page

• Enter Puur in Search by name

• Select first in the list Puur Kappers Gouda

• You'll get the Salon page without a TabView

• Open app-routing.module.ts

• Change { path: "", redirectTo: "/welcome", pathMatch: "full" },

• to

• { path: "", redirectTo: "/salon", pathMatch: "full" },

• App will start with Salon page WITH TabView

[vakrilov]

Hey @rowdyrabouw, Can you please share you project here or try to reproduce the issue in a sample project? This way anyone from the community would be able to help.

This might also be related to livesync. Does the TabBar persist if you restart the App?

[rowdyrabouw]

Hi @vakrilov ! I can't share the project publicly, that's why I shared it with @sis0k0.

I'll try to replicate it in a playground app, to be continued ...

[vakrilov]

I see - isolating the issue in a project will be the best option.

Keep in mind that it might be something related to livesync which works slightly differently in playground. If it is related to livesync though, restarting the app should remove the remaining tabBar. So it's a good way to test it :)

[rowdyrabouw]

Yeah, unfortunately I can't get the error in playground. It just works. :-( :-)

I'll first create a new version of the app and test it in TestFlight. If the problem persists, I'll dumb down the production app and share it.

[rowdyrabouw]

@vakrilov I created a new version of the app and tested it via TestFlight. The problem was still there unfortunately.

I was able to strip down the app to a bare minimum and make it available at https://github.com/rowdyrabouw/TabViewApp

The app will start in a working tabview. When you click on the "Welcome" button you will be redirected to another page. On that page you can return to the tabview with the button "Tabview". You will then return to the tabview, but the tabs at the bottom are vanished.

[EddyVerbruggen]

@rowdyrabouw Just tried your repo on iOS and Android simulators and they behave exactly as you described using NativeScript 4.2.4 and tns run <platform>.

Btw, I know it's a demo, but just to be sure: that 'back' to the tabview should be a "router.back" as you're now adding pages to the stack.

[rowdyrabouw]

@EddyVerbruggen thanks Eddy (also for the tip)!

@vakrilov @sis0k0 This worked in NativeScript 3.2 with Angular 4 before upgrading the project to NativeScript 4 and Angular 6.

Any idea whether it's something in my code that causes this behavior or is it in the {N} Angular implementation?

[yspreen]

This should be recognized as a bug with high priority. TabView is completely unusable in iOS right now

[yspreen]

Workaround:
This one is pretty ugly. Basically tabview initialization needs to be delayed when coming from another page. So put *ngIf="initFinished" in your TabView element, and add setTimeout(() => { this.initFinished = true; }, 500); to your ngOnInit method.

But you can see the delay in initialization clearly and overall it just looks broken.

[rowdyrabouw]

@y-spreen Unfortunately the workaround doesn't seem to work in my real project. Probably going to replace the Tabview with Buttons of my own and fake iit. 😞

[rowdyrabouw]

Nope, it's going to be a complete mess trying to mimic the Tabview myself. 😞

The initFinished also doesn't work for me in the simple project: https://github.com/rowdyrabouw/TabViewApp

Did you try it @y-spreen ?

@vakrilov can you please have a look at it? ☺️

[yspreen]

@rowdyrabouw I cannot find the variable initFinished in that project it seems.. Neither any setTimeout calls.

[rowdyrabouw]

@y-spreen I thought you already tried it yourself :-) Unfortunately it doesn't work.

[yspreen]

I'm using the workaround in my project, and didnt test yours. But if you try to incorporate the workaround I can maybe see why it's not working for you.

[rowdyrabouw]

Thanks, but no need. I dumped the TabView from my project for now and recreated fit with a one page DockLayout/FlexboxLayout solution.

[MartoYankov]

@rowdyrabouw @y-spreen I have identified the issue as a problem with the ActionBar flat="true" property. It seems the flat action bar breaks the layout of the tab view and possibly other widgets. Removing the flat="true" attribute fixes the issue. This is also reproducible with latest tns-core-modules 5.1.1 and nativescript-angular 7.1.0.

[JuanDeLeon]

Still an issue in (at least) iOS, NS 5.2 with Vue. Can’t have both a TabView and flat=true Action Bars together.

[rowdyrabouw]

@vakrilov Can you please squeeze a solution for the in a next release? 😬

[MartoYankov]

@rowdyrabouw Can you test this with tns-core-modules@rc? A very large number of flat bar problems were fixed lately.

[JuanDeLeon]

@MartoYankov I could do this. Not sure how to grab the rc branch though.

[MartoYankov]

@JuanDeLeon It's not a branch, it's a tag in npm. So simply run npm install tns-core-modules@rc. That being said, we just released the latest patches, so you can simply try with latest 5.2.2.

[JuanDeLeon]

Thank you. I updated to 5.2.2, removed iOS platform and added it back. First, it is still breaking the TabView. And also, the action bar color now doesn't match the real color (it stays the same, as if I didn't set flat property to true). All it does is to get rid of the little subtle border at the bottom of the Action Bar.

[MartoYankov]

@JuanDeLeon Perhaps I'm missing something, because I can't reproduce this. The only problem I can reproduce is that the TabBar hides on livesync. Can you provide a playground example or a code snippet?

[rowdyrabouw]

Hi @MartoYankov Please have a look at https://github.com/rowdyrabouw/TabViewApp that I created earlier.

[MartoYankov]

@rowdyrabouw This is the app I was testing with, but I haven't removed the *ngIf directive of the TabView. I see the problem with the disappearing tab bar now. However, I can't reproduce the effect @JuanDeLeon mentioned - about the different color.

[rowdyrabouw]

@MartoYankov the package.json is still tailored for {N} 4. Did you change it to {N} 5 yourself?

[MartoYankov]

Yes, to latest nativescript-angular and tns-core-modules.

[JuanDeLeon]

Sorry, there may be something wrong on my project. It works as expected on playground. https://play.nativescript.org/?template=play-vue&id=zUP5y1

[narusevic]

Also it is not possible to set tabTextFontSize if using *ngIf="initFinished" solution. The font gets reseted.

[narusevic]

It looks like that then using *ngIf="initFinished" solution, event loaded returns wrong reference to not existent tab view. The only way I found to access the TabView which is shown for user is to access it on selectedIndexChanged event and use this code:

const tabViewElement = <TabView>e.object; tabViewElement.android.tabLayout.setTabTextFontSize(8);

It looks like that with this solution you can also change colour @JuanDeLeon