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

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.

  const BounceInUp: FC = ({ 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>
  );
  

  };

Answer 1

this is just a type error you can try

transform: [
{ translateY: y-value},
 { translateX: x-value}
]