CODEWITHSUNDEEP
iosreactjsreact-nativezooming
Adrienne
Adrienne

Reputation: 2680

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

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?

Upvotes: 11

Views: 28420

Answers (5)

FabricioG
FabricioG

Reputation: 3320

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);
    }

Upvotes: 8

msand
msand

Reputation: 498

I've made a pinch to pan and zoom component for react-native-svg: https://snack.expo.io/@msand/zoomablesvg-v2.0.2

https://github.com/msand/zoomable-svg/blob/master/index.js

With support for view-box transforms and press/panhandlers in the children.

Upvotes: 0

brendan
brendan

Reputation: 12111

You'll need to use the Gesture Responder System.

Simple pinch and zoom gestures require translation and scaling.

To calculate the translation and scale factors you'll want to store the touch events and use the touch location deltas.

I've written an NPM module that does this.

react-native-pinch-zoom-responder

Upvotes: 0

Zidail
Zidail

Reputation: 620

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.

Upvotes: 2

Rahul
Rahul

Reputation: 357

If you need only simple pinch zoom functionality just use ScrollView (doc here)

Just give maximumZoomScale (greater than one) and minimumZoomScale as you wish.

Upvotes: 9

Related Questions