How would you implement pinch-zoom in react-native?

Question

I've been looking into PanResponder. My current working hypothesis is that I would detect if there are two touches that are moving outwards and if so, increase the element size in the onPanResponderMove function.

This seems like a messy way to do it. Is there a smoother way?

Answer 1

Note: This answer isn't related to the pan responder but addressing the main question of how you would implement pinch zoom in react native.

Using either Expo or React-Native with out expo you can import PinchGestureHandler from react-native-gesture-handler. There are other gesture handlers found here: react-native-gesture-handler

import { PinchGestureHandler } from 'react-native-gesture-handler';

In example let's say we were using a camera and we wanted to detect the pinch for zooming:

<PinchGestureHandler
    onGestureEvent={this.onPinchGestureEvent}
  >
    <View>
          <Camera
              type={cameraType}
              flashMode={flashMode}
              zoom={zoom}
              style={styles.preview}
              ref={camera => this.camera = camera}
          />
    </View>
        </PinchGestureHandler>

Then we can take action with the gesture event like so:

   onPinchGestureEvent = event => {
      console.log(event.nativeEvent.scale);
    }

Answer 2

Apart from looking at the Pan Responder, you'll need to take a look at the Gesture Responder System as well.

Particularly the evt that is returned by the responders. Here's that the React-Native docs say.

evt is a synthetic touch event with the following form:

nativeEvent
    changedTouches - Array of all touch events that have changed         since the last event
    identifier - The ID of the touch
    locationX - The X position of the touch, relative to the element
    locationY - The Y position of the touch, relative to the element
    pageX - The X position of the touch, relative to the root element
    pageY - The Y position of the touch, relative to the root element
    target - The node id of the element receiving the touch event
    timestamp - A time identifier for the touch, useful for velocity calculation
    touches - Array of all current touches on the screen

Now that you have the touches you can work out which areas/objects are being touched and adjust the item accordingly.