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

ios

#1

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