Repository navigation
FlatList - onPress triggered after 3 to 5 seconds ?. #18135
Description
Description
I am displaying user contacts by retrieving from the the user device and i used flat list to display them in the page. when click on particular contact the onPress event triggered after 3 to 5 seconds when the total contacts above 100 but when i statically put 50 contacts on list the onPress event triggered immediately.
Expected Behavior
trigger the on Press event when click on particular contact immediately.
Actual Behavior
rigger the on Press event when click on particular contact after 3 to 5 seconds
this.state.contactList will contain the contacts list
<FlatList
data={this.state.contactList}
renderItem={({ item,index}) => (<UserContact onClick={() => this.navigateChat(item)} key={index} concatcInfo={item} />)}
keyExtractor={(item, index) => index+""}
/>
}
i tried in different ways to fix this issue but i am unable to fix this issue . event this issue reflect in child route there onPress event triggering after 3 to 5 seconds
Additional Information
Environment:
OS: Windows 10
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3
Activity
react-native-bot commentedon Feb 28, 2018
Thanks for posting this! It looks like your issue may be missing some required information. Are all the fields required by the Issue Template filled out?
This is a friendly reminder and you may safely ignore this message if you believe your issue contains all the relevant information. Thank you for your contributions.
How to Contribute • What to Expect from Maintainers
joshjhargreaves commentedon Feb 28, 2018
@manojcena are you able to produce a https://snack.expo.io/ or standalone project example?
manojcena commentedon Mar 1, 2018
manojcena commentedon Mar 1, 2018
@joshyhargreaves sorry i cannot provide that.
the over app functionality is to load the contacts in the device and display them in once screen and click on particular contact open chat screen. only these are the screens like a whats up all contacts and click on contact open chat screen.
i have 600 contacts in my phone and when i installed the app and its loading the contacts from device and displayed using flat list and when i click on single contact it open chat screen and when i send message in chat screen the onPress event also triggering slowly. when i installed app in other device having less constants around 30 app is working perfectly in both contact list and chat list.
joshjhargreaves commentedon Mar 1, 2018
I suspect the delay in the
onPressis to do with the JS thread being busy rendering the rest of your 600 contacts off screen, which it will do in batches of a given number of rows. So it finishes rendering some rows, before the touchable elements respond.There are a number of params you can tweak:
window size: https://facebook.github.io/react-native/docs/virtualizedlist.html#windowsize, try setting this to a small value, just as a proof of concept, and play around until you get a value you're happy with.
(A smaller window size, will result in more white space when scrolling)
https://facebook.github.io/react-native/docs/virtualizedlist.html#initialnumtorender
Will affect how many rows the SectionList renders before the JS thread is unblocked until the next batch is scheduled.
https://facebook.github.io/react-native/docs/virtualizedlist.html#maxtorenderperbatch
manojcena commentedon Mar 1, 2018
@joshyhargreaves
I tried like below but the problem still persist. i am unable to resolve it. event in chat screen when i click on input it is responding very slowly around 3 to 4 seconds to open the keyboard. Please help me out to solve this issue.
<FlatList
data={this.state.contactList}
windowSize = {2}
initialNumToRender ={15}
maxToRenderPerBatch = {1}
removeClippedSubviews = {false}
renderItem={({ item,index}) => (<UserContact onClick={() => this.navigateChat(item)}
key={index} concatcInfo={item} />)}
keyExtractor={(item, index) => index+""}
/>
manojcena commentedon Mar 9, 2018
Issue resolved by using maxToRenderPerBatch now it is working fine. thank you @joshyhargreaves
<FlatList
data={this.state.contactList}
maxToRenderPerBatch = {1}
removeClippedSubviews = {false}
renderItem={({ item,index}) => (<UserContact onClick={() => this.navigateChat(item)}
key={index} concatcInfo={item} />)}
keyExtractor={(item, index) => index+""}
/>
Liqiankun commentedon Jan 4, 2019
@manojcena I will give it a shot!