Cannot make the Actionbar transparent

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter. I am not able to achieve the transparent actionbar. I tried all the code shared here at github and on stackoverflow but it doesn’t work.

Which platform(s) does your issue occur on?

iOS/Android/Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.1.3
• Cross-platform modules: 3.1.1
• Runtime(s): tns-ios = 3.1.0 │ nativescript │ 3.1.3
  │ tns-core-modules │ 3.1.1
  │ tns-android │ 3.1.1
  │ tns-ios │ 3.1.0

Please tell us how to recreate the issue in as much detail as possible.

Just create new project, and apply following code.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Yes. Check following:

ngOnInit() {  
        //ios back for titlebar - https://www.nativescript.org/blog/how-to-match-a-nativescript-actionbar-s-color-on-ios
        if (topmost().ios) {
            topmost().ios.controller.backgroundColor= UIColor.clearColor;
            var navigationBar = topmost().ios.controller.navigationBar;
            navigationBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);            
            navigationBar.translucent = false;
            navigationBar.shadowImage = UIImage.new();            
            navigationBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20,0.20, 0.20, 0);            
        }
    }  

[triniwiz]

you can move the code lower in the lifecycle

ngAfterViewChecked() {
 navBar.barStyle = UIBarStyle.BlackTranslucent;
            navBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            navBar.shadowImage = UIImage.new();
            navBar.translucent = true;
}

[sserdyuk]

@dotnetdreamer Here’s an example of working code. It’s a custom widget for NS Core, but you can adapt it for your needs.

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