Can't cast NoopNode to ClockNode on Android

[likern]

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?

[likern]

I think the problem is when we deal with clock and clockRunning, startClock, stopClock functions.
I could catch this error just by using

debug('clock before timing? ', clockRunning(clock))

[jakub-gonet]

Hi @likern,
could you post the entire code, especially everything that happens with clock? This is related to casting Node to ClockNode in java native code: return ((ClockNode) clock).isRunning ? 1. : 0.; in class ClockTestNode, which is code evaluating clockRunning node.

[jakub-gonet]

Closing due to no activity.

[Ashwin-Mothilal]

I had the same issue when I have initialised a Clock and trying to stop it without actually starting the Clock. Will this help you @jakub-gonet ?

[jakub-gonet]

@Ashwin-Mothilal,

no, I couldn't reproduce it that way.

Check it yourself:

import React from 'react';
import { TextInput } from 'react-native';
import Animated from 'react-native-reanimated';

const {
  useCode,
  concat,
  Clock,
  stopClock,
  createAnimatedComponent,
} = Animated;

const AnimText = createAnimatedComponent(TextInput);

const Example = () => {
  const clock = new Clock();
  const value = new Value(10);
  useCode(() => [stopClock(clock)], []);
  return <AnimText editable={false} text={concat('', clock)} />;
};

export default Example;

[Ashwin-Mothilal]

@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'
      }}
    />
  );

[lightrow]

had similar issue and it seems wrapping the clock with useRef resolved it.

const clock = useRef(new Clock());

[0x079]

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.

[wcandillon]

Thanks @pearup that fixed the issue for me.

[avinashlng1080]

@pearup can you please paste a snippet of your solution here ?

[hosseinmd]

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

[luogao]

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
            )

[Lg0gs]

@luogao Thanks, you solved my problem..

[gabrielbull]

For me, this bug occurred on a large FlatList with many items and towards the bottom of the list, the bug would always happen. The hack that worked to circumvent this bug for me was to disable anything that would call the clocks on the first render and enable on the second. Since I was using PanGestureHandler, this did the trick:

  const [enabled, setEnabled] = useState(false)
  useLayoutEffect(() => {
    setEnabled(true)
  }, [])
  
  return <PanGestureHandler enabled={enabled} />

Not ideal since it triggers an extra re-render, but it does avoid this bug.

[jakub-gonet]

@gabrielbull could you share your example so I can test it as well?

[piaskowyk]

We will abandon support for Reanimated v1 in near future. This issue is inactive and we don't have repro for this issue so I need to close. If anyone has still this problem, please try Reanimated v2.

[rtauziac]

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 ✨