Transforms: Translate, Rotate & Scale

Every Skia shape (and Group of shapes) accepts a transform prop, an array of transform operations applied in order, exactly like a CSS transform list.

Transforming a single shape

<Rect x={0} y={0} width={40} height={40} color="#22d3ee" transform={[{ rotate: Math.PI / 4 }]} />

Rotation is in radians, not degrees, Math.PI / 4 is 45 degrees. By default a shape rotates/scales around its own top-left origin (0,0), use the origin prop to rotate around its actual center instead:

<Rect x={80} y={80} width={40} height={40} color="#f97316"
  origin={{ x: 100, y: 100 }}
  transform={[{ rotate: Math.PI / 4 }]}
/>

Grouping shapes

Group lets several shapes share one transform, moving and rotating together as a single unit, without repeating the same transform prop on each child:

import { Canvas, Group, Circle, Rect } from '@shopify/react-native-skia';

<Canvas style={{ flex: 1 }}>
  <Group transform={[{ translateX: 50 }, { translateY: 50 }, { scale: 1.5 }]}>
    <Circle cx={0} cy={0} r={20} color="#22d3ee" />
    <Rect x={-10} y={30} width={20} height={20} color="#f97316" />
  </Group>
</Canvas>

Animating a transform

Combine what you learned last lesson, drive the rotation off a useValue and animate it with runTiming for a continuously spinning shape:

const angle = useValue(0);

useEffect(() => {
  runTiming(angle, Math.PI * 2, { duration: 2000 }, () => {
    angle.current = 0;
  });
}, []);

// ...
<Group transform={[{ rotate: angle }]}>...</Group>