Transformation `Scale` not working

I’d like to make a zoomable chart, with react-native-gesture-handler. But Chart Group doesn’t update when scale value was updated.

persudo code

function Zoomable() {
  const scale = useValue(1); // it works if I changed initial value.
  const pinchGesture = Gesture.Pinch()
    .onStart((e) => {
      "worklet";
      scale.current = e.scale;
    })
    .onUpdate((e) => {
      "worklet";
      scale.current = e.scale;
    });

  return (
    <GestureDetector gesture={pinchGesture}>
      <Canvas>
        <Group transform={[{scale: scale.current}]}>
          <Chart />
        </Group>
      </Canvas>
    </GestureDetector>
  )
}

dependencies

{
    "@shopify/react-native-skia": "^0.1.133",
    "react": "18.0.0",
    "react-native": "0.69.0",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-reanimated": "^2.8.0"
  }

[wcandillon]

Hello there 🙋🏼‍♂️

We have a very fun pinch to zoom (and rotate/pan) example with gesture handler and reanimated at https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/sticker-app/src This seems to fit your use case perfectly.

If you think that there is a bug with the implementation, please feel free to reopen this issue. If you have any questions on such examples, we will have video tutorial soon available on youtube on this exact topic and you can ask us in the discussion section at https://github.com/Shopify/react-native-skia/discussions

[wcandillon]

Yes that makes a lot of sense actually, thank you for pointing that out.