What is the best possible way to apply lazy load in Flatlist in react native. Currently there is infinite scroll in the flatlist. I am new to React native so i dont have any idea.
Flatlist supports lazy loading, Flatlist provide on scroll pagination, Flatlist avoid unnecessary rerendering, Flatlist scrolls are fast and page rendering time decreases once used.
Even though React. lazy is supposed to be used with dynamic imports, it supports just about any Promise that resolves to a react component. This fits perfectly with our needs.
You should use
<FlatList ....
onEndReached={this.endReached}
onEndReachedThreshold={.7}
.../>
the onEndReached
: Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
and onEndReachedThreshold
: How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.
E.g:
class YourClass extends Component {
state = { list: [], offset: 0, limit: 100 };
componentDidMount() {
this.fetchResult();
}
fetchResult = () => {
const { offset, limit, list } = this.state;
fetchModeDateFromAPI(offset, limit).then(res => {
if (!res.list) return;
this.setState({
list: list.concat(res.list),
offset: offset + 100,
limit: limit
});
});
};
render = () => {
return (
<FlatList
style={{ flex: 1 }}
extraData={this.state}
onEndReached={this.fetchResult}
onEndReachedThreshold={0.7}
data={this.state.list}
renderItem={rowData => {}}
keyExtractor={item => item.id.toString()}
/>
);
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With