can-it-be-done-in-react-native
can-it-be-done-in-react-native copied to clipboard
onGestureEvent isn't working.
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;