react-native-reanimated: Can't cast NoopNode to ClockNode on Android

I use animation function, which is defined as follows:

const animateTranslation = (
  clock: Animated.Clock,
  position: Animated.Value<number>,
  translation: Animated.Value<number>,
  offset: Animated.Value<number>,
  min: Animated.Value<number>,
  max: Animated.Value<number>,
  gestureState: Animated.Value<State>
) => {
  const snapPoint = new Value(0);
  const myclock = new Clock();
  return cond(clockRunning(myclock), snapPoint, snapPoint);
};

and later use the returned value to animate Animated.View's property:

const taskTranslateY = animateTranslation(clock, position, translationY, offsetY, min, max, state);
...
<Animated.View
  style={{
    flex: 1,
    flexDirection: 'column',
    marginTop: -200,
    transform: [{ translateY: taskTranslateY }]
  }}
>
...
</Animated.View>

And I started getting this error, which I can’t understand or somehow to deal with. Where is a bug? Снимок экрана от 2020-03-21 20-37-25

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (8 by maintainers)

Most upvoted comments

I add a cond block to check whether the clock is defined. and it worked for me

          cond(
              defined(this.clock),
              [
                cond(
                  not(clockRunning(this.clock)),
                  [ set(this.startValue, 1) ],
                  0
                )
              ],
              0
            )

+11

luogao on Sep 29, 2020

I’m having the same issue, clock is basically unusable on android, Basically anything I do with clock will trigger the same issue. Using 1.7.0

EDIT: For us, it turns out that we were using spring, and within state, we didn’t define velocity. So the error message is a bit misleading. If you run into this problem, I recommend that you double and triple check your state and config for the animation, see if that can fix your problem.

0x079 on Jun 18, 2020

I did have this very issue but with different settings.

I was starting an animation with different lengths depending on the pressed state of a Pressable so the button scales instantly on pressDown and animates on pressUp.

Animated.timing(fadeRightButtonAnim, {
  toValue: pressed ? 1.2 : 1,
  duration: pressed ? 0 : 200,
  easing: EasingNode.out(EasingNode.exp),
}).start();

It worked on iOS but crashes with the error Can’t cast NoopNode to ClockNode on Android.

The fix I applied was to put an animation length greater than zero.

  duration: pressed ? 1 : 200, // changed from 0 to 1

Hope this can help someone ✨

rtauziac on Feb 14, 2023

@jakub-gonet I didn’t get the error for your code but I replaced the return part with the below, I was able to reproduce it.

return (
    <Animated.View
      style={{
        height: 100,
        width: 100,
        backgroundColor: 'red'
      }}
    />
  );

Ashwin-Mothilal on Jun 8, 2020

@luogao Thanks, you solved my problem…

Lg0gs on Nov 19, 2020

@pearup Timing doesn’t have velocity. Where do you define velocity?

hosseinmd on Aug 26, 2020