can-it-be-done-in-react-native icon indicating copy to clipboard operation
can-it-be-done-in-react-native copied to clipboard

Bug? useCode hook in AnimationUtil loops forever (WhatsApp)

Open hardcodet opened this issue 5 years ago • 1 comments

@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.

hardcodet avatar Jul 07 '20 12:07 hardcodet

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 ?

hardcodet avatar Jul 08 '20 12:07 hardcodet