New ActionBar "flat" code doesn't support background-color: transparent on iOS

This has been recently introduced in commit for #3900. While it’s a welcome step forward in CSS styling, it doesn’t work properly with ActionBar background color set to “transparent” because translucent is always set to false, which renders “transparent” as “black”. On the other hand, setting translucent to true doesn’t render any color, so, it seems, “transparent” background color needs special handling that’s not yet present.

Below is the test app and a screenshot. The expected result is that the action bar has the same background as the body.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

@import 'nativescript-theme-core/css/core.light.css';

.btn {
    font-size: 18;
}

.page {
    background-color: turquoise;
}

.action-bar {
    background-color: transparent;
    color: white;
    flat: true;
}

$ tns info

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.1.3           │ 3.1.3          │ Up to date    │
│ tns-core-modules │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-android      │                 │ 3.1.1          │ Not installed │
│ tns-ios          │ 3.1.0           │ 3.1.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

[sserdyuk]

@uzarsalan Here’s the code I’m using in production and it performs well in both iOS 9 and 10. I’m using it as a custom component. shared/widgets/transparentActionBar is the path to the file with the component. I’m overriding update() to apply my styling after NS is done applying the default. For more info see the docs http://docs.nativescript.org/ui/basics#custom-components

Component in shared/widgets/transparentActionBar:

import { ActionBar as BaseActionBar } from "ui/action-bar";

export class ActionBar extends BaseActionBar {
    private get navBar(): UINavigationBar {
        const page = this.page;
        // Page should be attached to frame to update the action bar.
        if (!page || !page.frame) {
            return undefined;
        }
        return (<UINavigationController>page.frame.ios.controller).navigationBar;
    }

    public update() {
        super.update();    
        let navBar = this.navBar;
        if (navBar) {
            navBar.barStyle = UIBarStyle.BlackTranslucent;
            navBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            navBar.shadowImage = UIImage.new();
            navBar.translucent = true;
        }
    }
}

XML:

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:ab="shared/widgets/transparentActionBar"
>
  <ab:ActionBar title="123">
  </ab:ActionBar>
  <GridLayout rows="auto,*,auto,*,auto,auto,*">
   .....
  </GridLayout>
</Page>

CSS:

Page ActionBar {
  flat: true;
  background-color: transparent;
}

[alfrednerstu]

@sserdyuk When you set the shadowImage to a new UIImage, translucency doesn’t work.

See this Stack Overflow thread: https://stackoverflow.com/questions/19226965/how-to-hide-uinavigationbar-1px-bottom-line/19227158#19227158

I’ve created a issue suggesting a way to remove the hairline border without affecting translucency here: https://github.com/NativeScript/NativeScript/issues/6620