Adding view to NativeScript ActionBar breaks navigation

Question

I'm trying to implement an <ActionBar> that starts off with a transparent background then, as the page is scrolled a background colour is faded in.

I've made some progress with this by creating a new UIView and adding it to the navigationbar. Then setting the background colour on this view based on the current scroll position.

Page:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" backgroundSpanUnderStatusBar="true">

<Page.actionBar>
    <ActionBar title="Page two">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="tapGoBack"/>
    </ActionBar>
</Page.actionBar>

<ScrollView id="scrollView" style="margin-top: -64" backgroundColor="salmon">

    <StackLayout style="height: 800">
        <Image src="~/img/enjoying-a-tasty-burger-picjumbo-com.jpg" />
    </StackLayout>

</ScrollView>
</Page>

Codebehind:

var frameModule = require("ui/frame");

exports.pageLoaded = function(args) {
    var page = args.object;

    if (page.ios) {

        var controller = frameModule.topmost().ios.controller;

        /**
         * Make ActionBar background transparent
         */
        var navBar = controller.navigationBar;
        navBar.shadowImage = new UIImage();
        navBar.setBackgroundImageForBarMetrics(new UIImage, UIBarMetrics.UIBarMetricsDefault);

        /**
         * Add custom view to navBar
         */
        var navBounds = navBar.bounds;
        var myView = UIView.alloc().init();
        myView.frame = {
            origin: { x: navBounds.origin.x, y: navBounds.origin.y - 20 },
            size: { width: navBounds.size.width, height: navBounds.size.height + 20 }
        };
        myView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        navBar.addSubview(myView);

        navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, 0.0);
        navBar.sendSubviewToBack(myView);

        /**
         * Fade in myView on scroll
         */
        var scrollView = page.getViewById("scrollView");
        scrollView.on('scroll', function(args){
            var offset = args.object.verticalOffset;
            myView.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, (offset-50)/50);
        });

    }

}


exports.tapGoBack = function() {
    frameModule.topmost().goBack();
}

Works great - except now I am unable to use the NavigationButton.

I can see from Xcode's view debugger that the UIView is behind the <NavigationButton> yet I can not interact with it.

Does anyone have any idea why adding a UIView to the NavigationBar would break the NavigationButton?

There is an animated gif (too large to upload here) here showing the problem and some further info in this GitHub issue.

There is a sample project hosted on GitHub here if anyone wants to play along.

┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 2.4.2           │ 2.4.2          │ Up to date    │
│ tns-core-modules │ 2.4.4           │ 2.4.4          │ Up to date    │
│ tns-android      │                 │ 2.4.1          │ Not installed │
│ tns-ios          │ 2.4.0           │ 2.4.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

Answer 1

Just disable the userInteractionEnabled for myView and you are good to go!

...
myView.userInteractionEnabled = false;
navBar.addSubview(myView);
...