Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlatList - onPress triggered after 3 to 5 seconds ?. #18135

Closed
manojcena opened this issue Feb 28, 2018 · 9 comments
Closed

FlatList - onPress triggered after 3 to 5 seconds ?. #18135

manojcena opened this issue Feb 28, 2018 · 9 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@manojcena
Copy link

manojcena commented Feb 28, 2018

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
Copy link
Collaborator

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 ContributeWhat to Expect from Maintainers

@react-native-bot react-native-bot added No Template Ran Commands One of our bots successfully processed a command. labels Feb 28, 2018
@joshjhargreaves
Copy link
Contributor

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

@manojcena
Copy link
Author

screenshot_20180301-105618
screenshot_20180301-105852

@manojcena
Copy link
Author

@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
Copy link
Contributor

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
Copy link
Author

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

@ghost
Copy link

ghost commented Mar 8, 2018

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.

@hramos hramos added the Lists label Mar 8, 2018
@manojcena
Copy link
Author

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
Copy link

@manojcena I will give it a shot!

@facebook facebook locked as resolved and limited conversation to collaborators Mar 9, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants