React Native — Image Zooming with Gesture Handler

For every mobile developer, Image is one of the most important elements that bring better illustration. But how can we have more details on a particular image? Zooming will be the answer!

While learning React Native (RN), I found that React Native provides a simple and clear method called Gesture Handler. This library helps to handle all kinds of gestures within our phone system and behaviour, exactly the same as native’s gesture.

Show me an example! 🌸

Showcase for Image Zooming

The above shows an example of Image Zooming using PanGestureHandler and PinchGestureHandler. PanGestureHandler is used to move the image left/right which PinchGestureHandler is used to zoom in/out. The example photo is taken from Lorem Ipsum.

How to archive? Show me code as well! 🐥

1. Let us declare some useful variables.

scale is used to measure the zooming state of the image and given a default value of 1, while translateX & translateY is used to measure the left/right panning movement. All of the variables are created using useRef & Animated.Value() so that all these values can be animated and persist for the full lifetime of the component.

2. We will need to declare both Pan & Pinch events.

onPinchEvent will set the scale value meanwhile onPanEvent will set both of its translationX & translationY into translateX & translateY respectively. Both events are set to useNativeDriver , meaning all the animation will be sent to native code to perform the animation on the UI thread without having to go through the bridge on every frame. Here to know more about useNativeDriver.

3. Build our UI code.

We will have <Image> but convert it into <Animated.Image> so that it is able to receive animated changes. Then, wrap <Image> with <PinchGestureHandler> & <PanGestureHandler>. In <Image> , put the animated value into style — transform so that <Image> knows what to transform.

There are some important things to take notes of:

• When using 2 different gesture handlers, the children must be wrapped with <Animated.View> or else nothing will be shown.
• Create ref for each gesture handler and pass in each ref into another gesture handler’s simultaneousHandlers so that another knows the existence of one another.

4. Some Enhancement on Pinch events.

Until now, basically, we are done with our image zooming code. You may run the code and see how it goes. However, you’ll notice the image can be panned even without zooming and also zoom out event can make the image incredibly small.

• To fix panning the image without zooming, we set a panEnabled state to avoid the image from being panned before it was zoomed. When the pinch event is ACTIVE (on-going), we set panEnabled to true.
• To fix the image zoomed out to incredibly small, we check whenever scale < 1 , we reset all the animated value back to their original value by using Animated.Spring to have a nice springing effect.

We are done!

Conclusion

It was my first try on gesture handler and I didn’t even deal with such an action in native Android. Native Android’s gesture handling was much more complex for me and for these kinds of image zooming, I will always refer to a 3rd party library rather than writing all the code myself.

There are still many different gesture handlers to work on such as TapGestureHandler, RotateGestureHandler , etc. It was nice to learn in React Native. Do drop me any feedback if I made any mistake. Thanks for your time in reading my article. 🧀

Complete source code

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.