React Native Animated. You must specify exactly one property per transform object

Question

I get this error trying to translate a View using translateX and translateY

ExceptionsManager.js:173 JSON value '( { translateX = 0; translateY = 120; } )' of type NSMutableArray cannot be converted to a CATransform3D. You must specify exactly one property per transform object.

Here is my component:

  const BounceInUp: FC<IAnimatedView> = ({ children, teddyBear }) => {
  const bounceValue = new Animated.Value(120);
  const shakeValue = new Animated.Value(0);

  const animate = useCallback(() => {
    Animated.sequence([
      Animated.delay(300),
      Animated.spring(bounceValue, {
        useNativeDriver: true,
        toValue: -10,
        velocity: 3,
        friction: 8,
      }),
      Animated.sequence([
        Animated.timing(shakeValue, { toValue: 10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: -10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: 10, duration: 100, useNativeDriver: true }),
        Animated.timing(shakeValue, { toValue: 0, duration: 100, useNativeDriver: true }),
      ]),
    ]).start();
  }, [bounceValue, shakeValue]);

  useEffect(() => {
    animate();
  }, [teddyBear.id]);

  return (
    <Animated.View style={[styles.subView, { transform: [{ translateY: bounceValue, translateX: shakeValue }] }]}>
      {children}
    </Animated.View>
  );
};

How can I apply one animation on X and Y without getting this error?

Answer 1

You should put each transformation (translateX and translateY) in an object inside trasform array.

transform: [{ translateY: bounceValue }, { translateX: shakeValue }]

Answer 2

const bounceValue = new Animated.Value(120); I think you might want to try initialising value like this: const valueXY = new Animated.ValueXY({ x: 0, y: 120 }); because you want to animate value x and y.

Then:

Animated.spring(valueXY, {
        useNativeDriver: true,
        toValue: { x: 0, y: 0 },
        velocity: 3,
        friction: 8,
      }),

and in your sequence:

Animated.timing(valueXY, { toValue: { x: 10, y: 0 }, duration: 100, useNativeDriver: true })

Also in style <Animated.View style={[styles.subView, { transform: valueXY.getTranslateTransform() }]}>

You can check here for more info https://animationbook.codedaily.io/animated-value-xy/