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

[sserdyuk]

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;
}



md5-e01844700b77604a6e559d2d694c0745



$ 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    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

[NickIliev]

@sserdyuk the flat property does that when set to true. As by design it removes the translucency on iOS, I think this is expected that flat set to true won't allow the ActionBar to be translucent.

API reference for flat property

Removes the shadow/border at the bottom of the ActionBar and removes translucency on iOS. Default false.

[sserdyuk]

@NickIliev Transparency doesn't work regardless whether flat is set to true or false. Here's the same test app with flat=false, and while it looks slightly different, it still isn't working right.
My point is that transparent background is an edge case, and needs to be implemented separately from the existing logic.

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

[uzarsalan]

I found, that action bar transparency principles has changed in iOS 10. Don't know how really it relates to our problem.
https://stackoverflow.com/questions/38020089/how-to-make-navigation-bar-transparent-in-ios-10
Can anybody check this? I can't adopt it to nativescript, because don't know Swift.

[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

[NickIliev]

As this is a common iOS problem I would suggest using the solution provided here or other solutions used in native iOS apps.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.