Nativescript: Navigating to a page on iOS with a flat action bar breaks safe area overflowing

[interrobrian]

Environment
N/A (running in NativeScript Playground)

Describe the bug
In iOS, if you setup a page with a flat action bar and then navigate to it, then layouts won't overflow into the safe area correctly.

To Reproduce
Create a page with an action bar set to flat and a layout which should span the safe area. Set a background on the layout so that you can see it. Run on an iPhone with a safe area (I'm using an iPhone XS). Navigate to this page from another page. Note that the layout does not overflow into the safe area. Also note that if you repeat these steps and don't set the action bar to flat, the layout will overflow correctly.

Expected behavior
As noted in the safe area support documentation, any layout which touches the safe area should overflow it, unless specified otherwise. Furthermore, the flat property of the action bar shouldn't effect the safe area overflow behavior of other widgets on the page.

Sample project
I don't know how to use NativeScript Core, so here is a NativeScript Angular project which demonstrates this bug: https://play.nativescript.org/?template=play-ng&id=WcOmao&v=12
Using an iPhone X*, from the start page, tap "Correct Component" and you'll get a component which overflows the safe area correctly. Go back and tap "Broken Component" and it will not overflow the safe area. Note that the only difference between the two components is that the action bar is set to flat in BrokenComponent.

Additional context
This bug only happens when you navigate to the page. It does not happen on the starting page of an app.

[yoat]

I was originally watching #1638, which was closed in favor of this bug. However the issue I'm experiencing happens on all pages, not just after navigation.

From this bug: "This bug only happens when you navigate to the page. It does not happen on the starting page of an app."
If that is true there may be two separate issues here. I believe #1638 should be reopened to address the issue of spacing under the ActionBar on all iOS devices (not just notched X devices) and for all pages (including the first page).

[b4rtt]

Any progress here? Thats really bad and I need to use flat="true".

[salvadorcoronel]

I’m working with Angular like Framework, I have the same problem, but It only happens when I do a navigation to other view using "clearHistory:false" (option by default of navigation) as a parameter of next code this.router.navigate(["page2"], {clearHistory:false});
When I do a navigation with "clearHistory:true" parameter I don't have the issue

[yoat]

This issue appears to be resolved for me in NS 5.2.

In iOS I have switched flat="true" and there is no extra gap below the ActionBar and I can get a perfect, seamless color-match once again.

[interrobrian]

@MartoYankov This issue seems to have gotten linked to some others which did get fixed, but the original issue that I opened is still not fixed in 5.2. If you run the playground mentioned in the original post, the bug still happens.

[MartoYankov]

@interrobrian Yes, this issue should be fixed with the next patch release. It's currently under the @rc and @next tags if you want to try it out. Unfortunately, the playground works only with minor versions, so it won't get the fix until 5.3.

[interrobrian]

@MartoYankov Awesome thanks!

[brandon-sigao]

5.2.0 seemed to solve this for us as well. Unfortunately for some reason adding flat="true" to the action bar creates a white bar at the bottom of the Iphone X, which I'm assuming is also related to the safe area. Is that something expected to be handled in 5.3.0 as well or are we just missing a setting?

[MartoYankov]

@brandon-sigao As I see it, the white bar at the bottom is exactly the problem of the current issue. See the image provided by @interrobrian above. This should be fixed with the next patch release of the tns-core-modules 5.2.2.

[brandon-sigao]

@MartoYankov Well I'm an idiot, I totally missed that screenshot above. Thanks for the quick reply!

[demetrio812]

I can confirm that 5.2.2 fixes the bottom problem too

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.