zoom the image to take the entire view on double tap

[christopher-18]

On double tapping the image, i want to show the enlarged image taking the entire screen. And if I once again double tap, it should resize the image. How can i get this double tap event. Please suggest.

[ditorodev]

with latest master now you can pass an onDoubleClick prop, this prop when called receives an object that looks like this:

export interface IOnDoubleClick {
  pageX: number,
  pageY: number
}

So you can have something like:

import { Image, Dimensions } from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';

export default class App extends React.Component {
     imageZoom = null; // We need the ImageZoom ref in order to use the centerOn method that comes with its reference
     state = {zoomed: false}; // We manage an state to know whether to zoomIn or zoomOut
    doubleClickHandler = ({pageX, pageY}) => {
       if(!!this.imageZoom) { // Check whether the ref is already assigned
                this.imageZoom.centerOn({x: pageX, y: pageY, scale: this.state.zoomed ? 1 : 5}); // ZoomIn/Out on the position user DoubleClicked
                this.setState((state) => {...state, zoomed: !state.zoomed}) // update the state
        }
     } 

    render: function() {
        return (
            <ImageZoom cropWidth={Dimensions.get('window').width}
                       ref={(ref) => this.imageZoom = ref} // Assign the ref
                       cropHeight={Dimensions.get('window').height}
                       onDoubleClick={this.doubleClickHandler} // Assign callback
                       imageWidth={200}
                       imageHeight={200}>
                <Image style={{width:200, height:200}}
                       source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}}/>
            </ImageZoom>
        )
    }
}

This should make it

PS: I'm not sure whether this code compiles or not, however, I hope it gives you a brief idea on how it can be made