FlatList - onPress triggered after 3 to 5 seconds ?.

[manojcena]

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

[react-native-bot]

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]

@manojcena are you able to produce a https://snack.expo.io/ or standalone project example?

[manojcena]

[manojcena]

@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]

I suspect the delay in the onPress is 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]

@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+""}
/>

I am afraid the only way to fix this is to set a fix height to all rows. I have tried. It works perfectly.

https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout

AND

Extract renderItem content to React.PureComponent, which I see you have done this already.

[manojcena]

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]

@manojcena I will give it a shot!