css - React Native Transform Origin

Question

how do I apply the transform-origin property to a style in react native? I've tried in several ways, but I did not get an event

I tried:

transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ]

Answer 1

React native doesn't have any transform origin property yet. maybe in the future

but with a trick we can achieve this ????????

you should try to use translateX or translateY trick.

the trick is to first move the center of the shape to the origin that you want to rotate.

for example I have a shape with these properties

width: 60
height: 60

to rotate it from top left origin I should do these

translateX: -30
translateY: -30
rotate: 45deg
translateX: 30
translateY: 30

Note: to put the center of a shape to it's left side you can move it by half of it's width

in this example I want to rotate a shape 35 deg from left most origin

transform: [
            
            {   
                translateX: -1 * (widthOfShape / 2)

            }
            },
            
            {
                rotate: '35deg'
            },
            {   
                translateX: (widthOfShape / 2)

            },
        ]

be careful after rotation is done you should translate it back to it's orginal position