Quick Summary:

React Native is a popular framework for building mobile apps for Android and iOS platforms using a single codebase. One of the essential elements of mobile app development is images, and zooming functionality is a widely used feature for examining images in greater detail. In this tutorial, we will implement the pinch-to-zoom functionality for images in our React Native app using the React Native image zoom viewer library (“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:

Copy Text
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:

Copy Text
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:

Copy Text
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

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

UI Part for Zoom Image

Copy Text
<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:

Copy Text
<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 tutorial, we learned how to implement zooming functionality for images in a React Native app using the React Native image zoom viewer library. By following the above steps, developers can provide a better user experience by allowing users to zoom in on images and examine them in greater detail. Hire React Native developer from us if you wish to build your RN multi-media app depicting image zoom and other functionalities.

Zoom, Indulge, and Scrutinize

Supercharge Your App’s Images with React Native Image Zoom Viewer and Leave Users in Awe!

BOOK A FREE 30 MIN CALL TO KNOW HOW

Build Your Agile Team

Hire Skilled Developer From Us

Subscribe for
weekly updates

newsletter

What Makes Bacancy Stand Out?

  • Technical Subject Matter Experts
  • 2500+ Projects Completed
  • 90% Client Retention Ratio
  • 12+ Years of Experience

Our developers primarily focus on navigating client's requirements with precision. Besides, we develop and innovate to deliver only the best solutions to our clients.

get in touch
[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.

How Can We Help You?