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


Incorporating image interactivity into mobile apps can be difficult, but the React Native Image Zoom Viewer offers streamlined solutions. It is a powerful tool that allows users to zoom and pan images quickly with smoothness and responsiveness, boosting the overall user experience. Also, its high performance can ensure consistent functionality across iOS and Android devices.

Moreover, the viewer is easily integrated and highly customizable, allowing your developers to craft the application’s unique style and requirements. In this blog, we will learn the image zoom functionality in the React Native application using the react-native modal, which will be scrollable through images.


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 for React-Native-image zoom-viewer:

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)
Integrate Seamless Image Viewing with React Native

Contact React Native development company to empower your users with smooth zoom and pan functionalities efficiently.

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 (
               source={{ uri: source?.uri, priority: 'high' }}

For Loading, we can use the below ActivityIndicator, which is from the React Native zoom image.

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

UI Part for React Native Zoom Image

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

            <CrossIcon onPress={closeModal} />



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 React Native image zoom:

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


This tutorial taught us 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!


Build Your Agile Team

Hire Skilled Developer From Us

[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?