React Native Apply Pinch to Zoom Effect on Image iOS Android Example Tutorial

Pinch to zoom effect is one of the most popular image effect available in react native, Using this effect we can zoom the currently opened image in both android and iOS devices. There are many ways to do this type of functionality in react native by using Pan Responder and Gesture detector but they both are very complicated to understand so in this tutorial we are using a NPM library named as react-native-image-viewer. This library has amazing features like Pinch to zoom in, pinch to zoom out, double tap to zoom in and double tab to zoom. So in this tutorial we would going to Apply Pinch to Zoom Effect on Image component in react native iOS Android application Example tutorial.

Main Features of this library:

  • Pinch to Zoom In.
  • Pinch to Zoom Out.
  • Double Tap to Zoom In.
  • Double Tap to Zoom Out.
  • Multiple Image zoom feature.

Live Screenshot:

Contents in this project Apply Pinch to Zoom Effect on Image in iOS Android React Native App Example Tutorial:

1. Open your react native application folder in Command Prompt / Terminal and execute this command like i did in below screenshot. Here is the command:  npm i react-native-image-zoom-viewer --save

Screenshot of CMD after installing this library :

2. Import StyleSheet, View and Modal component in your project.

3. Import ImageViewer component from react-native-image-zoom-viewer library.

4. Create constructor() in your project and make a state named as ModalVisibleStatus and set its default value as True. This state is used to hide and show the Modal component.

5. Create a function named as ShowModalFunction(), this function would call on back button press while the Modal is opened and used to hide the Modal.

6. Create a Constant image array named as images in render’s block and set the Image URL inside it.

Note: This library also supports multiple image zooming, if you require then you can pass multiple images URL here and all the images will appear inside Modal and users can slide the images together. See the Library documentation for more details.

7. Create a Root View in render’s return block and inside it we would create a Modal component and inside the Modal component we would make the ImageViewer component

imageUrls : Pass the image Array.

8. Create Style.

9. Complete source code for App.js File :

Screenshot:Apply Pinch to Zoom Effect on Image

5 Comments

  1. How i could use it to load local images?

  2. Hi am new to react native. I want to show all images in modal with next , prev arrow. and am getting data from server… So i cant able to display all images in modal ..what am to do?? kindly help

Leave a Reply

Your email address will not be published. Required fields are marked *