React Native

Building a React Native Pinch-to-Zoom View- A Step-by-Step Guide

Technology

Imagine you’re browsing through an app on your phone, and you come across an image or a map. You instinctively use your fingers to pinch and zoom in for a closer look, right? It’s such a common gesture that we often take it for granted. But have you ever wondered how this functionality is implemented?

Well, that’s where the magic of the Pinch-to-Zoom view in React Native comes into play. Experts of React Native app development company easily integrate this feature in React Native apps. This feature is more than just making images or maps bigger. It’s about enhancing user experience, making content more accessible.

In this blog, you will learn the implementation of React native pinch gesture functionality.  

What are the Prerequisites?

Before you start with the coding part, here are three important steps React Native experts always prioritize. And yes, we’ve done the same for this project too. Let’s take a look at what these steps are, shall we?

Set the Environment

First things first, set up the right environment. Whether working with React Native or any other framework, you must install essential software to initiate your development journey.

For this project, we will consider Expo CLI, Node.js, Android Studio, and Visual Studio Code Editor. If you need more details on getting these set up, refer to the blog post “How to Set up the React Native Development Environment“.

Just a quick note: Pay attention to the ‘Expo’ section because you need the Expo CLI tool, not the React Native CLI tool. And remember, this project is Android-based. If you’re planning to develop on a Mac, it would be a good idea to reach out to a proficient React Native app development company for thorough guidance.

Build a Folder

Choose a folder in your C drive and open the command prompt from the same folder. Type expo init ZOOMIMAGE into the project terminal. Here, ‘ZOOMIMAGE’ is just the name of the project.

Install the Third-Party Modules

The third step is about installing third-party libraries. This is one of the major reasons why developers love using this cross-platform mobile app development framework. It allows them to easily install libraries and import the components they need. You might have experienced the same if you have used this framework. 

For this project, there are a few modules required. These include ‘expo-status-bar’,  ‘react-native-web’,  ‘react-native-reanimated’, and ‘react-native-gesture-handler’.

Let’s talk about them briefly:

‘expo-status-bar’: This module manages the appearance of the status bar on the built app. 

‘react-native-reanimated’: This is an animation library for React Native. It helps you to create smooth, interactive animations.

‘react-native-web’: This module allows developers to write code that works across different platforms, including the web. It is meant to maximize code reuse.

‘react-native-gesture-handler’: This module aids in handling user gestures, like pinching and zooming.

 What’s in the Project File?

Here, we will start with the coding section. Let’s code for four different files: FlingGesture.js, PinchToZoom.js, LongPressGesture.js, and App.js. 

FlingGesture.js

Check the code snippet given below.

The provided code snippet sets up a ‘FlingGestureHandler’ to detect a type of gesture called a fling in a particular direction. This handler triggers an event function named ‘onFlingGesture’ when recognizing the fling gesture. 

Let’s break down the code step by step:

  • Importing Components: The code begins by importing necessary components. These include both built-in and custom components. The custom components are ‘Directions’, ‘State’, and ‘FlingGestureHandler’.
  • Defining the Component: The main part of the code defines a functional component, ‘FlingGesture’. Inside this component, an event handler function named ‘onFlingGesture’ is defined. This function accomplishes two tasks:
  1. It logs a message to indicate that the fling gesture has been detected.
  1. It checks if the fling gesture is in the ‘ACTIVE’ state. If it is indeed active, an alert is triggered.
  • Rendering the Component: The code then renders the ‘FlingGestureHandler’ component. 

This component takes two important properties:

  1. ‘direction’: This property specifies the allowed directions for the fling gesture. It’s set to either ‘Directions.DOWN’ or ‘Directions.UP’, which means the fling gesture can be recognized when moving either downward or upward.
  1. ‘onHandlerStateChange’: This property points to the event handler function ‘onFlingGesture’ defined earlier. It gets triggered when the state of the fling gesture handler changes, such as when it becomes active or inactive.

LongPressGesture.js

In this code section, we are adding a feature that lets users zoom in or zoom out an image by pressing and holding on to it for a moment.

The code starts by bringing in some specific tools like ‘View’, ‘StyleSheet’, ‘LongPressGestureHandler’, ‘State’, and ‘React’. 

Then, it specifies a function named ‘LongPressGesture’. It’s tuned in to recognize when someone presses and holds down on a specific spot for at least 800 milliseconds. When that happens, it kicks off another function called ‘onLongPress’, and an alert message appears.

So, it’s about giving users a more interactive experience.

PinchToZoom.js

This code file is like the control room for the pinch-to-zoom feature in your app. Later on, you need to connect it to the main App.js file.

Inside, it uses a component called ‘PinchGestureHandler’ from ‘react-native-gesture-handler’.

The main attraction here is a class named “PinchToZoom.” This class gives the user the ability to zoom in or out by pinching the screen together or pulling it apart.

It’s functioning is mentioned below:

The code snippet has values called ‘baseScale’ and ‘pinchScale’ that figure out how much the image should zoom in or out.

A function, ‘onPinchGestureEvent,’ tracks every user pinch, updating those zoom values as the pinching occurs.

It also has a method named ‘onPinchHandlerStateChange,’ and this one kicks in when there’s any change in the pinch action. It has a special check to see if the pinch was ‘ACTIVE,’ meaning if it is going on at that moment.

The code keeps tabs on all the zooming changes while the pinch event occurs. Once the pinch ends, it updates everything so that the zoom level stays where the user left it, and it’s ready for the next time someone wants to pinch and zoom.

A part of the code called ‘onPinchGestureEvent’, monitors the pinch action. 

When it observes a pinch, it changes the size of the image according to how much the user has pinched.

There’s another part, ‘onPinchHandlerStateChange’,  that’s called into action when the pinch occurs. This ensures everything works smoothly.

The image is inside an ‘Animated.View’ component. Think of this as the stage for the image, where all the zooming action happens.

The Main App.js File

Let’s check the coding section of App.js file.

This is the main file where you link the Pinch to Zoom gesture functionality. 

In this case, import the ‘PinchToZoom’ component from the PinchToZoom.js file. This import activates the pinch-to-zoom feature in your build.

Here, the code operation is given below in pointers.

  • The code sets up the primary structure for the build. It creates a container using the ‘View’ component.
  • Inside this container, the custom ‘PinchToZoom’ component is enclosed. It controls the pinch-to-zoom gesture.
  • If you want to add more gestures to your app, follow a similar process. Import the files and add them to the App.js file, and your users can perform all the gestures you have specified. 

Program Execution

Want to see if the pinch-to-zoom feature is working in your React Native app? Here’s how to test it:

  • Open up the folder where you saved your project.
  • Run the command prompt to open the terminal.
  • Type in the command expo start and hit Enter. This will get the program going on an emulator.

Want to try it on your Android phone instead? Easy!

  • A QR code will show up on the terminal.
  • Use the Expo Go app on your phone to scan it.
  • Your app should pop up on your phone, and you can give the pinch-to-zoom a try.

Refer to the provided gif to see how the project should look when it’s running. 

Enjoy the pinch-to-zoom feature now at your fingertips. Now, your images added to your React Native app are no longer confined to one size!

Leave a Reply