Nativescript ActionBar overflowing to safe area on iPhone 11 emulator ( notch )

I am developing an app in NativeScript meant for both Android and iOS devices. After getting a macOS device to run the iOS emulator I encountered a problem with how ActionBar is displayed.

This is how ActionBar looks on Android and that is what I wanted it to look.

Android Pixel 3 emulator

This is how it looks on iOS:

iPhone 11 emulator

As you can see the problem is with the notch overlapping with the action bar.

I tried adding iosOverflowSafeArea property as false to the action bar, and setting the padding in ios css file but nothing seemed to work. From searching for a solution this doesn't seem like a common problem so I am inclined to think there is a simple solution.

Edit:

Here is my ActionBar component:

<ActionBar iosOverflowSafeArea="false" class="action-bar">
  <StackLayout orientation="horizontal" width="100%" horizontalAlignment="left" verticalAlignment="center" class="fa">
    <Label class="action-label action-item" text="BFC club" width="55%"></Label>
    <Label text="{{ username | titlecase}}" class="action-bar-title text-right" width="25%"></Label>
    <Label text="&#xf007;" class="action-label action-item" width="10%" (tap)="navigate('user')"></Label>
    <Label text="&#xf09d;" class="action-label action-item" width="10%" (tap)="navigate('bf')"></Label>
  </StackLayout>
</ActionBar>