Pinch-to-Zoom and Rotation
Combine PinchGestureHandler and RotationGestureHandler with simultaneous gesture recognition to implement a zoomable, rotatable image component.
Why Pinch and Rotation Matter
Pinch-to-zoom and rotation are hallmark interactions on mobile, found in photo viewers, maps, and document apps. Implementing them well requires multi-touch gesture recognition that runs on the native thread and smooth real-time transform updates via Reanimated shared values.
React Native Gesture Handler provides Gesture.Pinch() and Gesture.Rotation() recognizers, which combined with Reanimated's useAnimatedStyle and useSharedValue, produce butter-smooth interactions that feel indistinguishable from native implementations.
Gesture.Pinch: Detecting Scale
Gesture.Pinch() recognizes a two-finger pinch or spread gesture. The most important value in the event object is event.scale, which starts at 1.0 when the gesture begins and changes proportionally to finger distance. A value of 2.0 means the fingers are twice as far apart as at start.
You must combine the gesture's incremental scale with a stored base scale to accumulate zoom across multiple pinch gestures — otherwise each new pinch resets to 1.0.
import { Gesture } from 'react-native-gesture-handler';
import { useSharedValue, withSpring } from 'react-native-reanimated';
const scale = useSharedValue(1);
const savedScale = useSharedValue(1);
const pinch = Gesture.Pinch()
.onUpdate((e) => {
scale.value = savedScale.value * e.scale;
})
.onEnd(() => {
savedScale.value = scale.value;
});