Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onGestureEvent isn't working. #165

Open
codelocksdev opened this issue Oct 20, 2021 · 0 comments
Open

onGestureEvent isn't working. #165

codelocksdev opened this issue Oct 20, 2021 · 0 comments

Comments

@codelocksdev
Copy link

codelocksdev commented Oct 20, 2021

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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant