FlatList calls `onEndReached` when it's rendered
Here is render() function for my simple category list page.
Recently I added pagination for my FlatList View so when the user scrolls to the bottom, onEndReached is called in a certain point(onEndReachedThreshold value length from the bottom), and it will fetch the next categories and concatenate the categories props.
But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached is triggered before it reach the bottom.
Am I putting wrong value for onEndReachedThreshold? Do you see any problem?
return (
<View style= flex:1 >
<FlatList
data=this.props.categories
renderItem=this._renderItem
keyExtractor=this._keyExtractor
numColumns=2
style=flex: 1, flexDirection: 'row'
contentContainerStyle=justifyContent: 'center'
refreshControl=
<RefreshControl
refreshing = this.state.refreshing
onRefresh = ()=>this._onRefresh()
/>
// curent value for debug is 0.5
onEndReachedThreshold=0.5 // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700
onEndReached = (distanceFromEnd)=> // problem
console.log(distanceFromEnd) // 607, 878
console.log('reached'); // once, and if I scroll about 14% of the screen,
//it prints reached AGAIN.
this._onEndReachedThreshold()
/>
</View>
)
UPDATE I fetch this.props.categories data here
componentWillMount()
if(this.props.token)
this.props.loadCategoryAll(this.props.token);
react-native
edited Oct 30 '18 at 19:40
inga
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
|
show 9 more comments
Here is render() function for my simple category list page.
Recently I added pagination for my FlatList View so when the user scrolls to the bottom, onEndReached is called in a certain point(onEndReachedThreshold value length from the bottom), and it will fetch the next categories and concatenate the categories props.
But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached is triggered before it reach the bottom.
Am I putting wrong value for onEndReachedThreshold? Do you see any problem?
return (
<View style= flex:1 >
<FlatList
data=this.props.categories
renderItem=this._renderItem
keyExtractor=this._keyExtractor
numColumns=2
style=flex: 1, flexDirection: 'row'
contentContainerStyle=justifyContent: 'center'
refreshControl=
<RefreshControl
refreshing = this.state.refreshing
onRefresh = ()=>this._onRefresh()
/>
// curent value for debug is 0.5
onEndReachedThreshold=0.5 // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700
onEndReached = (distanceFromEnd)=> // problem
console.log(distanceFromEnd) // 607, 878
console.log('reached'); // once, and if I scroll about 14% of the screen,
//it prints reached AGAIN.
this._onEndReachedThreshold()
/>
</View>
)
UPDATE I fetch this.props.categories data here
componentWillMount()
if(this.props.token)
this.props.loadCategoryAll(this.props.token);
react-native
edited Oct 30 '18 at 19:40
inga
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
1
onEndReachedThresholdvalue range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped
– soutot
Dec 20 '17 at 16:24
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
1
If this is the case, you can try adding some conditional rendering to render yourFlatListonly after yourcategoriesis filled with values. Something like this:categories.length > 0 ? <FlatList... /> : < ActivityIndicator />
– soutot
Dec 20 '17 at 16:44
1
You can try adding this condition inside your<View>. Something like this:<View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works
– soutot
Dec 20 '17 at 17:02
|
show 9 more comments
Here is render() function for my simple category list page.
Recently I added pagination for my FlatList View so when the user scrolls to the bottom, onEndReached is called in a certain point(onEndReachedThreshold value length from the bottom), and it will fetch the next categories and concatenate the categories props.
But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached is triggered before it reach the bottom.
Am I putting wrong value for onEndReachedThreshold? Do you see any problem?
return (
<View style= flex:1 >
<FlatList
data=this.props.categories
renderItem=this._renderItem
keyExtractor=this._keyExtractor
numColumns=2
style=flex: 1, flexDirection: 'row'
contentContainerStyle=justifyContent: 'center'
refreshControl=
<RefreshControl
refreshing = this.state.refreshing
onRefresh = ()=>this._onRefresh()
/>
// curent value for debug is 0.5
onEndReachedThreshold=0.5 // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700
onEndReached = (distanceFromEnd)=> // problem
console.log(distanceFromEnd) // 607, 878
console.log('reached'); // once, and if I scroll about 14% of the screen,
//it prints reached AGAIN.
this._onEndReachedThreshold()
/>
</View>
)
UPDATE I fetch this.props.categories data here
componentWillMount()
if(this.props.token)
this.props.loadCategoryAll(this.props.token);
react-native
edited Oct 30 '18 at 19:40
inga
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
Here is render() function for my simple category list page.
Recently I added pagination for my FlatList View so when the user scrolls to the bottom, onEndReached is called in a certain point(onEndReachedThreshold value length from the bottom), and it will fetch the next categories and concatenate the categories props.
But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached is triggered before it reach the bottom.
Am I putting wrong value for onEndReachedThreshold? Do you see any problem?
return (
<View style= flex:1 >
<FlatList
data=this.props.categories
renderItem=this._renderItem
keyExtractor=this._keyExtractor
numColumns=2
style=flex: 1, flexDirection: 'row'
contentContainerStyle=justifyContent: 'center'
refreshControl=
<RefreshControl
refreshing = this.state.refreshing
onRefresh = ()=>this._onRefresh()
/>
// curent value for debug is 0.5
onEndReachedThreshold=0.5 // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700
onEndReached = (distanceFromEnd)=> // problem
console.log(distanceFromEnd) // 607, 878
console.log('reached'); // once, and if I scroll about 14% of the screen,
//it prints reached AGAIN.
this._onEndReachedThreshold()
/>
</View>
)
UPDATE I fetch this.props.categories data here
componentWillMount()
if(this.props.token)
this.props.loadCategoryAll(this.props.token);
react-native
react-native
edited Oct 30 '18 at 19:40
inga
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
edited Oct 30 '18 at 19:40
inga
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
edited Oct 30 '18 at 19:40
inga
1,6651923
edited Oct 30 '18 at 19:40
inga
1,6651923
edited Oct 30 '18 at 19:40
inga
1,6651923
1,6651923
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
asked Dec 20 '17 at 16:06
John BaekJohn Baek
750944
750944
1
onEndReachedThresholdvalue range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped
– soutot
Dec 20 '17 at 16:24
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
1
If this is the case, you can try adding some conditional rendering to render yourFlatListonly after yourcategoriesis filled with values. Something like this:categories.length > 0 ? <FlatList... /> : < ActivityIndicator />
– soutot
Dec 20 '17 at 16:44
1
You can try adding this condition inside your<View>. Something like this:<View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works
– soutot
Dec 20 '17 at 17:02
|
show 9 more comments
1
onEndReachedThresholdvalue range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped
– soutot
Dec 20 '17 at 16:24
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
1
If this is the case, you can try adding some conditional rendering to render yourFlatListonly after yourcategoriesis filled with values. Something like this:categories.length > 0 ? <FlatList... /> : < ActivityIndicator />
– soutot
Dec 20 '17 at 16:44
1
You can try adding this condition inside your<View>. Something like this:<View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works
– soutot
Dec 20 '17 at 17:02
1
1
onEndReachedThreshold value range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped– soutot
Dec 20 '17 at 16:24
onEndReachedThreshold value range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped– soutot
Dec 20 '17 at 16:24
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
1
1
If this is the case, you can try adding some conditional rendering to render your
FlatList only after your categories is filled with values. Something like this: categories.length > 0 ? <FlatList... /> : < ActivityIndicator />– soutot
Dec 20 '17 at 16:44
If this is the case, you can try adding some conditional rendering to render your
FlatList only after your categories is filled with values. Something like this: categories.length > 0 ? <FlatList... /> : < ActivityIndicator />– soutot
Dec 20 '17 at 16:44
1
1
You can try adding this condition inside your
<View>. Something like this: <View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works– soutot
Dec 20 '17 at 17:02
You can try adding this condition inside your
<View>. Something like this: <View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works– soutot
Dec 20 '17 at 17:02
|
show 9 more comments
3 Answers
3
active
oldest
votes
Try to implement onMomentumScrollBegin on FlatList :
constructor(props)
super(props);
this.onEndReachedCalledDuringMomentum = true;
...
<FlatList
...
onEndReached=this.onEndReached.bind(this)
onEndReachedThreshold=0.5
onMomentumScrollBegin=() => this.onEndReachedCalledDuringMomentum = false;
/>
and modify your onEndReached
onEndReached = ( distanceFromEnd ) =>
if(!this.onEndReachedCalledDuringMomentum)
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stopsonEndReachedbehavior. Also I'm not familiar withconstructor(props)syntax, can we try out withES6syntax? I kindda like your logic :)
– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
|
show 7 more comments
Maybe You can bypass this FlatList bug by incrementing your page before doing async call, and then you will fetch data on every onEndReached fiers and not get errors about duplicate keys
answered Nov 12 '18 at 21:52
RafRaf
1
add a comment |
I have solved it with using debounce from lodash. Firstly, I import debounce from 'lodash.debounce'. Then I use debounce for load more function with 500 ms interval
<Flatlist
onEndReached = debounce(this._onLoadMore, 500)
/>
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47910127%2fflatlist-calls-onendreached-when-its-rendered%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try to implement onMomentumScrollBegin on FlatList :
constructor(props)
super(props);
this.onEndReachedCalledDuringMomentum = true;
...
<FlatList
...
onEndReached=this.onEndReached.bind(this)
onEndReachedThreshold=0.5
onMomentumScrollBegin=() => this.onEndReachedCalledDuringMomentum = false;
/>
and modify your onEndReached
onEndReached = ( distanceFromEnd ) =>
if(!this.onEndReachedCalledDuringMomentum)
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stopsonEndReachedbehavior. Also I'm not familiar withconstructor(props)syntax, can we try out withES6syntax? I kindda like your logic :)
– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
|
show 7 more comments
Try to implement onMomentumScrollBegin on FlatList :
constructor(props)
super(props);
this.onEndReachedCalledDuringMomentum = true;
...
<FlatList
...
onEndReached=this.onEndReached.bind(this)
onEndReachedThreshold=0.5
onMomentumScrollBegin=() => this.onEndReachedCalledDuringMomentum = false;
/>
and modify your onEndReached
onEndReached = ( distanceFromEnd ) =>
if(!this.onEndReachedCalledDuringMomentum)
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stopsonEndReachedbehavior. Also I'm not familiar withconstructor(props)syntax, can we try out withES6syntax? I kindda like your logic :)
– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
|
show 7 more comments
Try to implement onMomentumScrollBegin on FlatList :
constructor(props)
super(props);
this.onEndReachedCalledDuringMomentum = true;
...
<FlatList
...
onEndReached=this.onEndReached.bind(this)
onEndReachedThreshold=0.5
onMomentumScrollBegin=() => this.onEndReachedCalledDuringMomentum = false;
/>
and modify your onEndReached
onEndReached = ( distanceFromEnd ) =>
if(!this.onEndReachedCalledDuringMomentum)
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
Try to implement onMomentumScrollBegin on FlatList :
constructor(props)
super(props);
this.onEndReachedCalledDuringMomentum = true;
...
<FlatList
...
onEndReached=this.onEndReached.bind(this)
onEndReachedThreshold=0.5
onMomentumScrollBegin=() => this.onEndReachedCalledDuringMomentum = false;
/>
and modify your onEndReached
onEndReached = ( distanceFromEnd ) =>
if(!this.onEndReachedCalledDuringMomentum)
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
edited Dec 27 '17 at 8:37
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
answered Dec 22 '17 at 11:43
IlarioIlario
4,34112240
4,34112240
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stopsonEndReachedbehavior. Also I'm not familiar withconstructor(props)syntax, can we try out withES6syntax? I kindda like your logic :)
– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
|
show 7 more comments
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stopsonEndReachedbehavior. Also I'm not familiar withconstructor(props)syntax, can we try out withES6syntax? I kindda like your logic :)
– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
1
1
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stops
onEndReached behavior. Also I'm not familiar with constructor(props) syntax, can we try out with ES6 syntax? I kindda like your logic :)– John Baek
Dec 26 '17 at 13:30
Hi! Sorry I had serious techinical issue on other problem, and now I'm back to this problem :) I tried out your solution but it just stops
onEndReached behavior. Also I'm not familiar with constructor(props) syntax, can we try out with ES6 syntax? I kindda like your logic :)– John Baek
Dec 26 '17 at 13:30
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
@JohnBaek Hi! yes you can try also without constructor, just use state
– Ilario
Dec 27 '17 at 8:36
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum : true ?
– John Baek
Dec 27 '17 at 8:37
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
state = onEndReachedCalledDuringMomentum: true and onMomentum this.setState( onEndReachedCalledDuringMomentum : false )
– Ilario
Dec 27 '17 at 8:38
1
1
it's working :)
– John Baek
Jan 3 '18 at 4:34
it's working :)
– John Baek
Jan 3 '18 at 4:34
|
show 7 more comments
Maybe You can bypass this FlatList bug by incrementing your page before doing async call, and then you will fetch data on every onEndReached fiers and not get errors about duplicate keys
answered Nov 12 '18 at 21:52
RafRaf
1
add a comment |
Maybe You can bypass this FlatList bug by incrementing your page before doing async call, and then you will fetch data on every onEndReached fiers and not get errors about duplicate keys
answered Nov 12 '18 at 21:52
RafRaf
1
add a comment |
Maybe You can bypass this FlatList bug by incrementing your page before doing async call, and then you will fetch data on every onEndReached fiers and not get errors about duplicate keys
answered Nov 12 '18 at 21:52
RafRaf
1
Maybe You can bypass this FlatList bug by incrementing your page before doing async call, and then you will fetch data on every onEndReached fiers and not get errors about duplicate keys
answered Nov 12 '18 at 21:52
RafRaf
1
answered Nov 12 '18 at 21:52
RafRaf
1
answered Nov 12 '18 at 21:52
RafRaf
1
answered Nov 12 '18 at 21:52
RafRaf
1
1
add a comment |
add a comment |
I have solved it with using debounce from lodash. Firstly, I import debounce from 'lodash.debounce'. Then I use debounce for load more function with 500 ms interval
<Flatlist
onEndReached = debounce(this._onLoadMore, 500)
/>
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
add a comment |
I have solved it with using debounce from lodash. Firstly, I import debounce from 'lodash.debounce'. Then I use debounce for load more function with 500 ms interval
<Flatlist
onEndReached = debounce(this._onLoadMore, 500)
/>
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
add a comment |
I have solved it with using debounce from lodash. Firstly, I import debounce from 'lodash.debounce'. Then I use debounce for load more function with 500 ms interval
<Flatlist
onEndReached = debounce(this._onLoadMore, 500)
/>
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
I have solved it with using debounce from lodash. Firstly, I import debounce from 'lodash.debounce'. Then I use debounce for load more function with 500 ms interval
<Flatlist
onEndReached = debounce(this._onLoadMore, 500)
/>
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
answered Nov 16 '18 at 11:01
quynhnguyen68quynhnguyen68
65
65
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47910127%2fflatlist-calls-onendreached-when-its-rendered%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
onEndReachedThresholdvalue range is 0 and 1, where 0 is the top of the scroll and 1 is the end of it. At first, I'd try adding 0.7 to it and check if it works as expected. Let me know if it helped– soutot
Dec 20 '17 at 16:24
Thanks! But 0.7 didn't solve the problem. Still triggering onEndReached at the first time
– John Baek
Dec 20 '17 at 16:25
what about having a class variable like this._mounted?
– Facundo La Rocca
Dec 20 '17 at 16:35
1
If this is the case, you can try adding some conditional rendering to render your
FlatListonly after yourcategoriesis filled with values. Something like this:categories.length > 0 ? <FlatList... /> : < ActivityIndicator />– soutot
Dec 20 '17 at 16:44
1
You can try adding this condition inside your
<View>. Something like this:<View> categories ? <FlatList ... > : <Image ... /> </View>. You can find more examples here: reactjs.org/docs/conditional-rendering.html Let me know if it works– soutot
Dec 20 '17 at 17:02