React Art <Text /> rotation

user_8597377 0
Viewed 431

How can I rotate a <Text /> from React ART? <Text /> is a <Shape /> based on text content using native text rendering, and so, I should be able to use transform={ ??? } inside it. I did not find any examples with rotation.

What should I add so I can rotate this <Text /> bellow ?

import { ART } from 'react-native';
const { Text } = ART;

<Text x={0} y={0}
      font={`25px "Helvetica Neue", "Helvetica", Arial`}
      fill={'red'}
      alignment={'center'}>
          Random Text that needs rotation
</Text>

Adding style={{ transform: '[{ rotate: "45deg"}]' }} is not supported, I get the following error:

Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly'.

Because I am using the <Text \> from React ART and NOT the clasic one from react-native

react-native
1 Answers

Yes, you can rotate and transform ART Text with ART Transform. 

import { ART } from 'react-native';

const { Text, Transform } = ART;

const rotate = new Transform().rotate(45) // rotate
const rotateAndMove = new Transform().rotate(45).translate(10, 20) // x,y

<Text x={0} y={0}
  transform={rotate} 
  font={`25px "Helvetica Neue", "Helvetica", Arial`}
  fill={'red'}
  alignment={'center'}>
      Random Text that needs rotation
</Text>

<Text x={0} y={0}
  transform={rotateAndMove} 
  font={`25px "Helvetica Neue", "Helvetica", Arial`}
  fill={'red'}
  alignment={'center'}>
     Rotated and moved x=10 y=20
</Text>
user_11774190
Related