Bhoos / react-native-coverflow

Coverflow component for React Native
39 stars 15 forks source link

Fixes flickering due to the offset being extracted while an animation is in progress #8

Closed fossage closed 6 years ago

fossage commented 6 years ago

First off, great library!

While I was using it yesterday I found a bug that causes either the wrong item to be shown briefly, or causes of flickering effect.

To reproduce this behavior, you need to:

  1. Scroll a few items into a collection(the bug will not present itself on the 0th index and is more apparent as you get a few items in typically)
  2. Scroll an item over just slightly so the spring animation in the snapToPosition method is triggered to return it to its original position
  3. Before the animation has finished, press and drag the item again, triggering the onPanResponderGrant method and flattening the offset

I've found that I often have to try this a few times in rapid succession to trigger the problem because you have to get the timing just right, but I have confirmed that you can reproduce this behavior in the demo project if you remove the Alert.alert call in the onPress handler.

What it appears the issue is, is that if state.scrollX is being animated when the offset is extracted, it can briefly animate it into a strange position due to the fact that extracting the offset sets the value to zero. This will quickly right itself as soon as the onPanResponderMove handler is triggered and a new value is set which leads to seeing a brief flicker.

By adding a call to scrollX.stopAnimation before extracting the offset, we ensure the system isn't trying to animate something while having the value reset to zero in the process.

syaau commented 6 years ago

Great find ... I have merged this, will publish it now. Thank you.