PinchGestureHandler

A continuous gesture handler that recognizes a pinch gesture. It allows for tracking the distance between two fingers and using that information to scale or zoom your content. The handler activates when fingers are placed on the screen and change their position. Gesture callback can be used for continuous tracking of the pinch gesture. It provides information about velocity, anchor (focal) point of gesture and scale.

The distance between the fingers is reported as a scale factor. At the beginning of the gesture, the scale factor is 1.0. As the distance between the two fingers increases, the scale factor increases proportionally. Similarly, the scale factor decreases as the distance between the fingers decreases. Pinch gestures are used most commonly to change the size of objects or content onscreen. For example, map views use pinch gestures to change the zoom level of the map.

The handler is implemented using UIPinchGestureRecognizer on iOS and from scratch on Android.

Properties

Properties provided to PinchGestureHandler do not extend the common set of properties from base handler class.

Event data

See set of event attributes from base handler class. Below is a list of gesture event attributes specific to PinchGestureHandler:

scale

The scale factor relative to the points of the two touches in screen coordinates.

velocity

Velocity of the pinch gesture at the current moment. The value is expressed in point units per second.

focalX

Position expressed in points along the X axis of the center anchor point of the gesture.

focalY

Position expressed in points along the Y axis of the center anchor point of the gesture.

Example

See the scale and rotation example from GestureHandler Example App or view it directly on your phone by visiting our expo demo.

export class PinchableBox extends React.Component {
  _baseScale = new Animated.Value(1);
  _pinchScale = new Animated.Value(1);
  _scale = Animated.multiply(this._baseScale, this._pinchScale);
  _lastScale = 1;
  _onPinchGestureEvent = Animated.event(
    [{ nativeEvent: { scale: this._pinchScale } }],
    { useNativeDriver: USE_NATIVE_DRIVER }
  );

  _onPinchHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this._lastScale *= event.nativeEvent.scale;
      this._baseScale.setValue(this._lastScale);
      this._pinchScale.setValue(1);
    }
  };

  render() {
    return (
      <PinchGestureHandler
        onGestureEvent={this._onPinchGestureEvent}
        onHandlerStateChange={this._onPinchHandlerStateChange}>
        <View style={styles.container} collapsable={false}>
          <Animated.Image
            style={[
              styles.pinchableImage,
              {
                transform: [{ perspective: 200 }, { scale: this._scale }],
              },
            ]}
          />
        </View>
      </PinchGestureHandler>
    );
  }
}