CODEWITHSUNDEEP
cssreactjsreact-nativetransform
Lucca Dias
Lucca Dias

Reputation: 420

React Native Transform Origin

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'}} ]

Upvotes: 29

Views: 28953

Answers (3)

TOPKAT
TOPKAT

Reputation: 8678

It's now possible since react native 0.73

This is how it's implemented:

<View
  style={[{
    transformOrigin: 'top',
    transform: [{rotate: '90deg'}],
  }]}
/>

Upvotes: 3

Ehsan Sarshar
Ehsan Sarshar

Reputation: 3211

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

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

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)

            },
        ]

Upvotes: 26

RY_ Zheng
RY_ Zheng

Reputation: 3427

I made a lib to achieve transform-origin. react-native-anchor-point.

Provides a function like transform-origin in CSS, anchor point in iOS, pivot point in Android.

easy to use

import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0, y: 0.5 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};

<Animated.View style={[styles.blockBlue, this.getTransform()]} />

enter image description here

Upvotes: 13

Related Questions