Nativescript: [iOS] remove ActionBar Border (feature-request)

[firescript]

provided example below

actionbarborder.zip

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Tell us about the problem

ActionBar border remains after all styling efforts

Which platform(s) does your issue occur on?

ios for sure, not sure about android

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

tns create new

i updated the code to have page.ios trying to get the border to go away. I want black text, white action bar bg and no bottom border.

var createViewModel = require("./main-view-model").createViewModel;
var frame = require('ui/frame');

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();

    if (page.ios) {
        var navigationBar = frame.topmost().ios.controller.navigationBar;        
        navigationBar.translucent = false;
        navigationBar.barStyle = 0; 
        page.backgroundSpanUnderStatusBar = true;
        page.actionBarHidden = false; 
    }  

}
exports.onNavigatingTo = onNavigatingTo;

[NickIliev]

Hi @firescript

Removing the thin border from the bottom of navigationBar is common problem in iOS.
To remove it use the native solution as follows:

    if (page.ios) {
        var navigationBar = frame.topmost().ios.controller.navigationBar;        
        navigationBar.translucent = false;
        navigationBar.barStyle = 0; 
        page.backgroundSpanUnderStatusBar = true;
        page.actionBarHidden = false; 

        // added this lines of code
        navigationBar.shadowImage = new UIImage();
        navigationBar.setBackgroundImageForBarMetrics(new UIImage(), UIBarMetrics.UIBarMetricsDefault)
    }  

[sitefinitysteve]

@NickIliev Could we maybe put in another request (or turn this one into on) to get this added as an option to the PageActionBar?

Like

<ActionBar ios.hasShadow="false"

?

[jlooper]

I'd like to bump this a bit, as having more control over the ActionBar is really a win for good UI design

[RyanSMurphy]

Is there any progress on this?

[RyanSMurphy]

NickIliev on the code you added above, I am getting the following errors:

app/components/template/template.component.ts(84,37): error TS2346: Supplied parameters do not match any signature of call target.

app/components/template/template.component.ts(85,55): error TS2346: Supplied parameters do not match any signature of call target.
app/components/template/template.component.ts(85,83): error TS2339: Property 'UIBarMetricsDefault' does not exist on type 'typeof UIBarMetrics'.

This code is in the ngoninit function:

if (this.page.ios) {
        var navigationBar = frame.topmost().ios.controller.navigationBar;      

        // added this lines of code
        navigationBar.shadowImage = new UIImage();
        navigationBar.setBackgroundImageForBarMetrics(new UIImage(), UIBarMetrics.UIBarMetricsDefault)
    }  

[NickIliev]

@RyanSMurphy currently thoruhg TypeScript we have exposed the short syntax meaning you can access the UIBarMetrics via the following

UIBarMetrics.Default

The best approach to avoid confusion is to install tns-platform-declarations and use the IntelliSense.

[RyanSMurphy]

@NickIliev Thanks. what about the new UIImage() giving: Supplied parameters do not match any signature of call target.?

Also, should the code above, when properly called remove the bottom border on ios?

[NickIliev]

@RyanSMurphy

Currently there are some changes in the way you can initialize an empty UIImage so the correct code would be like

if (page.ios) {
    var navigationBar = topmost().ios.controller.navigationBar;        
    navigationBar.translucent = false;
    navigationBar.barStyle = 0; 
    page.backgroundSpanUnderStatusBar = true;
    page.actionBarHidden = false; 

    // added this lines of code
    navigationBar.shadowImage = UIImage.new();
    navigationBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default)
} 

Or instead of UIImage.new() you can also use alloc().init() e.g.

    navigationBar.shadowImage = UIImage.alloc().init()

Both would do the same so it is a matter of personal preferences and style.

FYI you can see the exact syntax of all the native methods and classes using the tns-platform-declarations files even if they are not installed by directly refering the source.
e.g. here is the converted (from Objective-C to JavaScript) API for UIImage

[RyanSMurphy]

For nativescript angular @NickIliev is correct. Just add frame infront of topmost().

[terreb]

@NickIliev, when I apply your solution the part of content below navigation bar slides up and gets hidden behind the nav bar on page load for me. Then when I tap any control the content slides down under the nav bar where it should be from the begging. On other pages I experience the opposite when page is loading the content is correctly resides under nav bar when done it slides up under the nav bar. Once I remove that code all is good on all pages, the content doesn't jump and stays where it should be. What could cause such behaviour?

tns: 3.1.2
tns-core-modules: 3.1.0
tns-ios: 3.1.0

[terreb]

Ok, when I remove only this part:

    navigationBar.translucent = false;
    navigationBar.barStyle = 0; 
    page.backgroundSpanUnderStatusBar = true;
    page.actionBarHidden = false; 

it works perfectly well. What is the reason for this code then?

[RyanSMurphy]

@NickIliev or anyone, how do you reverse this?

Thanks

[RyanSMurphy]

@NickIliev is there also an android implementation?

[henrychavez]

@NickIliev I recently update to tns-core-modules: 3.1.1 and this doesn't work:

if (page.ios) {
var navigationBar = topmost().ios.controller.navigationBar;
navigationBar.translucent = false;
navigationBar.barStyle = 0;

// added this lines of code
navigationBar.shadowImage = UIImage.new();
navigationBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default)

}

any idea?

[EddyVerbruggen]

<ActionBar flat="true"> implements this (see #3900). It was merged last month into tns-core-modules. I'm successfully using it in a few app already 💪

[NickIliev]

Closing as implemented via https://github.com/NativeScript/NativeScript/pull/3900

[tskweres]

@EddyVerbruggen in the latest version flat="true" makes the action bar double the height

"dependencies": {
"@angular/animations": "~6.1.0",
"@angular/common": "~6.1.0",
"@angular/compiler": "~6.1.0",
"@angular/core": "~6.1.0",
"@angular/forms": "~6.1.0",
"@angular/http": "~6.1.0",
"@angular/platform-browser": "~6.1.0",
"@angular/platform-browser-dynamic": "~6.1.0",
"@angular/router": "~6.1.0",
"nativescript-angular": "next",
"nativescript-dom": "^2.0.2",
"nativescript-svg": "^1.3.7",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "~6.0.0-rc.1",
"tns-core-modules": "next",
"zone.js": "~0.8.2"
},
"devDependencies": {
"@angular/compiler-cli": "~6.1.0",
"@ngtools/webpack": "~6.2.0",
"@types/chai": "^4.0.2",
"@types/mocha": "^2.2.41",
"@types/node": "^7.0.5",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"chai": "^4.2.0",
"lazy": "1.0.11",
"mocha": "^5.2.0",
"mocha-junit-reporter": "^1.18.0",
"mocha-multi": "^1.0.1",
"nativescript-dev-appium": "next",
"nativescript-dev-sass": "^1.6.0",
"nativescript-dev-typescript": "~0.7.4",
"nativescript-dev-webpack": "next",
"typescript": "~2.7.2"
},

[tskweres]

@EddyVerbruggen @NickIliev It has something to do with the new iosOverflowSafeArea. If you set your parent container to iosOverflowSafeArea="false" and the actionbar to flat="true", it works. But if iosOverflowSafeArea="true", the ActionBar is double the height

[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.