React-native-gesture-handler: Nested PinchGestureHandler & PanGestureHandler not working in Android

[thevishnupradeep]

I am completely confused on why this code would work on iOS but not on Android. My react-native-gesture-handler setup is working because I have another PanGestureHandler working as expected.

/*********************** Imports ***********************/
import React, { useRef, useEffect } from 'react';
import {
    View, StyleSheet, Animated,
} from 'react-native';

import ZoomImage from './ZoomableImage';
import { vw, vh, isiPhoneX } from '../Styles/StyleUtils';
/********************* End Imports *********************/

/*********************** ImageView Function ***********************/
const ImageView = ({ dismiss, uri, imageLayout }) => {
    const animation = useRef(new Animated.Value(0));

    useEffect(() => {
        Animated.timing(animation.current, {
            toValue: 1,
            duration: 250,
        }).start();
    }, []);

    function closeImage() {
        Animated.timing(animation.current, {
            toValue: 0,
            duration: 250,
        }).start(() => dismiss());
    }

    return (
        <View style={styles.mainContainer}>
            <Animated.View style={[
                styles.container,
                {
                    backgroundColor: animation.current.interpolate({
                        inputRange: [0, 1],
                        outputRange: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"],
                    })
                }
            ]}>
                {/* <View style={styles.header}>
                    <TouchableOpacity style={styles.closeBtn} onPress={closeImage}>
                        <Icon name="close" color={blackColor} size={30} />
                    </TouchableOpacity>
                </View> */}
                <ZoomImage dismiss={closeImage} imageStyle={[
                    {
                        left: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.pageX, 0]  // 0 : 150, 0.5 : 75, 1 : 0
                        }),

                        top: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.pageY, vh(24)]  // 0 : 150, 0.5 : 75, 1 : 0
                        }),
                        width: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.width, vw(100)],
                        }),
                        height: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.height, vw(100)],
                        })
                    }
                ]}
                source={{ uri: uri }} />
            </Animated.View>
        </View>
    );
};
/********************** End ImageView Function *******************/
export default ImageView;

const styles = StyleSheet.create({
    header: {
        marginTop: isiPhoneX() ? 40 : 25,
        alignItems: "flex-end"
    },
    closeBtn: {
        paddingHorizontal: 20,
    },
    mainContainer: {
        position: "absolute",
        width: vw(100),
        height: vh(100)
    },
    container: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0, bottom: 0,
    },
    image: {
        position: "absolute",
    }
});

/*********************** Imports ***********************/
import React, { useEffect, useState, useCallback, useRef } from 'react';
import { Animated } from 'react-native';

import {
    State,
    PanGestureHandler,
    PinchGestureHandler
} from 'react-native-gesture-handler';

import { vw, vh } from '../Styles/StyleUtils';
/********************* End Imports *********************/

