Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27263] iOS 13: Modal windows with large titles do not honor barColor

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2019-09-17T16:04:25.000+0000
Affected Version/sRelease 8.2.0
Fix Version/sRelease 8.2.0
ComponentsiOS
Labelsn/a
ReporterHans Knöchel
AssigneeVijay Singh
Created2019-07-20T22:07:59.000+0000
Updated2020-11-23T04:36:46.000+0000

Description

On iOS 13, modal windows with large titles do not honor their barColor property. Natively, it seems like iOS 13 receives it's modal bar color from the background (see native app attached), but doing the same in Titanium also doesn't work. Here is what I tried (both with backgroundColor and barColor): 
var win = Ti.UI.createWindow();
 
var btn = Ti.UI.createButton({
    title: 'Open VC'
});
 
btn.addEventListener('click', function() {
    var win2 = Ti.UI.createWindow({ backgroundColor: 'red', title: 'Hello', largeTitleEnabled: true });

    var nav = Ti.UI.createNavigationWindow({
        window: win2
    });
    
    nav.open({ modal: true })
});
 
win.add(btn);
win.open();
In addition, it seems like Titanium applies the default bar tint color different to native iOS, which should be investigated in a different ticket!

Attachments

FileDateSize
Bildschirmfoto 2019-08-14 um 12.43.50.png2019-08-14T10:43:57.000+0000108520
native_modal_normal.png2019-08-14T12:37:45.000+000055599
test_barcolor_adapted.zip2019-08-16T20:18:10.000+000047620
test_barcolor.zip2019-08-14T12:37:17.000+000036072
ti_modal_large.png2019-08-14T12:37:45.000+000030899
tie_modal_normal.png2019-08-14T12:37:45.000+000060858

