Choppy pull-to-refresh with `ScrollView` and `FlatList`
NuclearKev opened this issue · 1 comments
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.
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.