Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25804] iOS: Bar Image is not showing properly in iPhone X

GitHub Issuen/a
TypeBug
PriorityNone
StatusResolved
ResolutionNot Our Bug
Resolution Date2019-04-12T18:43:11.000+0000
Affected Version/sRelease 7.0.2
Fix Version/sn/a
ComponentsiOS
Labelsbarimage, engTriage, ios, ios11, safearea
ReporterMotiur Rahman
AssigneeVijay Singh
Created2018-02-24T09:04:39.000+0000
Updated2019-04-12T18:43:11.000+0000

Description

Issue: For iPhone X, bar image is not showing properly as like iPhone 8 and other. Always crop top portion. Steps To Reproduce: 1. Create a new Alloy App. 2. Use the following test code and image then run it on iOS X and iOS 8 for checking the difference. 
<Alloy>
	<TabGroup id="tabGroup">
		<Tab id="tab" title="My Tab" icon="myicon.png">
			<Window barImage = "/images/relevent-dark-header.png">
				
			</Window>
		</Tab>
	</TabGroup>
</Alloy>
Thanks!

Attachments

FileDateSize
example-fixed.png2018-02-24T22:43:18.000+0000175558
iPhone8.png2018-02-24T08:57:38.000+00001890051
iPhoneX.png2018-02-24T08:57:38.000+00001429668
relevent-dark-header.png2018-02-24T08:57:29.000+000014218
TestNavBar.zip2018-02-26T08:17:26.000+000081164

Comments

  1. Hans Knöchel 2018-02-24

    There is a general issue here: Bar images have always been hard to manage when it comes to devices of different size and scale. In this case, the iPhone X requires a different bar-image height than all other devices. Reading some native discussions about this topic (like [here](https://www.devno.com/1242-ios-11-iphone-x-navigationbar-background-image-too-small/)), the use case usually is a gradient or patterned view that is simply stretched. This is not possible in this case and I don't see an SDK change that would solve this design issue (let us know if you have one). So there are two short- and long-term options I could think of: - Use a larger image for the iPhone X that includes the safe area height (short term) - Replace bar-images with "real" navigation bar titles (long term) *EDIT*: Here is a solution:

    Check if the current device is an iPhone X

    Use a different image for that exact device

       var win = Ti.UI.createWindow({
       backgroundColor: '#fff',
       barImage: getBarImage()
   });
   
   var nav = Ti.UI.iOS.createNavigationWindow({
     window: win
   });
   
   nav.open();
   
   function getBarImage() {
     if (isiPhoneX()) {
       return 'relevent-dark-header-iphonex.png'
     }
     return 'relevent-dark-header.png';
   }
   
   function isiPhoneX() {
     if (Ti.Platform.displayCaps.logicalDensityFactor !== 3) {
       return false
     }
   
     return (Ti.Platform.displayCaps.platformWidth === 375 
            && Ti.Platform.displayCaps.platformHeight === 812) ||
            (Ti.Platform.displayCaps.platformWidth === 375
            && Ti.Platform.displayCaps.platformHeight === 812);
   }
    Looks like this: !example-fixed.png|thumbnail! And again: This is caused by the fact that the bar image is a non-stretchable image that cannot be reused on all possible devices. For a more modern approach, I would recommend to either use a custom navigation bar with a fixed spacing to the safe-area or move away from bar images and display the actual title, like larger apps do these days as well.
  2. Vijay Singh 2018-02-26

    If we see in native app (Attached TestNavBar.zip) also, similar problem is there. If you see [here](https://stackoverflow.com/questions/46664822/how-to-set-navigation-bar-background-image-for-all-devices-including-iphone-x), it is suggested to use different image for iPhone X. Apart from what Hans has suggested, following approach can also be used if it suits the requirement - 1. If the barImage is single coloured image (only the image near title view is different) 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff',
       barColor: 'black',
       titleImage: 'relevent-dark-header.png',
   });
    
   var nav = Ti.UI.iOS.createNavigationWindow({
     window: win
   });
    
   nav.open();
    2. If the barImage is patterned (only the image near title view is different) 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff',
       barImage: 'Use the patterned image',
       titleImage: 'relevent-dark-header.png',
   });
    
   var nav = Ti.UI.iOS.createNavigationWindow({
     window: win
   });
    
   nav.open();

JSON Source