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 codes:

render() {
     return (
            <View style = {{flex : 1}}>
                <View style={styles.sidebar}>
                    <Text style={styles.lblSideBar} numberOfLines = {1} >DUMMY TEXT</Text>
                </View>
            </View>);
}

const styles = StyleSheet.create({
  sidebar : {
    flex : 1,
    flexDirection : 'row',
    alignItems : 'flex-end',
    justifyContent : 'center',
    width : 30,
  },
  lblSideBar : {
      bottom : 20,
      transform : [{rotate : '-90deg'}],
  }
});

I want the bottom space of 20px, but as rotation is happening from center(by default) the text is covering the bottom area after rotation. Please suggest how to achieve that? Also react-native needs the support of pivotPoint or anchorPoint or transformOrigin so that this property can be achieved easily.

Answer 1

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);

Answer 2

constructor(props) {
     super(props)
     this.state = {
          angle: 0
     }
}

componentDidMount() {
    this.progress()
}

progress(){
     intervalId = BackgroundTimer.setInterval(() => {      
         this.setState({angle: this.state.angle +1})   
     }, (1000); // 1000 milliseconds
}



render () {
        const dx = responsiveHeight(9.5);
        const dy = responsiveHeight(9.5);

        const position= {
            transform: [
              {
                translateX: Math.cos((360 - this.state.angle)  * Math.PI / 180) * dx - Math.sin((360 - this.state.angle) * Math.PI / 180) * dy
              },
              {
                translateY:  Math.sin((360 - this.state.angle)  * Math.PI / 180) * dx + Math.cos((360 - this.state.angle) * Math.PI / 180) * dy
              }
            ]
          };

        return(
            <Animated.View style={position}>
                <Text>Text move</Text>
            </Animated.View>

        );
}

NOTE: responsiveHeight, responsiveWidth are introduced in react-native-responsive-dimensions
BackgroundTimer please check here react-native-background-timer
Import some libraries