title: How to scale an object from the top left in react native using matrices?
body: <p>I was reading <a href="https://commitocracy.com/implementing-foldview-in-react-native-e970011f98b8" rel="nofollow noreferrer">this article</a> which explains how to do rotation transforms in react native using <code>MatrixMath</code>. I am trying to animate the scale of an object, not the rotation, and I want it to scale using an origin at the top left, rather than center, of the object. Can anyone explain how to do this?</p>
  
  <p>The relevant bits of code for the rotation matrix are:</p>
  
  <pre><code>const matrix = transformUtil.rotateX(dx);
  transformUtil.origin(matrix, { x: 0, y, z: 0 });
  
  const perspective = this.props.perspective || rootDefaultProps.perspective;
  
  ref.setNativeProps({
    style: {
      transform: [
        { perspective },
        { matrix },
      ],
    },
  });
  </code></pre>
  
  <p>and, from the transformUtil:</p>
  
  <pre><code>import MatrixMath from 'react-native/Libraries/Utilities/MatrixMath';
  
  function transformOrigin(matrix, origin) {
    const { x, y, z } = origin;
  
    const translate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(translate, x, y, z);
    MatrixMath.multiplyInto(matrix, translate, matrix);
  
    const untranslate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(untranslate, -x, -y, -z);
    MatrixMath.multiplyInto(matrix, matrix, untranslate);
  }
  
  function rotateX(deg) {
    const rad = (Math.PI / 180) * deg;
    const cos = Math.cos(rad);
    const sin = Math.sitransfn(rad);
    return [
      1, 0, 0, 0,
      0, cos, -sin, 0,
      0, sin, cos, 0,
      0, 0, 0, 1,
    ];
  }
  
  export default {
    rotateX,
    origin: transformOrigin,
  };
  </code></pre>