Comments

  1. Hans Knöchel 2019-08-14

    [~vijaysingh] Any update here? This is one of the last iOS 13 blockers we have. You can fix it by using the UINavigationBarAppearance class for iOS 13+
  2. Hans Knöchel 2019-08-16

    I updated the native test case with "test_barcolor_adapted" which fixes it properly by using UINavigationBar.appearance().backgroundColor = XXXX on iOS 13+ and resets it to nil on the viewWillDisappear delegate of the view controller so it's more flexible for other windows. But I think it should be synced in ViewWillAppear as well, so other view controller can tint back to their color as well. We workarounded it by blocking large titles if dark mode is enabled.
  3. Vijay Singh 2019-08-22

    [~hknoechel] 1. In navigation bar 'barTintColor' property is not working when 'prefersLargeTitles' is set true. This is happening in native code as well. So I will file a bug to apple. I am looking for workaround and trying suggestion given by you as well. 2. For backgroundColor, Ideally backgroundColor of window should come behind the navigation bar as per native behavior in iOS 13. I am looking in this.
  4. Hans Knöchel 2019-08-22

    [~vijaysingh] That is not correct. When prefersLargeTitles is set to true, the background-color is used for tinting the nav bar - per design. The same does not work for Titanium, so Titanium needs to fix it. This is a release blocker, so we hope this can be investigated soon. *EDIT*: This also effects light mode with large titles + **non**-modal windows. Please take this bug serious.
  5. Vijay Singh 2019-08-28

    PR - https://github.com/appcelerator/titanium_mobile/pull/11184 Test Case 1- 
           var win1 = Ti.UI.createWindow({ backgroundColor: 'red', title: 'Test1', largeTitleEnabled: true });
       var button1 = Ti.UI.createButton({
           title: "Open Next"
       });
   
       win1.add(button1);
    
       var nav = Ti.UI.createNavigationWindow({
           window: win1
       });
       
       nav.open();
   
       var win2 = Ti.UI.createWindow({ backgroundColor: 'green', title: 'Test2', largeTitleEnabled: true });
       var button2 = Ti.UI.createButton({
           title: "Close"
       });
       win2.add(button2);
   
       button1.addEventListener('click', function(e){
           nav.openWindow(win2);
       })
   
       button2.addEventListener('click', function(e){
           win2.close();
       })
    Test Case 2 - 
       var win = Ti.UI.createWindow({
       backgroundColor: 'white'
   });
    
   var btn = Ti.UI.createButton({
       title: 'Open VC'
   });
    
   btn.addEventListener('click', function() {
       var win2 = Ti.UI.createWindow({ backgroundColor: 'red', title: 'Hello', largeTitleEnabled: true });
       var nav = Ti.UI.createNavigationWindow({
           window: win2
       });
       nav.open({ modal: true })
   });
   win.add(btn);
   win.open();
    Test Case 3 - 
       var win1 = Ti.UI.createWindow({ 
   backgroundColor: 'red', 
   title: 'Test1', 
   largeTitleEnabled: true,
   extendEdges: [Ti.UI.EXTEND_EDGE_TOP] 
   });
    var data = [{ title: 'Test 1' }, { title: 'Test 2' }, { title: 'Test 3' }, { title: 'Test 4' } ];
    var tableView = Ti.UI.createTableView({data : data});
    win1.add(tableView);
   
   var nav = Ti.UI.createNavigationWindow({
       window: win1
   });
   
   nav.open();
   
   var win2 = Ti.UI.createWindow({ 
       backgroundColor: 'green', 
       title: 'Test2', 
       largeTitleEnabled: true,
       extendEdges: [Ti.UI.EXTEND_EDGE_TOP] 
   });
   var data2 = [{ title: 'Test 1' }, { title: 'Test 2' }, { title: 'Test 3' }, { title: 'Test 4' } ];
   var tableView2 = Ti.UI.createTableView({data : data2});
   win2.add(tableView2);
   tableView.addEventListener('click', function(e){
       nav.openWindow(win2);
   });
  6. Vijay Singh 2019-08-28

    [~hknoechel] Would you like to test above PR. I am still working on this to find a better solution.
  7. Vijay Singh 2019-09-03

    Reason of this issue is that we set the default value of property [edgesForExtendedLayout ](https://github.com/appcelerator/titanium_mobile/blob/da842f4eff133891667abac41b197a177ff94944/iphone/TitaniumKit/TitaniumKit/Sources/API/TiUtils.m#L1577) to UIRectEdgeNone from [here](https://github.com/appcelerator/titanium_mobile/blob/da842f4eff133891667abac41b197a177ff94944/iphone/TitaniumKit/TitaniumKit/Sources/API/TiUtils.m#L1641). Apple recommend to not change default value as per [doc](https://developer.apple.com/documentation/uikit/uiviewcontroller/1621515-edgesforextendedlayout?language=objc). So use window property [extendEdges](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TabGroup-property-extendEdges). 
           var win = Ti.UI.createWindow({ 
           backgroundColor: 'blue', 
           title: 'Test', 
           largeTitleEnabled: true,
           extendEdges: [Ti.UI.EXTEND_EDGE_TOP] 
       });
    Note- With Above PR there is minor flickering issue. But it is better to have that PR in SDK. We should not change default value extendEdges in minor release.
  8. Hans Knöchel 2019-09-03

    Interesting! So does moving to EXTEND_EDGE_TOP + using the PR fix all flicker issues? And please consider making it to EXTEND_EDGE_ALL in SDK 9.0 (maybe with a ticket to remind everyone). If I remember correctly, there used to be some issues (around SDK 4/5) related to list-views in windows with extended edges, but maybe thats fixed by now.
  9. Hans Knöchel 2019-09-04

    We just tested with "extendEdges" on all windows + your latest pull request changes and it does not fix the issue so far.
  10. Vijay Singh 2019-09-04

    [~hknoechel] you are still seeing flickering issue or any other?
  11. Hans Knöchel 2019-09-04

    Still the same as yesterday. You can test with our app.
  12. Vijay Singh 2019-09-04

    [~hknoechel] Its weird if I use property in view's .xml file it doesn't work. I guess you are using this property inside .xml . Please use it inside Controller'e .js file. See attached [sample app](https://www.dropbox.com/s/e1x3dfiqdfmmdaz/TestAise.zip?dl=0). I do not have access to your app.
  13. Lokesh Choudhary 2019-09-05

    FR Passed. PR Merged.
  14. Lokesh Choudhary 2019-09-05

    Keeping this ticket in resolved as more fixes and additions can be made to it.
  15. Vijay Singh 2019-09-06

    [~lchoudhary] PR (with minor fixes) - https://github.com/appcelerator/titanium_mobile/pull/11199 PR (8_2_X) - https://github.com/appcelerator/titanium_mobile/pull/11209
  16. Hans Knöchel 2019-09-10

    Again, this is not fixed so far. Recent changes caused a regression that now tints the bar-color of windows with large titles to be different from the background-color of the view, which is what all this should be about. We tested the above (currently unmerged) pull request as well. Note that is does work with modal windows with large titles now, but not inside tab groups (and probably for normal navigation windows).
  17. Hans Knöchel 2019-09-10

    Workaround: Remove the barColor for iOS 13 and later!
  18. Vijay Singh 2019-09-10

    [~hknoechel] Please see my latest comment in PR https://github.com/appcelerator/titanium_mobile/pull/11184. barColor has preference over backgroundColor. It will give more customization on navigation bar.
  19. Lokesh Choudhary 2019-09-17

    Verified the fix in SDK 8.2.0.v20190916135701. Closing.

JSON Source