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

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]

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