can-it-be-done-in-react-native
can-it-be-done-in-react-native copied to clipboard
Bug? useCode hook in AnimationUtil loops forever (WhatsApp)
@wcandillon
I noticed that the useCode execution block in AnimationUtil endlessly loops while the gallery is open:
Repro:
1: Add a call statement to AnimationUtil:
useCode(
() => [
call([], ([]) => console.log("animationutil")),
...
2: Open the sample and just drag a picture a little - the console will start logging over and over again until you close the view.
I noticed that this is triggered by the clamping decay function in AnimationUtil, and I eventually found the root of the issue to be the decay config here:
const config = {deceleration: 0.998};
It appears this is decaying forever in very small decrements, causing the clock to keep running ages after the actual animation. However, setting it to a lower value actually kills the decay animation, so this is needed for the visual result. It appears as if a (non-visible) micro-deceleration would be continuing for minutes, even though (according to the reanimated docs), this should be terminated "once the velocity drops under the level of significance".
For now, I hacked around the issue with another condition that resets the clock if we're not in a scaled mode. In usePinch, I added another condition:
set(scale, multiply(pinch.scale, scaleOffset)),
cond(eq(scale, 1), [ // <-- ADDED THIS
stopClock(clock.x),
stopClock(clock.y),
set(shouldDecay, 0),
]),
Is this a bug in reanimated, @wcandillon ?