Nativescript-ui-sidedrawer only display router-outlet's content in tkMainContent bug in IOS




We have recently upgraded our app to NativeScript v4.2 with Angular v6. Earlier we were using NativeScript v3.3 with Angular v4. The app has a common header and footer section for navigating through the app. The central area of the app loads different components as per the current menu selection.

We have used “RadSideDrawer” control of the “nativescript-ui-sidedrawer” module in the app.component.html.

The “DrawerContent” contains the UI elements for user preferences that we need to show in the drawer when the user swipes down from the header
The “Maincontent” contains the UI elements for header, footer and the central area. The central area is kept in the page-router-outlet.

The navigation from the header-footer and the slider swiping features are working fine in android but in iOS the header-footer not showing

The above issue is faced only in iOS. In Android, everything is working fine.

Following is the demo code for your reference.

An urgent help in solving this issue will be greatly appreciated!

Thanks in anticipation!
Nikesh Jain


Try using a GridLayout instead of StackLayout for the tkMainContent.


I checked with GridLayout not working


I just verified your playground in iOS, it works except with an exception actionBarHidden of undefined as there won’t be a page when your app component is created as it’s not inside a router outlet. Page will be valid only inside home component.