[TIMOB-25874] iOS 11.2: Ti.UI.RefreshControl with Ti.UI.Window.largeTitleEnabled hides spinner
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2018-05-14T09:18:41.000+0000 |
| Affected Version/s | Release 6.3.0, Release 7.1.0, Release 7.0.2 |
| Fix Version/s | Release 7.3.0 |
| Components | iOS |
| Labels | ios-11, largetitleenabled, refreshcontrol, spinner |
| Reporter | Flavio Bontà |
| Assignee | Hans Knöchel |
| Created | 2018-03-15T18:37:12.000+0000 |
| Updated | 2018-06-20T15:42:05.000+0000 |
Description
Hi,
I have created a simple navigationWindow in Alloy.
The Window has
largeTitleEnabled: true, inside the window I have a simple listView with a refreshControl.
When I run a Pull to Refresh the spinner is hidden by large-title.
Attachments
| File | Date | Size |
|---|---|---|
| 328jD.png | 2018-03-16T09:15:57.000+0000 | 48360 |
| Simulator Screen Shot - iPhone 8 - 2018-03-15 at 19.30.42.png | 2018-03-15T18:33:18.000+0000 | 79981 |
| Simulator Screen Shot - iPhone 8 - 2018-03-15 at 19.30.45.png | 2018-03-15T18:33:18.000+0000 | 91436 |
Hello, Please share a full reproducible test code that regenerates the issue for iOS. Thanks.
Sorry!!
"#main": { title: "test", largeTitleEnabled: true }The problem occurs when rest call (in this case simulated with a setTimeout 100ms) is too fast. In native iOS, the spinner is over the navigationBar (as attachment) !328jD.png|thumbnail!var counter = 0; function genData() { var data = []; var i = 1; for (i = 1; i <= 3; i++) { data.push({ properties: { title: 'ROW ' + (counter + i) } }) } counter += 3; return data; } var section = Ti.UI.createListSection(); section.setHeaderTitle("title"); section.setItems(genData()); var control = Ti.UI.createRefreshControl({ tintColor: 'red' }) var listView = Ti.UI.createListView({ sections: [section], refreshControl: control }); control.addEventListener('refreshstart', function(e) { Ti.API.info('refreshstart'); setTimeout(function() { Ti.API.debug('Timeout'); section.appendItems(genData()); control.endRefreshing(); }, 100); //if setTimeout is about 1s the problem not occurs }) $.main.add(listView); $.index.open();Really really interesting! The issue is that we use the
addSubviewapproach for both iOS < 10 and iOS >= 10, but iOS >= 10 support thesetRefreshControl:selector that is more proper for this. We will provide a fix for this later today and schedule it for one of the next releases. Thank you for reporting this!So this turned out to be more complex than initially thought: For iOS 10+, the
refreshControlproperty is used instead of adding it as a sub-view - easy! But it also flickers when using together with largeTitleEnabled = true and extendEdges = Not set (or Ti.UI.EXTEND_EDGE_NONE = default). Thats why a valid code looks like this:The only reason why many developers in the native world didn't see that before is becausevar window = Ti.UI.createWindow({ backgroundColor: '#fff', title: 'Hello World', includeOpaqueBars: true, largeTitleEnabled: true, extendEdges: [Ti.UI.EXTEND_EDGE_ALL] }); var nav = Ti.UI.iOS.createNavigationWindow({ window: window }); var control = Ti.UI.createRefreshControl({ }) var listView = Ti.UI.createListView({ sections: [Ti.UI.createListSection({ items: [{ properties: { title: 'Test' } }] })], refreshControl: control }); control.addEventListener('refreshstart', function(e) { setTimeout(function() { control.endRefreshing(); }, 1000); //if setTimeout is about 1s the problem not occurs }) window.add(listView); nav.open();edgesForExtendedLayout(the native property behindextendEdges) isUIRectEdgeAllby default, but we useUIRectEdgeNoneas the default. In Titanium SDK 8, we should change that default behavior to better match the native iOS behavior. I've added a new note to the Ti.UI.RefreshControl docs about this behavior as well and hope it's adopted by the developers. Let us know if there are follow-up questions regarding this!PR : https://github.com/appcelerator/titanium_mobile/pull/9942