[TIMOB-25777] iOS: Cannot use semi-transparent bar colors

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Not Our Bug
Resolution Date	2018-08-08T03:49:30.000+0000
Affected Version/s	Release 7.0.2
Fix Version/s	n/a
Components	iOS
Labels	apple-restriction, escalation
Reporter	Motiur Rahman
Assignee	Unknown
Created	2018-02-14T01:06:04.000+0000
Updated	2018-08-08T03:49:30.000+0000

Description

The barColor property on iOS ignores an alpha channel. Neither a hex value like ‘#22ff0000’ or rgba value work. The bar is always completely opaque. These values work on android. It does work if you set the barColor to ‘transparent’, but that doesn't work for the specified alpha channel (translucent) *Steps to Reproduce:* 1. Create a new App then run the following test code on an iPhone device or simulator. *Test Code:*

var gradientView = Ti.UI.createView({
    width: Ti.UI.FILL,
    height: 1000,
    top: 0,
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '50%' },
        endPoint: { x: '100%', y: '50%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ]
    }
});

var win = Ti.UI.createWindow({
    title: 'This bar should be transparent',
    barColor: 'rgba(255,255,255,0.1)',
    includeOpaqueBars: true,
    translucent: true,
    extendEdges: [Ti.UI.EXTEND_EDGE_TOP]
});

win.add(gradientView);

var navWin = Ti.UI.iOS.createNavigationWindow({
   window: win
});

navWin.open();

*Expected Behaviour:* The bar color should be translucent because of alpha channel. *Actual Behaviour:* The bar color is completely opaque. Thanks

Comments

Hans Knöchel 2018-02-14

Per apple documentation: {quote} There are only a handful of direct customizations you can make to the navigation bar. Specifically, it is alright to modify the barStyle, tintColor, and translucent properties, but you must never directly change UIView-level properties such as the frame, bounds, alpha, or hidden properties directly. {quote} All of those three properties are available in Titanium and "translucent: true" may be the best option to use here. Summarized, Apple does not allow you to use custom opacity values for your navigation bar due to its human interface guidelines. If you still want to use semi-transparent values, you could use the [barImage](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Window-property-barImage) property of the Ti.UI.Window and pass a 1x1px semi-transparent image. Please see the linked docs for details.

JSON Source