React Native transforms with pivot point

Question

I want to rotate a Text component with an angle of -90deg. The component should be rotated from the left corner instead of middle. I am using below

Answer 1

I had pretty much the same problem. Here is how to do it

Even though rotating with a pivot point is not directly supported, you can achieve the same result, with a combination of rotate, transformX and transformY - it's not to hard:

1. Lets say we allready have the coordinates of the pivot point. In your case you could hook on the onLayout Event, that gives you x,y,width and height

2. You take the center of the object to rotate. Again, onLayout is your Friend.

3. Now take the x and y difference of both points, and use this handy formula, with angle beeing the angle you want to rotate:

   rad = angle * Math.PI / 180 transformX(Math.cos(angle) * dx - Math.sin(angle) * dy) transformY(Math.sin(angle) * dx + Math.cos(angle) * dy) rotate(angle+"deg")

I leave it as an exercise to the reader to derive above formula :) Really it's simple trigonometry