iOS bounce up on refresh and no animation

[markosole]

Hi guys, I am using plugin with wrapping SrcollView like on example below:

<GridLayout columns="*" rows="*, auto" class="page-content">   
    <PullRefresh:PullToRefresh refresh="refreshList">
        <ScrollView height="100%" tap="clearTextfieldFocus">

          <!-- My content with Grid Layouts etc.  -->

        </ScrollView>
    </PullRefresh:PullToRefresh>
</GridLayout>

This works perfect on Android but does not work fine on iOS for some reason. Pull down refreshes the content (calls function on refresh), what is fine. During pulling down there is no animation displayed and after releasing it page bounces up for 100px (+- 30). Like it adds margin-top: -100 after refresh is done. Did anyone had this problem?

[markosole]

Quick fix for this is <PullRefresh:PullToRefresh refresh="refreshList" style="margin-top: 0.001"> adding margin-top: 0.001 or any positive value, 0 does not work.

[michalMajkel]

@markosole you're the man ! I was so annoyed by this issue. Your workaround fixed both problems - incorrect rendering and no animation.
I wonder what is the root cause here

[bradmartin]

Yea, I'm not sure what causes this but tomorrow I need to look into this plugin a bit for an app so maybe I'll find something for this also.

[ycherniavskyi]

After some investigation, I could say that this issue caused by ScrollView implementation in NativeScript, to be exact by this line in ScrollView implementation.

contentInsetAdjustmentBehavior disable for Safe Area Support by ScrollView (in such case I am not sure that current Safe Area Support by ScrollView is shine ☹️).

[markosole]

@ycherniavskyi
ScrollView is native component, it's just the way how it's wrapped is not good/supported. You can use my quick fix from above.

[ycherniavskyi]

@markosole, unfortunately, your solution break blur effect of ScrollView content under ActionBar, which, in my case, leads to user experience degradation.

[jagadish-kb]

I am programatically creating the PullToRefresh control and the entire page content as well (thats required). Snippet of code below

let pullToRefresh: PullToRefresh = new PullToRefresh();
    const scrollContainer: ScrollView = new ScrollView();
    scrollContainer.orientation = 'vertical';
    scrollContainer.content = stackLayout; // This is created somewhere else - actual content of page.
    
    pullToRefresh.content = scrollContainer;
    pullToRefresh.setInlineStyle('margin-top: 0.0001');
    pullToRefresh.setProperty('indicatorFillColor', '#fff000');
    pullToRefresh.setProperty('indicatorColor', '#3489db');
    pullToRefresh.on('refresh', ()=> {
      console.log('refresh event handler execution in progress...');
      setTimeout(()=> {pullToRefresh.refreshing = false;console.log('turn off refresher..')}, 2000);
      //Actual logic goes in my code.
    });

Now, I am forced to wrap my page content (stackLayout) inside a 'scrollView' else pullToRefresh.content throws an exception saying the content can either be a scrollview or a webview.

Now after wrapping in a scrollview i had the same problem as mentioned above, which got fixed with the margin-top solution. However in some pages when the background of the component is different than the background (scroll view), I see a slight gap between the action bar and the first component in the page. Is there something else that can be done?
Why cant pullToRefresh component's content be directly set with StackLayout? why should it always be a ScrollView or a WebView?

[ycherniavskyi]

@jagadish-kb my workaround for this problem was to use ListView with one item (which contains all information from ScrollView) instead of ScrollView.

[jagadish-kb]

@ychernioiavskyi Thanks for your suggestion. Initially i was going to just use RadListView component which has this pullToRefresh feature in-built & thought will just set 1 item in the list. However when working with both RadListView and ListView, AFAIU the only way to set content was to be done by setting the attributes items (data array to be bound) & itemTemplate (string - containing the template of the row). There is no method/attribute to directly set the static content for the list. This doesnt help in my case because even though i want to have just one list item, i am not sure how to set the list with the view (stackLayout) which i have already created as the list item directly. Didnt find any method or attribute on the component. Please advise. [Tried _addView method & i dont see any content on page.]

This is where i felt this plugin is better than RadListView for showing refresh indicator, because this plugin allowed us to wrap any arbitrary view in ScrollView. Additionally, am also seeing two scroll bars sometimes (one probably by scroll view & one for the content itself - after scrolling up/down then i only one scroll bar remains), is this also experienced by anyone?

[jagadish-kb]

I found a solution. Instead of wrapping my entire page content (stacklayout) in a scroll view, i just figured out that the first child in the stacklayout is a nativeview (coming from a plugin) which was of type 'UITableViewController', which implements the protocol 'UIScrollViewDelegate', & hence suffices this check here, when i set this directly as PullToRefresh's content & then without the extra scrollview wrapper everything works perfectly. Looking back at the code now makes sense why these checks are put in place.

Also, what worked was, as pointed in the root cause in the above here, when i set this nativeView.contentInsetAdjustmentBehavior = 0; (i overrided onLayout method and just set this to zero), even this works, however the isssue of two scrolls still exist. But probably for many others this fix in scrollview will fix it here as well, so will be worth while probably to raise this bug to the {N} team as well. There should be a mechanism to set this once control is created or in constructor.

Thanks @ycherniavskyi for your suggestion, it prodded me to investigate further.