React Native animations - translateX and translateY while scaling

Question

My Animated.View has the following style:

    {
        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]
            })},
        ]
    }

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

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

Answer 1

Like the user @ArneHugo pointed out in the comments, the non-linear movement can be solved by positioning the full-size container element and scaling another element within it.

The position of the element is not as expected, because the origin for the scale transform is the center point of the element. React Native doesn't (yet) support specifying the transform origin, but if the width and height of the scaled element are known in advance, it's easy to calculate the offset as follows:

const width = 100;
const height = 20;
const scale = {
  transform: [
    {
      scale: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [initialScale, 1]
      })
    }
  ]
};

const position= {
  transform: [
    {
      translateX: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [startX - (width / 2) - (width * initialScale / 2), endX]
      })
    },
    {
      translateY: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [startY - (height / 2) - (height * initialScale / 2), endY]
      })
    }
  ]
};

return (
  <Animated.View style={position}>
    <Animated.View style={[styles.thing, scale]} />
  </Animated.View>
);