Simultaneous is not simultaneous

Description

I am trying to reproduce a pinch and pan gesture on image like Instagram. In fact, each gesture works but not together, even with the Gesture.Simultaneous

Screenshots

https://user-images.githubusercontent.com/34245352/147932838-24089c8e-7fd4-47d0-99cc-1bcf9224e8b6.mp4

Expected behavior

Pinch and pan in the same time.

Actual behavior

See video above.

Snack or minimal code example

const scale = useSharedValue(1)
    const translateX = useSharedValue(0)
    const translateY = useSharedValue(0)

    const pinchGesture = Gesture.Pinch()
        .onBegin(e => {
            runOnJS(props.onPinchImage)(props.postActivityId)
        })
        .onUpdate((e) => {
            scale.value = e.scale
        })
        .onEnd(() => {
            scale.value = withTiming(1)
        })

    const panGesture = Gesture.Pan()
    panGesture.enableTrackpadTwoFingerGesture(true)
    panGesture.minPointers(2)

    panGesture
        .onUpdate(e => {
            'worklet'
            translateX.value = e.translationX
            translateY.value = e.translationY
        })

    panGesture
        .onEnd(e => {
            'worklet'
            translateX.value = withTiming(0)
            translateY.value = withTiming(0)
        })

    const composed = Gesture.Simultaneous(pinchGesture, panGesture)

    const animatedStyle = useAnimatedStyle(() => {
        return {
            zIndex: 50,
            transform: [
                { scale: scale.value },
                { translateX: translateX.value },
                { translateY: translateY.value },
            ],
        }
    })

    return (
        <GestureDetector gesture={composed}>
            <Animated.View style={animatedStyle}>
                <Image
                    source={{ uri: props.uri }}
                    ratio={props.ratio}
                    style={[ tailwind.style('self-center') ]}
                />
            </Animated.View>
        </GestureDetector>
    )

Package versions

• React: 17.0.1
• React Native: 0.64.3
• React Native Gesture Handler: ~2.1.0

[j-piasecki]

Thanks! It seems like this problems occurs only on managed Expo workflow, I’ll look into it.

[j-piasecki]

Hi, unfortunately I’ve been unable to reproduce this issue based on the snippet alone. Could you prepare a repository with a reproduction?