/*********************** ZoomableImage Function ***********************/
const ZoomableImage = (props) => {
    const panRef = useRef();
    const pinchRef = useRef();

    const closeAnimation = useRef(new Animated.ValueXY({ x: 0, y: 0 }));

    const scaleAnimation = useRef(new Animated.Value(1));
    const baseScale = useRef(new Animated.Value(1));
    const scale = useRef(Animated.multiply(baseScale.current, scaleAnimation.current));
    const [lastScale, setLastScale] = useState(1);

    useEffect(() => {
        console.log('Refs', panRef);
    }, [panRef.current]);

    const onPanHandlerGesture = useCallback(({ nativeEvent }) => {
        console.log('Native Event', nativeEvent);
        closeAnimation.current.setValue({
            x: nativeEvent.translationX,
            y: nativeEvent.translationY
        });
    }, []);

    const onPanHandlerStateChange = useCallback(({ nativeEvent }) => {
        console.log('New Pan Event', nativeEvent);
        if (nativeEvent.oldState === State.ACTIVE) {
            if (
                nativeEvent.translationY > 250
                || nativeEvent.velocityY > 1200
            ) {
                Animated.parallel([
                    Animated.timing(scaleAnimation.current, {
                        toValue: 1,
                        duration: 200
                    }),
                    Animated.timing(baseScale.current, {
                        toValue: 1,
                        duration: 200
                    }),
                    Animated.timing(closeAnimation.current, {
                        toValue: { x: 0, y: 0 },
                        duration: 200
                    })
                ]).start(() => props.dismiss());
            }
            else {
                Animated.timing(closeAnimation.current, {
                    toValue: { x: 0, y: 0 },
                    duration: 100
                }).start();
            }
        }
    }, [lastScale]);

    const onPinchGestureEvent = Animated.event([{ nativeEvent: { scale: scaleAnimation.current } }]);

    useCallback(({ nativeEvent }) => {
        scaleAnimation.current.setValue(nativeEvent.scale);
    }, [lastScale]);

    const onPinchHandlerStateChange = ({ nativeEvent }) => {
        console.log('New Pinch Event', nativeEvent);
        if (nativeEvent.oldState === State.ACTIVE) {
            const newLastScale = lastScale * nativeEvent.scale;
            setLastScale(newLastScale);
            baseScale.current.setValue(newLastScale);
            scaleAnimation.current.setValue(1);
        }
    };

    return (
        <PanGestureHandler maxPointers={2} avgTouches onHandlerStateChange={onPanHandlerStateChange}
        minDist={10} onGestureEvent={onPanHandlerGesture} ref={panRef}>
            <PinchGestureHandler ref={pinchRef} simultaneousHandlers={panRef}
            onHandlerStateChange={onPinchHandlerStateChange} onGestureEvent={onPinchGestureEvent}>
                <Animated.Image style={[
                    props.imageStyle,
                    {
                        transform: [
                            { perspective: 1000 },
                            {
                                translateY: closeAnimation.current.y.interpolate({
                                    inputRange: [-vh(25), vh(25)],
                                    outputRange: [-vh(25), vh(25)],
                                    extrapolate: "clamp"
                                })
                            },
                            {
                                translateX: closeAnimation.current.x.interpolate({
                                    inputRange: [-vw(25), vw(25)],
                                    outputRange: [-vw(10), vw(10)],
                                    extrapolate: "clamp"
                                })
                            },
                            {
                                scale: scale.current.interpolate({
                                    inputRange: [1, 2.5],
                                    outputRange: [1, 2.5],
                                    extrapolate: "clamp"
                                })
                            }
                        ]
                    }
                ]} source={props.source} />
            </PinchGestureHandler>
        </PanGestureHandler>
    );
};

ZoomableImage.defaultProps = {
    imageStyle: {},
    source: { uri: "" }
};
/********************** End ZoomableImage Function *******************/
export default ZoomableImage;

[orcunorcun]

Same issue on android!

[Hirbod]

I got the same issue

[stuartthompson]

We're seeing the same issue. The PanGestureHandler appears to be handling all gestures, including the nested PinchGestureHandler gestures.

[stuartthompson]

@thevishnupradeep @orcunorcun @Hirbod
I think I found a solution. Try adding minPointers and maxPointers to the pan and pinch gesture handlers like this:

<PanGestureHandler
   minPointers={1}
   maxPointers={1}>
   <PinchGestureHandler
       minPointers={2}
       maxPointers={2}>

I think this is saying that you pan with 1 finger, and pinch with 2.

[leosena777]

@stuartthompson thanks,
I will test this right now, I have spent a lot of time trying to find the solution.

[leosena777]

@stuartthompson solved for me, thanks

[emclab]

add between pan and pinch gesture handler works for me.

[jakub-gonet]

Every handler should have it's own Animated.View as a child, like @emclab said. This is related to the way how we internally pass callbacks inside handlers, I'll check out if this is fixable. Closing because it doesn't have the proper smallest possible repro example.

[berkelmas]

@jakub-gonet That worked for me. Thanks 👍