Tabview disappears on iOS when navigated to from other page

rowdyrabouw commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

yspreen commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

rowdyrabouw commented 6 years ago

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

yspreen commented 6 years ago

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 commented 6 years ago

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

MartoYankov commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

MartoYankov commented 5 years ago

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

JuanDeLeon commented 5 years ago

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

MartoYankov commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

MartoYankov commented 5 years ago

@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 commented 5 years ago

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

MartoYankov commented 5 years ago

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

JuanDeLeon commented 5 years ago

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 commented 5 years ago

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

narusevic commented 5 years ago

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

narusevic commented 5 years ago

Also it looks like, that after minimising and opening app, font size gets restored even if we are not using *ngIf="initFinished". This is very frustrating.

alqabali commented 5 years ago

@MartoYankov , @rowdyrabouw any progress? this my tns info output:

✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.3.2 version and is up to date.
✔ Component tns-core-modules has 5.3.1 version and is up to date.
✔ Component tns-android has 5.3.1 version and is up to date.
✔ Component tns-ios has 5.3.1 version and is up to date.

i still suffer from this problem on ios like described in the main issue details .

AppsByFen commented 4 years ago

Any update? TabView is unusable for me on ios, I can't believe this issue is still open after more than 2 years

NathanaelA commented 4 years ago

@FanniPutnoczki - Can you provide a demo that actually is broken? You can either post a link to a repo, or drop it on the playground and we will look at it.

NativeScript / nativescript-angular