Reanimated pinch gesture and matrix transform

[schriker]

Hi, 👋 I'm struggling with getting this to work. With previous versions of reanimated, I just passed an array of transforms and it was working fine but now it looks like now we can only pass matrix transform.

I have a project where I try to manipulate objects on canvas, panning is working fine, the issue starts when I try to pinch or rotate, I do understand where the issue is - with origin points differences, but I'm not sure how to resolve it:

ScreenRecording_08-01-2025.13-42-54_1.mov

I was using code from: https://github.com/Shopify/react-native-skia/blob/main/apps/example/src/Examples/Stickers/GestureHandler.tsx

Multiply function:

import { Matrix4, multiply4 } from "@shopify/react-native-skia"

export const multiply = (...matrices: Matrix4[]) => {
    "worklet"

    return matrices.reduce((acc, matrix) => multiply4(acc, matrix), Matrix4())
}

My gesture handler code:

export const EditorRouteGestureHandler: React.FunctionComponent<EditorRouteGestureHandlerProps> = ({ debug, disabled = false }) => {
    const { theme } = useStyles()
    const { mapSize, routeMatrix } = useContext(EditorContext)
    const backgroundColor = !debug ? theme.utils.hexToRgba(theme.palette.blue_600, 0.85) : "transparent"
    const offset = useSharedValue(Matrix4())
    const origin = useSharedValue({ x: 0, y: 0 })
    const x = useDerivedValue(() => mapSize.value.x)
    const y = useDerivedValue(() => mapSize.value.y)
    const width = useDerivedValue(() => mapSize.value.width)
    const height = useDerivedValue(() => mapSize.value.height)

    const pinch = Gesture.Pinch()
        .enabled(!disabled)
        .onBegin(event => {
            origin.value = { x: event.focalX, y: event.focalY }
            offset.value = routeMatrix.value
        })
        .onChange(event => {
            routeMatrix.value = multiply4(offset.value, scale(event.scale, event.scale, 1, origin.value))
        })

    const pan = Gesture.Pan()
        .enabled(!disabled)
        .onChange(event => {
            routeMatrix.value = multiply4(translate(event.changeX, event.changeY), routeMatrix.value)
        })

    const style = useAnimatedStyle(() => {
        const m = multiply(translate(-width.value / 2, -height.value / 2), routeMatrix.value, translate(width.value / 2, height.value / 2))
        const m4 = convertToColumnMajor(m)
        const commonStyles: ViewStyle = {
            zIndex: 999,
            position: "absolute",
            left: x.value,
            top: y.value,
            width: width.value,
            height: height.value,
            backgroundColor
        }

        if (height.value === 0 || width.value === 0) {
            return commonStyles
        }

        return {
            ...commonStyles,
            transform: [
                { matrix: (m4 as unknown as number[]) }
            ]
        }
    })

    const composed = Gesture.Race(pinch, pan)

    return (
        <GestureDetector gesture={composed}>
            <Animated.View style={[style]} />
        </GestureDetector>
    )
}

Have I missed something, or is there any other workaround for this I'm not aware of?

[schriker]

Ok, never mind I had to apply another transformation on the route component 🎉

ScreenRecording_08-02-2025.09-10-31_1.mov