How to Implement Pinch-to-Zoom Using React Native Image Zoom Viewer?

React Native is one of the prime platforms for building mobile apps for both Android and iOS platforms using a single codebase.

Images are one of the core elements of any mobile app development. A Zoom functionality is one of the mostly used features for examining images in a great detail, used mainly by the apps presenting images, such as galleries, catalogs, or content platforms based on images.

React Native Image Zoom Viewer gives the user options to zoom in order to observe closely the image or zoom out so as to see the complete image. By introducing the option of React Native Image Zoom Viewer in your React Native applications, you can amplify the visual experience for the users. 

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”).

Steps to Implement Pinch-to-Zoom Using React Native Image Zoom Viewer:

Step 1: Install the package using npm or yarn

npm i react-native-image-zoom-viewer --save
yarn add  react-native-image-zoom-viewer

Step 2: Example

import { View,Modal} from 'react-native'
import React, { useState } from 'react'
import ImageViewer from 'react-native-image-zoom-viewer';

const App = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const images = [
        {
            url:'https://devtop.io/wp-content/uploads/2022/10/react-native-1.png',
        },
        {
            url:'https://devtop.io/wp-content/uploads/2022/10/react-native-1.png',
        }, 
        { 
            url:'https://devtop.io/wp-content/uploads/2022/10/react-native-1.png', 
        },
    ];
    return (
        <View style={{ flex: 1 }}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    setModalVisible(!modalVisible);
                }}
            >
                <ImageViewer
                    enableSwipeDown={true}
                    imageUrls={images}    
                    onSwipeDown={() => setModalVisible(!modalVisible)}
                />
            </Modal>
        </View>
    )
}
export default App;

Conclusion:

Accordingly, you can implement pinch-to-zoom using React Native image zoom viewer. Try it in your next project and make the image viewing experience in your app seamless and interactive. Let us know if you have any questions or suggestions in the comments below!

Happy Coding!