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

Choppy pull-to-refresh with ScrollView and FlatList #218

Open
NuclearKev opened this issue Mar 14, 2019 · 1 comment
Open

Choppy pull-to-refresh with ScrollView and FlatList #218

NuclearKev opened this issue Mar 14, 2019 · 1 comment

Comments

@NuclearKev
Copy link

NuclearKev commented Mar 14, 2019

Has anyone else had issues with the animation for onRefresh or RefreshControl? It doesn't seem to be caused by rendering performance issues having to do with rendering large amounts of data. It does this on any size list. I've tried using an atom and a value stored in re-frame's DB but every time the list freaks out when pulled down.

I've also tried setting some values such as :removeClippedSubviews and :maxToRenderPerBatch still no dice. I'm starting to think that it's an issue with reagent re-rendering too many times or something but I'm not sure. Any insight would be appreciated!

EDIT: I forgot to mention that similar code works fine in JS React Native. Just not in CLJS.

@NuclearKev NuclearKev changed the title Choppy pull-to-refresh with ScrollView and `FlatList Choppy pull-to-refresh with ScrollView and FlatList Mar 14, 2019
@NuclearKev
Copy link
Author

NuclearKev commented Mar 15, 2019

I think it has to do with reagent re-rendering when you drag the list down. So what happens is you pull the list down, it causes the onRefresh event to happen, then it dispatches my get event which turns the refresh value to true. This causes a re-render because the refresh value changed. At this point, it attempts to render the list at the refresh level but the animation is either too far down or up causing it to bounce to the wrong location and then finish the animation.

I was going to try and use :should-component-update but it doesn't seem to work with re-frame or atoms. I'm not entirely sure why it works in JS - I'd expect the same thing to happen since the state is being changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant