Tap event not happening from inside the child of a Dock Layout in iOS but you get the event if placed in Dock Layout Parent

Question

I do have a home page where there's a dock layout and the dock layout has a docked tab navigation at the bottom of the screen and the rest of the screen has pages that the tab navigates to. Inside the dock layout I have a nested child flexbox which is docked at the bottom as the bottom navigation bar and page-router-outlet. I have placed a tap event inside the nested flexbox for navigating to respective pages but the tap event doesn't happen at the flexbox level. When I place the tap event on the dock layout, I am getting the event. This problem only occurs in iOS but everything works perfectly in Android.

This is my code:

<DockLayout stretchLastChild="false"    
 (tap)="parentTap($event)"    
  class="dock-layout">        
  
      <FlexboxLayout  (tap)="childTap($event)"  
      dock="bottom" class="bottom-nav">      
             
              <FlexboxLayout   height="75"           
                  (tap)="navigate(item)"             
                *ngFor="let item of bottomNavList;let i=index"            
                 [class.active-tab]="currentTab==item.label"            
                  class="tab-item">          
  
                         <Label text="icon" textWrap="true"></Label>                
                         <Label text="text" textWrap="true"></Label>     
   
                 </FlexboxLayout>        

     </FlexboxLayout>                

    <page-router-outlet></page-router-outlet></DockLayout>

Only parentTap event works and not childTap event and the navigate function in iOS. Whereas in Android everything works fine no issues at all.

https://github.com/NativeScript/NativeScript/issues/3006 - I tried referring to this code but doesn't work.

While the same works with GridLayout and not DockLayout in iOS.

Answer 1

Try setting a higher z-index for the FlexboxLayout with childTap:

CSS:

.parent-flexbox {
    z-index: 10;
}

.child-flexbox {
    z-index: 100;
}

html:

<DockLayout
    stretchLastChild="false"    
    (tap)="parentTap($event)"    
    class="dock-layout parent-flexbox"
>        
  
    <FlexboxLayout
        (tap)="childTap($event)"  
        dock="bottom"
        class="bottom-nav child-flexbox"
    >
         // ...
    </FlexboxLayout>
</FlexboxLayout>

or try stretching the FlexboxLayout to the full height and width of the wrapping FlexboxLayout:

<FlexboxLayout
    (tap)="childTap($event)"  
    dock="bottom"
    class="bottom-nav"
    flexGrow="1"
>
    <FlexboxLayout
        height="100%"
        (tap)="navigate(item)"
    >
         // ...
    </FlexboxLayout>
</FlexboxLayout>