Using Animated.ValueXY as prop directly does not animate consistently

[michalochman]

Description

Hey, I'm working on PixiJS integration integration with React 16 called react-pixi-fiber. I love the way Animated works and I think the use cases it tries to solve perfectly fit the React-Pixi world I am in currently.

Everything works as expected when I use Animated.Value, however I have noticed that when I try to use Animated.ValueXY directly (i.e. not referring to its x or y properties) it does not animate unless there's already another prop being animated.

A picture is worth a thousand words though, so it's easier to understand by seeing it in action.

Steps to reproduce

1. Go to: https://codesandbox.io/s/9qyxrljyo
2. Click on the Bunny and notice that it's both rotating and scaling.
3. Comment out lines 30 and 36 (related to rotation).
4. Clicking the Bunny no longer animates scale.

Additional info

• animated version: 0.2.2
• React version: 16.2.0

[michalochman]

By the way, if it's of any help – I've just noticed that while it's not working for:

<Sprite scale={this.state.scale} />

it works when I use:

<Sprite scale={Animated.template`${this.state.scale.x},${this.state.scale.y}`} />

(the renderer I'm using parses "x,y" strings as XY values).

[michalochman]

OK – finally solved it.

The real reason is that maybeVectorAnim when converting from AnimatedValueXY to a parallel of two AnimatedValue is not passing the children from compound XY to its single X and Y counterparts.

I am not sure if it is intended or not, but it's easy to fix by children assignment, so that:

var aX = anim((value: AnimatedValueXY).x, configX);

becomes something like:

var vX = (value: AnimatedValueXY).x;
vX._children = value.__getChildren();
var aX = anim(vX, configX);

(and the same for ay respectively).

Let me now if this is viable solution and I can open PR with the fix.