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

Activity

1. NickIliev

   added

   bug

   os: ios

   support: sev3

   tabs

   on Jan 2, 2020
2. NickIliev commented on Jan 6, 2020

   

   NickIliev

   on Jan 6, 2020

   ContributorAuthor

   More actions

   The solution is to wrap the BottomNavigation in an additional layout.
   Playground demo here
3. NickIliev commented on Jan 8, 2020

   

   NickIliev

   on Jan 8, 2020

   ContributorAuthor

   More actions

   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>
4. NickIliev commented on Jan 14, 2020

   

   NickIliev

   on Jan 14, 2020

   ContributorAuthor

   More actions

   This issue seems closely related to the above behavior
5. vakrilov

   self-assigned this

   on Jan 16, 2020
6. vakrilov

   added

   in progress

   on Jan 16, 2020
7. vakrilov commented on Jan 20, 2020

   

   vakrilov

   on Jan 20, 2020

   Contributor

   More actions

   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.
8. NickIliev

   closed this as completedon Feb 3, 2020
9. NickIliev commented on Feb 3, 2020

   

   NickIliev

   on Feb 3, 2020

   ContributorAuthor

   More actions

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