CODEWITHSUNDEEP
reactjsreact-native
Shubham Bisht
Shubham Bisht

Reputation: 687

How to pinch zoom image in React Native using PanResponder?

I want to zoom in or zoom out a image when user pinch zooms image using 2 fingers. How can I implement it using PanResponder?

Or can someone suggest me a good logic on how it can be done?

PS: I don't want to use any external API.

Upvotes: 2

Views: 4030

Answers (1)

Manjeet Singh
Manjeet Singh

Reputation: 4572

For ios, it can be achieved wrapping your image within ScrollView, as it has inbuilt support for following properties

maximumZoomScale
minimumZoomScale
pinchGestureEnabled

try something like this 

<ScrollView 
      maximumZoomScale={SOME_VALUE i.e. 2.5}
      minimumZoomScale={MIN_ZOOM_VALUE i.e 1.0}
      pinchGestureEnabled={true}
>
       <Image source={YOUR_IMAGE} style={YOUR_IMAGE_STYLEs}/>
</Scrollview>

On Android, you may need to use some library or manage it with PanResponder and Animated, PanResponder example code may be a good start point for you.

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });
  }

  render() {
    const imageStyles = {transform: [
  {
    scale: ANIMATION_VALUE_CALCULATED_ON_MOVEMENT //
  }
]}
    return <Animated.Image {...this._panResponder.panHandlers} style ={imageStyles} source={IMAGE_SOURCE}/>;
  }
}

Upvotes: 4

Related Questions