React-native-reanimated: 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());

[pearup]

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