Implementing Pinch-to-Zoom Using React Native Image Zoom Viewer

Table of Contents

Introduction

In this blog, we will learn the image zoom functionality in React Native application using the react-native modal, which will be scrollable through images. Here, we want to use the zoom modal more than once, and hence it will be easily accessible.

The above shows an example of Image Zooming using React Native Image Zoom Viewer.

Prerequisites

Before proceeding with this tutorial, you must have the following prerequisites:

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

Step 1: Import Necessary Components From Libraries

Import the necessary components from the libraries mentioned above to implement the pinch-to-zoom image functionality. You can use the following code to import these components:

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

To process the image and represent the loader while loading the image, you need to wrap the FastImage component with createImageProgress from the “react-native-image-progress” library. You can use the following code to wrap the FastImage component:

const Image = createImageProgress(FastImage)

Step 3: Create ZoomModal Component

Now, you need to add a modal with ImageViewer from the React Native Image Zoom Viewer (react-native-image-zoom-viewer) library. For rendering the images, we have created a function called “renderImage,” which contains the custom FastImage component. For loading, we can use the ActivityIndicator component from the “react-native” library. You can use the following code for this:

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

For Loading, we can use the below ActivityIndicator, which is from react-native

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

UI Part for Zoom Image

<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 Zoom Modal in The App

Now that we have implemented the pinch-to-zoom functionality, you can use the zoom modal in the app. You can import the zoom image modal into the file where you want to achieve the pinch-to-zoom image functionality. You can use the following code for this:

<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