Utilising the React Native Image Zoom Viewer to Implement Pinch-to-Zoom

Utilising a single codebase, developers can create mobile apps for both iOS and Android that use the widespread React Native technology. Images are one of the key components of mobile app development, and zooming is a frequently utilised feature for looking at images more closely. In this article, we’ll use the React Native image zoom viewer library (“react-native-image-zoom-viewer”) to add the pinch-to-zoom capability for photos in our React Native app.

Introduction

In this article, we’ll explore how to zoom in on photos in React Native applications using a react-native modal that scrolls over images. In this case, the zoom modal will be simple to reach because we intend to use it more than once.

Prerequisites

The following criteria must be met before continuing with this tutorial:

• react-native-image-progress
• react-native-fast-image
• react-native-image-zoom-viewer

Step 1: Importing Required Components From Libraries

Implement the pinch-to-zoom image capability by importing the required components from the libraries listed above. To import the aforementioned components, use the following code:

import ImageViewer from 'react-native-image-zoom-viewer';
import Modal from "react-native-modal";
import FastImage from "react-native-fast-image";
import { createImageProgress } from "react-native-image-progress";

Step 2: Using a Custom Image Component

You must wrap the FastImage component with the createImageProgress function from the “react-native-image-progress” package in order to process the image and reflect the loader as it is being loaded. To enclose the FastImage component, use the following code:

const Image = createImageProgress(FastImage)

Step 3: Create the ZoomModal Component

The next step is to add a modal with an ImageViewer from the library React Native Image Zoom Viewer (react-native-image-zoom-viewer). We have developed a method named “renderImage,” which includes the specific FastImage component, to render the images. The ActivityIndicator component from the “react-native” package can be used for loading. For this, you can use the following code:

const renderImage = ({ source, style }) => {
       return (
           <Image
               source={{ uri: source?.uri, priority: 'high' }}
               style={style}
               resizeMode="contain"
               indicator={renderLoading}
           />
       )
   }

We may use the ActivityIndicator from react-native below for loading.

const renderLoading = () => {
       return (<ActivityIndicator color={'white'} size={'large'} />)
   }

UI Component for Image Zoom

<Modal visible={visible} transparent={true}>

            <CrossIcon onPress={closeModal} />

            <ImageViewer
                enablePreload={true}
                index={currentIndex}
                imageUrls={images}
                useNativeDriver={true}
                enableSwipeDown={false}
                renderImage={renderImage}
                loadingRender={renderLoading}
                saveToLocalByLongPress={false}
             />

  </Modal>

Step 4: Use the app’s zoom modal functionality

You can use the zoom modal in the app now that we’ve added the pinch-to-zoom feature. The pinch-to-zoom picture feature can be achieved by importing the zoom image modal into the file. For this, you can use the following code:

<ZoomImageModal
        images={selectedImage} //Array of objects having URL of images
        isVisible={isVisible} //State for managing if the modal is open
        currentIndex={currentIndex}
        closeModal={closeZoomImageModal} // Function for closing modal
      />

Conclusion

In this article, we learnt how to use the React Native image zoom viewer library to provide picture zooming capabilities to a React Native application. By enabling users to zoom in on photos and analyse them in more depth, developers can improve the user experience by implementing the aforementioned steps. If you want to create an RN multi-media app with image zoom and other features, hire React app developer from us.

Frequently Asked Questions (FAQs)

1. How can an image zoom effect be made to react?

Adding pinch-zoom and pan sub components is made possible using a React component library. You can pinch-zoom and pan the zoomed image on a touchscreen. On a desktop computer, you can “pinch” by pressing and holding the ALT key while dragging the mouse from the inner content’s centre to its edges.

2. What happens when you zoom in on an image?

When using an optical zoom, the lens enlarges the image such that it appears as though the objects in the image are nearer to the camera. The lens is physically extended in optical zooming to enlarge or zoom in on an item.

3. How do React Native maps auto-zoom?

When the list of markers is updated, send the list of ids from the identifier props in the marker to the fitToSuppliedMarkers function to automatically zoom the list of markers in the MapView.

4. Zoom utilises React Native?

The Zoom Video SDK for React Native is an iOS and Android wrapper for the Zoom Video SDK. The Zoom Video SDK capabilities can be incorporated into your React Native iOS and Android apps using the high level components, classes, and utilities provided by this library.

Book your appointment now