title: React Native - use transformation matrix to change the origin of the scale transform from the center to the top
body: <p>I am using the below code to do a transform animation:</p>
  
  <pre><code>transform: [
      // scaleX, scaleY, scale, theres plenty more options you can find online for this.
      {  scaleY: this.state.ViewScale } // this would be the result of the animation code below and is just a number.
  ]}}&gt;
  </code></pre>
  
  <p>Currently, the <code>transform-origin</code> (&lt;- not actually available in react native) is the center. For the animation, the component scales from the center, so it looks like it is "expanding" from the center. I want it to "expand" from the top (i.e. make the transform origin the top of the component...I think).</p>
  
  <p>I found a method that simulates the <code>transform-origin</code> css:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>But I am not sure what matrices to use to affect the component the way I want. I have some understanding of transformation matrices, but only for translating and rotating - I am not sure how to affect the origin of a <code>scale</code> transform.</p>
  
  <p>For anyone looking to do some digging, thanks: <a href="https://en.wikipedia.org/wiki/Transformation_matrix" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Transformation_matrix</a></p>