Comments (4)
It should be simple, you can set a flag to true on your state at the beginning of the loadMoreAsync function, and to false when it reaches its end.
In the render function if that flag is true you render the loading icon!
Hopefully, I helped, good luck!
from react-native-infinite-scroll-view.
@HugoCerdeiraSkrey what's flag? I've tried to set this.state.isLoading = true
but didn't see any loading indicator showed
from react-native-infinite-scroll-view.
I'm using following
<ListView dataSource={this.dataSource} renderRow={this.renderRow} renderScrollComponent={props => <InfiniteScrollView {...props} />} canLoadMore={this.props.canLoadMoreContent} onLoadMoreAsync={this.loadMoreContentAsync} />
loadMoreContentAsync is invoked, but I don't see any activity indicator. Am I doing something wrong?
from react-native-infinite-scroll-view.
@troublediehard I think you're right based on the document. But the problem might be because ListView won't render when your rowData is the same (at the end of the list, number of rows is the same until onLoadMoreAsync finish). That's what i think, i'm not sure about that also.
And my solution for that is:
- Modify the InfiniteScrollView class:
class InfiniteScrollViewCustom extends InfiniteScrollView {
render() {
let statusIndicator;
//Here is what i did: Instead of waiting for a status to add statusIndicator to the end of this.props.children I added an Indicator element at the end of the children list.
statusIndicator = React.cloneElement(
this.props.renderLoadingIndicator(),
{ key: 'loading-indicator' },
);
if (this.state.isDisplayingError) {
statusIndicator = React.cloneElement(
this.props.renderLoadingErrorIndicator(
{ onRetryLoadMore: this._loadMoreAsync }
),
{ key: 'loading-error-indicator' },
);
}
let {
renderScrollComponent,
...props,
} = this.props;
Object.assign(props, {
onScroll: this._handleScroll,
children: [this.props.children, statusIndicator],
});
console.log(props);
return cloneReferencedElement(renderScrollComponent(props), {
ref: component => { this._scrollComponent = component; },
});
}
}
- Set renderLoadingIndicator property and use the flag in here:
<ListView
renderScrollComponent={props => <InfiniteScrollViewCustom renderLoadingIndicator={() => this.state.loading ? <ActivityIndicator style={{ marginTop: 10 }}/> : <View/>} {...props} />}
dataSource={...}
renderRow={...}
canLoadMore={...}
onLoadMoreAsync={...} />
So that we always have a child at the end of this.props.children
and the Indicator will appear when the flag is true.
Here is my first solution, that might be a trick than a solution, but hope that helps somebody.
from react-native-infinite-scroll-view.
Related Issues (20)
- ReactComponent is not defined HOT 4
- A complete example? HOT 5
- Why does it need to manually calculate when end is reached? HOT 1
- Scrolling broken - Please check the fix HOT 3
- Complete Example showing all available events and properties ? HOT 15
- Can't scroll: Adding a ListView as the only child of the Scroll View snaps the lists scroll offset to the top.
- No verbose Documentation, No example. how to implement? HOT 2
- DefaultLoadingIndicator not working on loading more, any idea? HOT 3
- Suggestion: improve error reporting HOT 2
- Infinite scroll does not work for off-screen elements HOT 2
- Incremental list view
- Support infinite scroll in both directions HOT 5
- Does the release of FlatList change anything with this package?
- scrollToEnd support
- Possibility for commenting the example code?
- Not entirely sure how to use this HOT 1
- onLoadMoreAsync and isLoading relationship
- scrollTo is not a function
- Typescript types HOT 1
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 react-native-infinite-scroll-view.