search

drapanjanas / re-natal

Bootstrap ClojureScript React Native apps
MIT License
1.22k stars 100 forks source link

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

Open NuclearKev opened 5 years ago

NuclearKev commented 5 years ago

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 commented 5 years ago

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.