React Native pinch-to-zoom View

by [email protected]

How to install

npm add react-native-pinch-to-zoom-view

There are no native modules to add.

How to use

import { PinchZoomView } from 'react-native-pinch-to-zoom-view';

class MyScreenComponent extends Component {
    render() {
       return (
           <View style={styles.screenContainer}>
               <PinchZoomView>
                   <Image source={...} />
               </PinchZoomView>
           </View>
       );
    }
}

Props

• style any ViewProps (optional)
• disabled set to true to disable touch (optional)
• pictureWidth the child image width (in points) if you want the aspect ratio to be preserved (optional)
• pictureHeigth the child image height (in points) if you want the aspect ratio to be preserved (optional)
• onZoomStart callback when the zoom animation begins. Use it to hide controls, buttons, etc. (optional)
• onZoomEnd callback when the zoom animation ends. Use it to show controls, buttons, etc. (optional)
• minZoom set to a value between 0 and 1 if you want to allow zooming out, or 1 if you don't want that (default = 0.6).
• maxZoom set to a value between 1 and +Inf to limit the zoom level (default = 8). A value of 8 allows zooming in by a factor of 8x.

Methods

• doubleTap() call when you detect a double tap

Double tap

Double tap to zoom in and out is expected by most users. Save a ref to <PinchZoomView> and call the method this.pinchZoomViewRef.doubleTap() when you detect two taps in a short interval (less than 400 ms).

Example for double tap

class MyScreenComponent extends Component {
    pinchZoomViewRef = null;
    lastTapTime = 0;

    handleImageTap = () => {
        const now = Date.now();
        if (now - lastTapTime < 350) {
            // double tap
            this.pinchZoomViewRef?.doubleTap();
            this.lastTapTime = 0;
        } else {
            // single tap
            this.lastTapTime = now;
        }
    }

    render() {
       return (
           <View style={styles.screenContainer}>
               <PinchZoomView ref={(ref) => { this.pinchZoomViewRef = ref; }}>
                   <TouchableWithoutFeedback onPress={this.handleImageTap}>
                       <Image source={...} />
                   </TouchableWithoutFeedback>
               </PinchZoomView>
           </View>
       );
    }
}

You have to implement the double tap detection logic yourself because a default implementation would mess with the other touchables or PanHandlers you could have.