[iOS] BottomNavigation with custom TabStrip is "cutting" any scrollable content

[NickIliev]

Environment

• CLI: 6.3.0
• Cross-platform modules: 6.3.0
• iOS Runtime: 6.3.0

Describe the bug

Using custom tan strip with scrollable content is causing the last portion of the content to be hidden behind the tab strip. Possible related to https://github.com/NativeScript/NativeScript/issues/7471

To Reproduce

• Deploy on iOS phone/emmulator (works on Android)
• Use this Playground
• Scroll to the bottom - you should be able to see the "END of CONTENT" label but it is hidden behind the tab strip.

Expected behavior

To be able to scroll all scrollable content outside the tabstrip item.

Sample project

https://play.nativescript.org/?template=play-ng&id=xDXBee&v=8&_ga=2.96675223.942765476.1577959082-1966613037.1569573015

Additional context

Probably related to https://github.com/NativeScript/NativeScript/issues/7471

Reported via t.1447435

[NickIliev]

The solution is to wrap the BottomNavigation in an additional layout. Playground demo here

[NickIliev]

It seems that the grid-wrapping solution above is not working when we have a page-router-outlet as tab content. For example the issue is present when there is a large scrollable content in one of the page-router-outlets as shown below

    <BottomNavigation #bottomNav
                      (selectedIndexChanged)="activateOutlet($event.newIndex)"
                      (loaded)="onBottomNavLoaded()">
      <TabContentItem><page-router-outlet name="overviewTab"></page-router-outlet></TabContentItem>
      <TabContentItem><page-router-outlet name="paymentTab"></page-router-outlet></TabContentItem>
      <TabContentItem><page-router-outlet name="communityTab"></page-router-outlet></TabContentItem>
      <TabContentItem><page-router-outlet name="feedTab"></page-router-outlet></TabContentItem>
      <TabContentItem><page-router-outlet name="moreTab"></page-router-outlet></TabContentItem>
    </BottomNavigation>

[NickIliev]

This issue seems closely related to the above behavior

[vakrilov]

We found that the issue is related to this "simple" rule and is caused by the NSEmptyOutletComponent used in Angular when there is lazy loaded modules. It renders a Frame which is not wrapped in a layout and the result is that it sometimes gets its dimensions wrong.

There is an easy workaround - implement and use a custom version of NSEmptyOutletComponent. The approach is shown in this repo. The custom empty outlet implementation (and usage in the routing module) is in this commit.

[NickIliev]

Issue moved to NativeScript/nativescript-angular #2116 via ZenHub