ActionBar – iOS 11 Large Title

ios

#1

It is easily possible to enable large navigation bar titles in NativeScript.
However there’s a big issue:


Screenshot #1 – View is scrolled entirely to the top:

Screenshot #2 – View is scrolled a few pixels only:

As you can see there’s a weird white bar that should not be there…

I have created a very simple playground:

I applied very few changes to the basic angular template:

  • Add some content to allow scrolling in home/home.component.ts
  • Add some background colors in home/home.component.css
  • Add a ActionBarDirective: home/action-bar.directive.ts
  • Register the ActionBarDirective: home/home.module.ts

I hope someone can tell how we can remove this white bar.
I’ve already tried to debug the view hierarchy but with no success unfortunately.

Thanks in advance!


#2

In Slack @multishiv19 came up with a great idea:

He worked around

by just using the scrollView as the root layout.
and then adding a paddingTop on the stacklayout.

It’s a well working hack that’s still gut one problem unfortunately:

The scrollbar indicator will be a bit off at the top.

What’s interesting thought:

ListViews work just fine as root.

Im looking forward to some more insights.