react-native-gesture-handler: PinchGestureHandler and PanGestureHandler not working simultaneously
Thanks in advance for the help! Please let me know if I can provide any extra information!
- Platform:
iOS
- sdkVersion:
35.0.0
Refs:
this.panHandler = React.createRef();
this.pinchHandler = React.createRef();
Handlers:
const scale = new Animated.Value(1);
const onZoomEvent = (zoomeEvent) => {
if (zoomeEvent.nativeEvent.scale >= 1) {
return Animated.event([{
nativeEvent: {
scale,
},
}])(zoomeEvent);
} else {
return Animated.event([{ nativeEvent: { scale: 1 } }])(zoomeEvent);
}
};
const onZoomStateChange = (event) => {
if (event.nativeEvent.oldState === State.ACTIVE) {
Animated.spring(scale, {
toValue: 1,
}).start();
}
};
const translateX = new Animated.Value(0);
const translateY = new Animated.Value(0);
const handlePanEvent = (panEvent) => {
return Animated.event(
[{ nativeEvent: { translationX: translateX, translationY: translateY } }],
)(panEvent);
};
const onPanStateChange = (event) => {
if (event.nativeEvent.oldState === State.ACTIVE) {
Animated.spring(translateX, {
toValue: 0,
}).start();
Animated.spring(translateY, {
toValue: 0,
}).start();
}
};
JSX:
<PinchGestureHandler
ref={this.pinchHandler}
simultaneousHandlers={this.panHandler}
onGestureEvent={onZoomEvent}
onHandlerStateChange={onZoomStateChange}
>
<Animated.View>
<PanGestureHandler
ref={this.panHandler}
simultaneousHandlers={this.pinchHandler}
minPointers={2}
onGestureEvent={handlePanEvent}
onHandlerStateChange={onPanStateChange}
>
<Animated.View>
<Animated.Image
source={{ uri: meme.get('url') }}
style={{
width: displayWidth,
height: displayHeight,
transform: [{ scale }, { translateX }, { translateY }],
}}
resizeMode="contain"
/>
</Animated.View>
</PanGestureHandler>
</Animated.View>
</PinchGestureHandler>
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 11
- Comments: 19 (1 by maintainers)
I am using PanResponder and pinch GestureHandler and faced the same issue and I fixed it by including a condition(gestureState.numberActiveTouches) in onStartShouldSetPanResponder value inside PanResponder.create(), below is my code eg:- gestureState.numberActiveTouches = 1 means touch event gestureState.numberActiveTouches = 2 means pinch event
This fixed the problem for me
I had a problem with this too, solved it by putting a flex: 1 to all the <Animated.View>