can-it-be-done-in-react-native icon indicating copy to clipboard operation
can-it-be-done-in-react-native copied to clipboard

onGestureEvent isn't working.

Open codelocksdev opened this issue 3 years ago • 0 comments

I'm following the instagram pinch zoom tutorial and even just the basic scale transform is not working when I try to set it up using onGestureEvent If I manually set the animated value scale with an onGestureEvent that I define (just taking the scale from the native event) it works fine. But when I try to switch it up to the redash helper, it does not do anything for the pinch gesture. I've tried this on android and iphone emulators and on a physical android device. Same behavior everywhere.

I'm using reanimated v1 (expo project that doesn't play well with v2) and redash v14.2.2 per the recommendations.

Here's my component (not working):

import React, { ReactNode } from 'react';
import { StyleSheet } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';
import Animated, { Value } from 'react-native-reanimated';
import { onGestureEvent } from 'react-native-redash';

interface PinchZoomProps {
    children: ReactNode;
}

const styles = StyleSheet.create({
    wrapper: {},
});

const PinchZoom = ({ children }: PinchZoomProps) => {
    const scale = new Value(1);
    const pinchGestureHandler = onGestureEvent({ scale });

    return (
        <PinchGestureHandler {...pinchGestureHandler}>
            <Animated.View style={[styles.wrapper, { transform: [{ scale }] }]}>
                {children}
            </Animated.View>
        </PinchGestureHandler>
    );
};

export default PinchZoom;

Here's the working version:

import React, { ReactNode } from 'react';
import { StyleSheet } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';
import Animated, { Value } from 'react-native-reanimated';

interface PinchZoomProps {
    children: ReactNode;
}

const styles = StyleSheet.create({
    wrapper: {},
});

const PinchZoom = ({ children }: PinchZoomProps) => {
    const scale = new Value(1);

    return (
                <PinchGestureHandler
                    onGestureEvent={(event) => {
                        if (event.nativeEvent.scale >= 1) {
                            //@ts-ignore
                            scale.setValue(event.nativeEvent.scale);
                        }
                    }}
                >
                    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }]}>
                        {children}
                    </Animated.View>
                </PinchGestureHandler>
    );
};

export default PinchZoom;

codelocksdev avatar Oct 20 '21 14:10 codelocksdev