Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25874] iOS 11.2: Ti.UI.RefreshControl with Ti.UI.Window.largeTitleEnabled hides spinner

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2018-05-14T09:18:41.000+0000
Affected Version/sRelease 6.3.0, Release 7.1.0, Release 7.0.2
Fix Version/sRelease 7.3.0
ComponentsiOS
Labelsios-11, largetitleenabled, refreshcontrol, spinner
ReporterFlavio Bontà
AssigneeHans Knöchel
Created2018-03-15T18:37:12.000+0000
Updated2018-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

FileDateSize
328jD.png2018-03-16T09:15:57.000+000048360
Simulator Screen Shot - iPhone 8 - 2018-03-15 at 19.30.42.png2018-03-15T18:33:18.000+000079981
Simulator Screen Shot - iPhone 8 - 2018-03-15 at 19.30.45.png2018-03-15T18:33:18.000+000091436

Comments

  1. Sharif AbuDarda 2018-03-15

    Hello, Please share a full reproducible test code that regenerates the issue for iOS. Thanks.
  2. Flavio Bontà 2018-03-16

    Sorry!!
       <Alloy>
       	<NavigationWindow id="index" platform="ios">
       		<Window id="main">
       		</Window>
       	</NavigationWindow>
       </Alloy>
       
       "#main": {
       	title: "test",
       	largeTitleEnabled: true
       }
       
       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();
       
    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!
  3. Hans Knöchel 2018-03-16

    Really really interesting! The issue is that we use the addSubview approach for both iOS < 10 and iOS >= 10, but iOS >= 10 support the setRefreshControl: 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!
  4. Hans Knöchel 2018-03-19

    So this turned out to be more complex than initially thought: For iOS 10+, the refreshControl property 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:
       var 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();
       
    The only reason why many developers in the native world didn't see that before is because edgesForExtendedLayout (the native property behind extendEdges) is UIRectEdgeAll by default, but we use UIRectEdgeNone as 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!
  5. Vijay Singh 2018-03-22

    PR : https://github.com/appcelerator/titanium_mobile/pull/9942
  6. Samir Mohammed 2018-06-20

JSON Source