Comments (10)
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.
from nativescript-pulltorefresh.
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.
from nativescript-pulltorefresh.
@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
from nativescript-pulltorefresh.
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.
from nativescript-pulltorefresh.
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
from nativescript-pulltorefresh.
@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.
from nativescript-pulltorefresh.
@markosole, unfortunately, your solution break blur effect of ScrollView
content under ActionBar
, which, in my case, leads to user experience degradation.
from nativescript-pulltorefresh.
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?
from nativescript-pulltorefresh.
@jagadish-kb my workaround for this problem was to use ListView
with one item (which contains all information from ScrollView
) instead of ScrollView
.
from nativescript-pulltorefresh.
@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?
from nativescript-pulltorefresh.
Related Issues (20)
- Indicator Color HOT 2
- Conditionnnal blocked plugin
- color and backgroundColor property applies to content element GridLayout HOT 1
- Fails to build on Android for Nativescript 6.0.0 HOT 1
- app:runsbg after updating to nativescript 6 HOT 1
- Not working with webview on android, for ios works fine HOT 5
- Class not found android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener HOT 3
- Android ViewPager2 increased sensitivity HOT 2
- Not working on iOS onLoaded or programmatically HOT 2
- Changelog for 2.0.0 ?
- Wrong version being downloaded by default HOT 2
- exception with version 3 HOT 8
- Cannot read property 'SwipeRefreshLayout' of undefined HOT 2
- How to prevent pull to refresh when dragging down on Google Maps? HOT 1
- Cannot access 'PullToRefresh' before initialization HOT 3
- FR: add api to show refreshing-indicator by script
- NativeScript 7 Support HOT 2
- tns plugin add @nstudio/[email protected] HOT 1
- Move to community HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â¤ī¸ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-pulltorefresh.