React Native Transform Origin

React Native transforms with pivot point

I just made a withAnchorPoint function to make transform working with anchor point easier in react-native. https://github.com/sueLan/react-native-anchor-point.

You can use it like this:

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

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0.5, y: 0 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};
    
<Animated.View style={[styles.blockBlue, this.getTransform()]} />

I also wrote an article for it.

The following tricky codes are to set the anchor point or called pivot point of a view.

1. translate the view by x, y, z on the x-axis, y-axis, z-axis
2. apply rotation
3. translate the view back by -x, -y, -z on the x-axis, y-axis, z-axis

          translateX: -w / 2
          rotateY
          translateX: w / 2

This means setting the anchor point as (0, 0.5). We apply it in the transform style like this

   const transform = {
      transform: [
          {translateX: -w / 2}, 
          rotateY, 
          {translateX: w / 2}
      ]
    }
    return (   
        <Animated.View style={transform}></Animated.View>
    )
  }

          translateX: w / 2
          rotateY
          translateX: -w / 2

This means setting the anchor point as (1, 0.5)

          translateX: -w / 2
          translateY: -h / 2
          rotateZ
          translateX: w / 2
          translateY: h / 2

This means setting the anchor point as (0, 0)

          translateX: w / 2
          translateY: h / 2
          rotateZ
          translateX: -w / 2
          translateX: -h / 2

This means setting the anchor point as (1, 1)

In iOS, it is called anchor point. About the anchorPoint

layer.anchorPoint = CGPointMake(0, 0)

In Android, it is called pivot point.

  viewToMove.setPivotX(0);
  viewToMove.setPivotY(0);

React Native Animated Rotation Anchor Point

I figured it out after a lot of tinkering. I looked up multiple other resources and they all used the shifting like i mentioned in my question.

<Animated.View
    style={[ 
       styles.test,
       { transform: [
             { translateY: containerHeight / 2 }, 
             { rotate: rotateInterpolator }, 
             { translateY: -(containerHeight / 2) }
          ]
       },
    ]}
>
    <Text style={{ color: "white" }}>Test</Text>
</Animated.View>

Rotate View/Image around specific point, not center (React Native)

So I finally found a way and formular to calculate the offset. The desired point of rotation gets obviously rotated as well, when applying an angle to the object. So what I had to do was getting the position of this point (lets call it pRotated) by using rotationmatrices with the position of both the center (m) of the object and the desired point of rotation (p) like this:

angle = alpha * (Math.PI / 180)
pRotated.x = m.x + (p.x - m.x) * Math.cos(angle) - (p.y - m.y) * Math.sin(angle)
pRotated.y = m.y + (p.x - m.x) * Math.sin(angle) + (p.y - m.y) * Math.cos(angle)

Then it was easy to get the offset using

translateX = pRotated.x - p.x
translateY = pRotated.y - p.y

which then can just be applied to the object, and then its rotated by alpha around point p.

I've attached a scribble for further explanation.

Why does the transform-origin CSS property not show up in React?

As spotted by wintvelt, there was a spurious parenthesis in my code:

    el.style.transformOrigin = `${100}px ${100}px`;

is correct.

---

Related Topics