RadSideDrawer (Angular) - navigation isn't working correctly on iOS



I’m having trouble with the RadSideDrawer in the Drawer Navigation Angular Example.

After creating the sample project with the procedure delineated in section Project Setup below, when I run the sample on an iPhoneX Simulator, the Home List Item is correctly selected in the left drawer (screen 1 below). However, upon tapping on the Browse list item, the contents of the whole left drawer are shifted up vertically & the selected list item is still Home; it doesn’t change to Browse (screen 2 below). The tkMainContent is updated correctly to Browse.

I’ve tried this same example on other simulators & a physical device (iPhone5s with iOS 11.3.1) & experienced the same behavior.

How is this fixed?

Project Setup (nothing was changed in project)

  • tns create drawerExample --template tns-template-drawer-navigation-ng
  • npm install
  • tns run ios --emulator

Environment Details

  • MacOS 10.13.4
  • XCode Version 9.3.1 (9E501)
  • xcodeproj is installed & configured properly
  • CocoaPods are installed.
  • NativeScript 4.0.2
  • tns-core-modules 4.0.1
  • tns-ios 4.0.1