NativeScript showOverNavigation not overlapping ActionBar

Question

I have checked the documentation but can't seem to get this working with a NativeScript + JS project,

I have added showOverNavigation="true" to the RadSideDrawer, not sure why it won't overlap the ActionBar. Tried moving the ActionBar around but won't render it.

Code - (***StackOverflow code block not displaying the Page tags below).

<ActionBar title="Home" class="action-bar">
    <ActionItem tap="{{ onShare }}" ios.systemIcon="9" ios.position="left" android.systemIcon="res://ic_menu_share" android.position="actionBar"></ActionItem>
    <ActionItem tap="{{ onDelete }}" ios.systemIcon="16" ios.position="right" text="delete" android.position="popup"></ActionItem>
</ActionBar>

<GridLayout rows="*" height="1500px" xmlns:nsDrawer="nativescript-ui-sidedrawer">

    <nsDrawer:RadSideDrawer id="sideDrawer" rows="0" showOverNavigation="true">
        <nsDrawer:RadSideDrawer.drawerContent >
            <StackLayout backgroundColor="gray">
                <StackLayout height="56" style="text-align: center; vertical-align: center;">
                    <Label text="Navigation Menu" />
                </StackLayout>
                <StackLayout>
                    <Label text="Primary" padding="10" backgroundColor="lightgray" />
                    <Label text="Social" padding="10" />
                    <Label text="Promotions" padding="10" />
                    <Label text="Labels" padding="10" backgroundColor="lightgray" />
                    <Label text="Important" padding="10" />
                    <Label text="Starred" padding="10" />
                    <Label text="Sent Mail" padding="10" />
                    <Label text="Drafts" padding="10" />
                </StackLayout>
                <Label text="Close" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}" />
            </StackLayout>
        </nsDrawer:RadSideDrawer.drawerContent>

        <nsDrawer:RadSideDrawer.mainContent>
            <StackLayout>
                <Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />
                <Button text="Open Drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />
            </StackLayout>
        </nsDrawer:RadSideDrawer.mainContent>
    </nsDrawer:RadSideDrawer>

</GridLayout>

Answer 1

I found a Drawer Navigation sample on the NativeScript website for NativeScript + JS which explains how its done.

By routing to the nsDrawer:RadSideDrawer first then loading in the Page/ActionBar content into nsDrawer:RadSideDrawer.mainContent.

Link to sample.