{ "id": "171180", "key": "TIMOB-25804", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "11", "description": "Is not a bug in our product", "name": "Not Our Bug" }, "resolutiondate": "2019-04-12T18:43:11.000+0000", "created": "2018-02-24T09:04:39.000+0000", "priority": { "name": "None", "id": "6" }, "labels": [ "barimage", "engTriage", "ios", "ios11", "safearea" ], "versions": [ { "id": "20060", "description": "", "name": "Release 7.0.2", "archived": false, "released": true, "releaseDate": "2018-02-09" } ], "issuelinks": [], "assignee": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2019-04-12T18:43:11.000+0000", "status": { "description": "A resolution has been taken, and it is awaiting verification by reporter. From here issues are either reopened, or are closed.", "name": "Resolved", "id": "5", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "Issue: For iPhone X, bar image is not showing properly as like iPhone 8 and other. Always crop top portion.\r\n\r\n\r\nSteps To Reproduce:\r\n1. Create a new Alloy App.\r\n2. Use the following test code and image then run it on iOS X and iOS 8 for checking the difference.\r\n\r\n{code:title=index.xml}\r\n\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\r\n\r\n{code}\r\n\r\nThanks!", "attachment": [ { "id": "64898", "filename": "example-fixed.png", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2018-02-24T22:43:18.000+0000", "size": 175558, "mimeType": "image/png" }, { "id": "64896", "filename": "iPhone8.png", "author": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "created": "2018-02-24T08:57:38.000+0000", "size": 1890051, "mimeType": "image/png" }, { "id": "64895", "filename": "iPhoneX.png", "author": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "created": "2018-02-24T08:57:38.000+0000", "size": 1429668, "mimeType": "image/png" }, { "id": "64894", "filename": "relevent-dark-header.png", "author": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "created": "2018-02-24T08:57:29.000+0000", "size": 14218, "mimeType": "image/png" }, { "id": "64901", "filename": "TestNavBar.zip", "author": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-02-26T08:17:26.000+0000", "size": 81164, "mimeType": "application/zip" } ], "flagged": false, "summary": "iOS: Bar Image is not showing properly in iPhone X", "creator": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "subtasks": [], "reporter": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "environment": "Operating System\r\n Name = Mac OS X\r\n Version = 10.13.2\r\nNode.js\r\n Node.js Version = 8.9.4\r\n npm Version = 5.6.0\r\nTitanium CLI\r\n CLI Version = 5.0.14\r\nTitanium SDK\r\n SDK Version = 7.0.2.GA\r\n \r\n Target Platform = iphone X", "closedSprints": [ { "id": 1124, "state": "closed", "name": "2019 Sprint 8", "startDate": "2019-03-31T18:03:00.000Z", "endDate": "2019-04-12T18:03:00.000Z", "completeDate": "2019-04-12T19:04:50.175Z", "originBoardId": 114 } ], "comment": { "comments": [ { "id": "434867", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "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). \r\n\r\nSo there are two short- and long-term options I could think of:\r\n- Use a larger image for the iPhone X that includes the safe area height (short term)\r\n- Replace bar-images with \"real\" navigation bar titles (long term)\r\n\r\n*EDIT*: Here is a solution:\r\n# Check if the current device is an iPhone X\r\n# Use a different image for that exact device\r\n{code:js}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: '#fff',\r\n barImage: getBarImage()\r\n});\r\n\r\nvar nav = Ti.UI.iOS.createNavigationWindow({\r\n window: win\r\n});\r\n\r\nnav.open();\r\n\r\nfunction getBarImage() {\r\n if (isiPhoneX()) {\r\n return 'relevent-dark-header-iphonex.png'\r\n }\r\n return 'relevent-dark-header.png';\r\n}\r\n\r\nfunction isiPhoneX() {\r\n if (Ti.Platform.displayCaps.logicalDensityFactor !== 3) {\r\n return false\r\n }\r\n\r\n return (Ti.Platform.displayCaps.platformWidth === 375 \r\n && Ti.Platform.displayCaps.platformHeight === 812) ||\r\n (Ti.Platform.displayCaps.platformWidth === 375\r\n && Ti.Platform.displayCaps.platformHeight === 812);\r\n}\r\n{code}\r\n\r\nLooks like this:\r\n !example-fixed.png|thumbnail! \r\n\r\nAnd 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.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2018-02-24T22:15:12.000+0000", "updated": "2018-02-24T22:42:46.000+0000" }, { "id": "434893", "author": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "body": "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.\r\n\r\nApart from what Hans has suggested, following approach can also be used if it suits the requirement -\r\n\r\n1. If the barImage is single coloured image (only the image near title view is different)\r\n{code:java}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: '#fff',\r\n barColor: 'black',\r\n titleImage: 'relevent-dark-header.png',\r\n});\r\n \r\nvar nav = Ti.UI.iOS.createNavigationWindow({\r\n window: win\r\n});\r\n \r\nnav.open();\r\n{code}\r\n\r\n2. If the barImage is patterned (only the image near title view is different)\r\n\r\n{code:java}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: '#fff',\r\n barImage: 'Use the patterned image',\r\n titleImage: 'relevent-dark-header.png',\r\n});\r\n \r\nvar nav = Ti.UI.iOS.createNavigationWindow({\r\n window: win\r\n});\r\n \r\nnav.open();\r\n{code}", "updateAuthor": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-02-26T08:38:20.000+0000", "updated": "2018-02-26T08:38:20.000+0000" } ], "maxResults": 7, "total": 7, "startAt": 0 } } }