@NickIliev commented on Thu Jan 02 2020

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 NativeScript/NativeScript#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 NativeScript/NativeScript#7471

Reported via t.1447435

@NickIliev commented on Mon Jan 06 2020

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

@NickIliev commented on Wed Jan 08 2020

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 commented on Tue Jan 14 2020

This issue seems closely related to the above behavior

@vakrilov commented on Mon Jan 20 2020

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.