Cubit untuk Memperbesar dan Memutar

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() 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.

Without clamping, users can zoom in to enormous scales or zoom out until the image disappears. Define a minimum and maximum zoom level and clamp the scale value in the onUpdate callback using a utility worklet.

The clamp function runs on the UI thread as a worklet, keeping the gesture response fast. Choose clamp values appropriate for your content — photo viewers typically allow 1x to 5x zoom, while maps may allow much wider ranges.

Gesture.Rotation() tracks the angle change of a two-finger twist gesture. The event.rotation value is in radians — the angle the fingers have rotated from the gesture start position. A full clockwise rotation is approximately 6.28 radians (2π).

Like scale, you must accumulate rotation across multiple gestures by saving the current rotation at gesture end and adding new gesture rotation to the saved offset in subsequent gestures.

The transform array in useAnimatedStyle applies both scale and rotation. The order of transforms matters: apply scale first, then rotation (or vice versa depending on desired behavior). React Native's transform array accepts both numeric scale and radian rotation values directly from shared values.

The rotate transform requires a string with the 'rad' suffix, while scale takes a number directly. Use string concatenation (not template literals with backticks) to construct the rotation string in a worklet.

A photo viewer needs pinch and rotation to work at the same time. Wrap both gestures in Gesture.Simultaneous and pass the composed gesture to a single GestureDetector. This enables the user to zoom and rotate with a two-finger gesture in one fluid motion.

Adding pan simultaneously creates the full photo viewer experience: zoom, rotate, and reposition the image all with two fingers at once.

A standard photo viewer feature is double-tapping to toggle between the natural size and a zoomed-in view, and again to reset. Use Gesture.Tap().numberOfTaps(2) for the double-tap recognizer, and in its handler animate scale and rotation back to their initial values with a spring.

Use Gesture.Exclusive with the double-tap gesture having priority over single-tap to prevent single-tap from firing during a double-tap sequence.

By default the scale transform scales the image from its center point. For a more natural feel, the image should zoom around the focal point — the midpoint between the two fingers. The gesture event provides event.focalX and event.focalY for this purpose.

Implementing focal-point zoom requires adjusting the translation offset alongside scale so the point under the fingers stays fixed during zoom. This math involves calculating the offset change caused by the scale change at a given focal point.

After zooming in, the user can pan to see different parts of the image. But you should constrain panning so the image cannot be dragged to reveal empty canvas outside its edges. Calculate the maximum pan offset based on the current scale and image dimensions, and clamp the offset in the pan's onUpdate.

This is the polish that distinguishes a professional photo viewer from a rough prototype. The constraint logic is a few lines of math that run as worklets on the UI thread.

When the user lifts their fingers after over-zooming (below minimum or above maximum), spring the scale back to the limit rather than leaving the image at an unusual size. Do this in the onEnd callback of the pinch gesture.

Similarly, after the user zooms back out to 1x, reset the pan offset to zero so the image returns to center. This combination of boundary checks in onEnd makes the component feel polished and predictable.

A complete zoomable, rotatable, pannable photo viewer combines: shared values for scale, rotation, and offset; useAnimatedStyle applying all transforms; Gesture.Simultaneous composing pinch, rotation, pan, and double-tap; and boundary clamping in onUpdate and spring correction in onEnd.

This is one of the most impressive interactions you can build in React Native, and it runs entirely on the UI thread with no JavaScript thread involvement during the gesture — making it indistinguishable from a native implementation.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: Gesture.Pinch() provides event.scale to track two-finger zoom relative to the gesture start, Gesture.Rotation() provides event.rotation in radians to track two-finger twist, and Gesture.Simultaneous composes pinch, rotation, and pan so all three work at once for a full photo viewer experience. Next up we configure custom URL schemes for deep linking into specific app screens.