pinch zoom gesture

.js

// utils/calculateMiddlePoint.js
export default (touchA, touchB) => {
  const diffX = touchA.pageX - touchB.pageX;
  const diffY = touchA.pageY - touchB.pageY;
  
  return Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
};


// utils/calculateDistance.js

export default ({x: aX, y: aY}, {x: bX, y: bY}) => {
  const x = (aX + bX) / 2;
  const y = (aY + bY) / 2;

  return {x, y};
};

// pinchZoomable.js
'use strict';

import React, { Component, View } from 'react-native';

import calculateDistance from '../utils/calculateDistance';
import calculateMiddlePoint from '../utils/calculateMiddlePoint';

const makePoint = (touch, scope) => ({
  x: touch[`${scope}X`],
  y: touch[`${scope}Y`],
});

const initialOrigin = { x: 0, y: 0 };
const initialState = { scale: 1 };

export default ({ min, max }) => BaseComponent => {
  return class extends Component {

    constructor(props, context) {
      super(props, context);

      this._lastScale = 1;
      this._globalOrigin = initialOrigin;
      this._localOrigin = initialOrigin;
      this.state = initialState;
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.resetPinchZoom) {
        this._lastScale = 1;
        this._globalOrigin = initialOrigin;
        this._localOrigin = initialOrigin;
        this.setState(initialState);
      }
    }

    onStartShouldSetResponder = ({ nativeEvent: { touches } }) => {
      const shouldRespond = touches.length === 2;

      if (shouldRespond) {
        const [touchA, touchB] = touches;

        const aGlobal = makePoint(touchA, 'page');
        const aLocal = makePoint(touchA, 'location');

        const bGlobal = makePoint(touchA, 'page');
        const bLocal = makePoint(touchA, 'location');

        this._globalOrigin = calculateMiddlePoint(aGlobal, bGlobal);
        this._localOrigin = calculateMiddlePoint(aLocal, bLocal);
        this._initialDistance = calculateDistance(touchA, touchB);
      }

      return shouldRespond;
    }

    onMoveShouldSetResponder(evt) {
      return evt.nativeEvent.touches.length === 2;
    }

    onResponderGrant = ({ nativeEvent: { touches } }) => {
      const { onPinchZoomBegin } = this.props;
      onPinchZoomBegin && onPinchZoomBegin(this._localOrigin, this._globalOrigin);
    }

    onResponderMove = ({ nativeEvent: { touches } }) => {
      const { onPinchZoom } = this.props;
      const [touchA, touchB] = touches;
      const { _lastScale, _initialDistance } = this;

      const currentDistance = calculateDistance(touchA, touchB);

      let scale = _lastScale * currentDistance / _initialDistance;
      scale = scale > max ?
        max :
        scale < min ?
        min :
        scale;

      this.setState({
        scale
      });

      onPinchZoom && onPinchZoom(scale, this._localOrigin, this._globalOrigin, scale > _lastScale);
    }

    onResponderTerminationRequest() {
      return true;
    }

    handleTerminationAndRelease = () => {
      const { onPinchZoomEnd } = this.props;
      const lastScale = this._lastScale;
      const nextLastFactor = this._lastScale = this.state.scale;
      onPinchZoomEnd && onPinchZoomEnd(nextLastFactor, nextLastFactor > lastScale);
    }

    render() {
      const {
        onPinchZoomBegin,
        onPinchZoom,
        onPinchZoomEnd,
        pinchZoomDecoratorStyle,
        ...props
      } = this.props;

      const style = {
        ...pinchZoomDecoratorStyle,
        alignSelf: 'flex-start'
      };

      return (
        <View
          onStartShouldSetResponder={this.onStartShouldSetResponder}
          onMoveShouldSetResponder={this.onMoveShouldSetResponder}
          onResponderGrant={this.onResponderGrant}
          onResponderMove={this.onResponderMove}
          onResponderTerminationRequest={this.onResponderTerminationRequest}
          onResponderRelease={this.handleTerminationAndRelease}
          onResponderTerminate={this.handleTerminationAndRelease}
          style={style}
        >
          <BaseComponent
            ref="decorated"
            {...this.props}
            {...this.state}
            lastScale={this._lastScale}
            globalScaleOrigin={this._globalOrigin}
            localScaleOrigin={this._localOrigin}
          />
        </View>
      );
    }
  };
}