Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25311] iPhone X: Height / Inset of Window Toolbar

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionNot Our Bug
Resolution Date2017-11-29T07:50:11.000+0000
Affected Version/sRelease 6.2.0
Fix Version/sn/a
ComponentsiOS
Labelsiphonex, toolbar
ReporterMatthew Delmarter
AssigneeVijay Singh
Created2017-09-16T23:02:17.000+0000
Updated2018-08-06T17:52:04.000+0000

Description

This is in relation to the win.toolbar that shows at the bottom of the window. I "think" the issue is the height of the toolbar? Really not sure how else this issue would be resolved without some pretty ugly "hacks". Please see the attached screenshot that highlights the issue.

Attachments

FileDateSize
iPhone_X_-_iOS_11_0_and_Desktop_—_Local.png2017-09-16T22:58:57.000+000023944
Simulator Screen Shot - iPhone X - 2017-09-18 at 15.02.32.png2017-09-18T13:03:04.000+000060930
TestToolbarInTab.zip2017-11-02T08:31:39.000+000038979

Comments

  1. Hans Knöchel 2017-09-17

    To be clear, the expected layout would be that it would fill the rounded bottom-part of the screen as well? Will check how it's looking natively.
  2. Matthew Delmarter 2017-09-17

    It is a good question Hans. I have no idea how Apple solved this at a native level. From a logical perspective I would hope that it replicates the behaviour of the navigation bar extending to the top of the iPhone X screen. So yes, hopefully it will fill the rounded bottom part, that would be nice.
  3. Hans Knöchel 2017-09-18

    Tested it out, looks correct for me: !Simulator Screen Shot - iPhone X - 2017-09-18 at 15.02.32.png|thumbnail! Test-Case: 
       
   var win = Ti.UI.createWindow({
     backgroundColor: '#fff',
     toolbarSettings: {
       translucent: false,
       animated: false,
       barColor: '#ccc'
     },
     toolbar: [Ti.UI.createButton({title: 'Whoop!'})]
   });
   
   var nav = Ti.UI.iOS.createNavigationWindow({
     window: win
   })
   
   nav.open();
  4. Matthew Delmarter 2017-09-21

    I created a test case for you. The issue manifests itself when you use tabs: 
       var tabGroup = Ti.UI.createTabGroup();
   
   var win1 = Ti.UI.createWindow({
       title: 'Window 1',
       backgroundColor: 'blue',
       toolbarSettings: {
           translucent: false,
           animated: false,
           barColor: 'red'
       }
   });
   
   var tab1 = Ti.UI.createTab({
       title: 'Tab 1',
       window: win1
   });
   
   tabGroup.addTab(tab1);
   
   win1.setToolbar([Ti.UI.createButton({title: 'Whoop!'})]);
   
   tabGroup.open();
    In my first screenshot, I was hiding the tabGroup while entering a multi-select mode etc. Anyway the test case shows the following gap under the toolbar... !https://www.evernote.com/shard/s1/sh/7ca0f3ae-13b7-47a8-a72a-5327e5a231bd/0693a7170c5e3f0a/res/e3c281e6-53d6-4b9c-80b4-0fac8befad8c/skitch.png?resizeSmall&width=832!
  5. Vijay Singh 2017-11-02

    This problem is happening in native iOS app as well . Attached is sample native iOS app as " TestToolbarInTab.zip". This is bug from apple side for iPhone X . People have discussed about it [https://forums.developer.apple.com/thread/86982](https://forums.developer.apple.com/thread/86982) and [https://stackoverflow.com/questions/46205703/ios-11-iphone-x-uinavigationbars-toolbar-spacing-incorrect-when-embedded-in](https://stackoverflow.com/questions/46205703/ios-11-iphone-x-uinavigationbars-toolbar-spacing-incorrect-when-embedded-in). If we use custom toolbar, this problem will not happen - 
       var tabGroup = Ti.UI.createTabGroup();
    var win1 = Ti.UI.createWindow({
       title: 'Window 1',
       backgroundColor: 'blue',
   });
    var tab1 = Ti.UI.createTab({
       title: 'Tab 1',
       window: win1
   });
    tabGroup.addTab(tab1); 
   var whoop = Ti.UI.createButton({
       title: 'Whoop!'
   });
   var toolbar = Ti.UI.createToolbar({
       items: [whoop],
       bottom: 0
   });
   win1.add(toolbar);
   tabGroup.open();
  6. Vijay Singh 2017-11-06

    Filed bug to apple - https://openradar.appspot.com/35358090.
  7. Vijay Singh 2017-11-27

    This issue has been marked duplicate by Apple and marked closed. I have verified it in Xcode 9.2 beta with iPhone X (11.2 beta), problem is not happening. It looks it is fixed in iOS 11.2 .
  8. Eric Merriman 2018-08-06

    Closing as "not our bug". If you disagree, please reopen.

JSON Source