Group transform property

[yousefelgoharyx]

Is the transform property in Group animatable? I've been trying to animate a Group to rotate with reanimated 3 but it does not animate

[terrysahaidak]

Yes, when using with the latest version of Skia (0.1.193) and Reanimated (3.3.0), you can create an animatable transform as:

const transform = useDerivedValue(() => {
  return [
    { scaleX: scale.value },
    { scaleY: scale.value },
  ]
})

return (
  <Canvas><Group transform={transform}>...</Group></Canvas>
)

[fuzzpedal]

Very helpful, thanks!

[khanisak]

Does translate works well too? I try to translate the group. Only translateX works. translateY does not work for me

const transform = useDerivedValue(() => {
    return [{ translateX: translateX.value, translateY: translateY.value }];
});

<Canvas style={{ flex: 1 }}>
  <Group transform={transform}>
    <Circle cx={0} cy={0} r={50} color="red" />
  </Group>
</Canvas>

However, directly translate the Circle component using translateX and translateY works.

[evoactivity]

@khanisak your syntax is incorrect, in react native each transform property is supplied as a separate object

const transform = useDerivedValue(() => {
    return [{ translateX: translateX.value }, { translateY: translateY.value }];
});

[Glazzes]

There're a couple difference between RN transform and Skia transform property, for rotation Skia only supports values measured in radians and for matrix transform Skia matrices must be written as a colum major rather than row major.