Simultaneous is not simultaneous

[adelbeke]

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

gesture.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]

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

[adelbeke]

@j-piasecki Hello !
Yep, you can find the repo here : https://github.com/adscud/simultaneous-issue.

You'll see that you are able to :

• drag with two fingers
• scale with two fingers

But you can't do theses gestures together.

[j-piasecki]

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

[adelbeke]

@j-piasecki Thanks!

[adelbeke]

@j-piasecki it will be in Expo 45 ?

[j-piasecki]

I'm not sure, I've shared the issue with the Expo team but they are a bit tight on time.

[j-piasecki]

Hi, we tried to reproduce it on locally built Expo Go but it worked fine on all configurations we tried. It seems that it's a problem with the build present in the AppStore. Could you check if it works after the next release of Expo Go, and it not tag me?

[adelbeke]

Yes ok, the current version is the 2.23.2 so I wait the next one :)

[AbeerAhmad]

is it fixed or not ? i am having the same issue with pinch gesture and rotation gesture

[slytter]

I have the same problem.
For me, Gesture.Simultaneous works as Gesture.Exclusive

Env
Expo go (SDK 45.0.0)

Versions
react-native-gesture-handler: ~2.2.1
react-native: 0.68.1
react: 17.0.2,

[XavierGeerinck]

Same issue here as above, same dependencies but not working on the latest App Store version.

[kesha-antonov]

Hi, guys
You can try my package https://github.com/kesha-antonov/react-native-zoom-reanimated
Or at least, you can look at the code. I managed to get it working simultaneously

[ammarfaris]

Hi, guys You can try my package https://github.com/kesha-antonov/react-native-zoom-reanimated Or at least, you can look at the code. I managed to get it working simultaneously

panning does not work with one finger in latest expo managed work flow @kesha-antonov