React Native animations - translateX and translateY while scaling : <p>My <code>Animated.View</code> has the following style:</p>

<pre><code>    {
        transform: [
            {
                scale: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [initialScale, 1]
            })},
            {
                translateX: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [startX, endX]
            })},
            {
                translateY: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [startY, endY]
            })},
        ]
    }
</code></pre>

<p>When initialScale is 1 and the animation starts, I see the expected behavior: Animated.View starts at (startX, startY) and linearly moves to (endX, endY). <br/> However, when initialScale is 0.5 for example, the starting point of the view is not (startX, startY), the movement is not linear (a bit spheric) and the end point is still as expected - (endX, endY).</p>

<p>How can I scale my View while keeping a linear movement and expected start position?</p>
