ScrollView pinch zoom in and out functionality not working for android

[k0m00xv]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: macOS High Sierra 10.13.5
Node: 9.10.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.1 => 16.4.1
react-native: ^0.52.0 => 0.52.3

Description

I am using scrollView' maximumZoomScale and minimumZoomScale properties to zoom in and out of an SVG. It works as expected with ios but with android it doesn't respond to the pinch gesture, Please help!

Reproducible Demo

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[LeathanTeal]

@k0m00xv I am running into this same issue. Did you ever find a solution?

[JensDebergh]

@k0m00xv @LeathanTeal maximumZoomScale & minimumZoomScale are iOS only. ScrollViews on android do not support zoomScales.

[KrMilind]

@JensDebergh Yeah, I realized that the hard way, but I still want to know if there is a pinch zoom option in react native which behaves similarly on both ios and Android platforms.
@LeathanTeal Not really. I searched a lot online, I tried using react-native-pinch-zoom-responder
and react-native-pinch-zoom-view components but didn't really work as expected.

[Darker]

Another React issue that is closed instead of solved. Why even have an issue tracker if you do not care about issues that people report?

[JensDebergh]

@Darker React Native tries to bridge the gap between Android and iOS. Only iOS supports maximumZoomScale and minimumZoomScale because they support it natively on iOS.

Android on the other hand does not have native support for these properties. React native is unable to support it because the native platform doesn't have support for it.

So yes, I do understand why they are closing this issue. The only thing they could do is provide a decent explanation.

It is possible to add a zoom functionality in react-native using a ScrollView in a View which has a PanResponder attached to it.

Hope this helps:

react-native-camera/react-native-camera#1282

import React, { Component } from "react";
import { View, PanResponder, Dimensions } from "react-native";

class ZoomView extends Component {
  constructor(props) {
    super(props)
    this._panResponder = PanResponder.create({
      onPanResponderMove: (e, { dy }) => {
        const { height: windowHeight } = Dimensions.get(`window`)
        return this.props.onZoomProgress(
          Math.min(Math.max(dy * -1 / windowHeight, 0), 0.5),
        )
      },
      onMoveShouldSetPanResponder: (ev, { dx }) => {
        return dx !== 0
      },
      onPanResponderGrant: () => {
        return this.props.onZoomStart()
      },
      onPanResponderRelease: () => {
        return this.props.onZoomEnd()
      },
    })
  }
  render() {
    return (
      <View
        style={{ flex: 1, width: `100%` }}
        {...this._panResponder.panHandlers}
      >
        {this.props.children}
      </View>
    )
  }
}

[KrMilind]

@JensDebergh But in android, we have seen the zooming functionality with react-native implementation, so why not(expect the react native team to) develop a react native component which provides the same functionality on both platforms. Since zooming is a feature that almost all apps end up needing. It is just good support if they are able to come up with some component that provides zooming functionality on both platforms

[KrMilind]

Also, I did find a graceful way of handling pinch zoom. There is this component https://www.npmjs.com/package/react-native-image-pan-zoom which allows you to control the pinch zooming functionality to a certain level. And it is not perfect, but was still able to solve my issue. Hope it helps anyone out there looking for a solution.