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

[Neiso]

In The animation section of the doc, their is a react-native-reanimated way of animating a circle => directly adding the shared value variable as props.

In the The group animation section of the doc, it says we can use React Native like transform. But it does not mention that this component is not fully compatible with react-native-reanimated.

const angle = useSharedValue("15deg")
const angleInt = useShareValue(15)

<Animated.view style={{ transform: [{ rotate: angle }] }} />   // => Works in react-native-reanimated
<Group transform={[{ rotate: angleInt }]} /> // => Does not work in react-native-skia for the Group component

So it's really confusing that you need to wrap all of your transformation in a shared value and not directly as a prop inline with different shared values.

@wcandillon Can we add this specific case to the documentation ?

[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.