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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Modal } from 'react-native'; |
3. Import ImageViewer component from react-native-image-zoom-viewer library.
|
1 |
import ImageViewer from 'react-native-image-zoom-viewer'; |
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.
|
1 2 3 4 5 6 7 8 9 10 |
constructor(props) { super(props); this.state = { ModalVisibleStatus: true }; } |
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.
|
1 2 3 4 5 |
ShowModalFunction(visible) { this.setState({ModalVisibleStatus: false}); } |
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.
|
1 2 3 4 5 6 7 8 9 10 |
render() { const images = [ { url: 'https://reactnativecode.com/wp-content/uploads/2018/02/desktop.jpeg'} ]; return ( ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
render() { const images = [ { url: 'https://reactnativecode.com/wp-content/uploads/2018/02/desktop.jpeg'} ]; return ( <View style={styles.MainContainer}> <Modal visible={this.state.ModalVisibleStatus} transparent={false} onRequestClose={ () => this.ShowModalFunction() }> <ImageViewer imageUrls={images}/> </Modal> </View> ); } |
8. Create Style.
|
1 2 3 4 5 6 7 8 9 10 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', } }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import React, { Component } from 'react'; import { StyleSheet, View, Modal } from 'react-native'; import ImageViewer from 'react-native-image-zoom-viewer'; export default class Myproject extends Component { constructor(props) { super(props); this.state = { ModalVisibleStatus: true }; } ShowModalFunction(visible) { this.setState({ModalVisibleStatus: false}); } render() { const images = [ { url: 'https://reactnativecode.com/wp-content/uploads/2018/02/desktop.jpeg'} ]; return ( <View style={styles.MainContainer}> <Modal visible={this.state.ModalVisibleStatus} transparent={false} onRequestClose={ () => this.ShowModalFunction() }> <ImageViewer imageUrls={images}/> </Modal> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', } }); |
Screenshot:
How i could use it to load local images?
Read our this tutorial Jonathan https://reactnativecode.com/select-pick-image-capture-camera-gallery-react-native/ this would help you.
@admin, the tutorial you referenced above has this piece of code:
// You can also display the image using data:
// let source = { uri: ‘data:image/jpeg;base64,’ + response.data };
My question (which might be Jonathan’s question too) is: can we use this pattern of embedding the base64 image data in the imageUrls property of ImageViewer?
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
Anjalai you want to fetch images locally or from server using URL ?
but when you are passing data from other component. i took a long time to appear or it is black background only. and never loads the images.
Thanks for telling me, I will run the project again and check the code myself.