guochen-whu / react-native-pinch-zoom-view Goto Github PK

The documentation needs updating. The command to download/install from npm,

npm install react-native-pinch-zoom --save, doesn't work.

The following does:
npm install react-native-pinch-zoom-view --save.

Just a friendly heads up! Stay awesome!

Why text is getting blurred while zooming the view

Any solution please!

I currently have a view that is bigger than my phone screen and when I try to translate the view, I'm only able to translate it with the portions of the view that is on initial start up. Here's a picture to what I'm referring to:

The shaded red portion is the only area in which I can translate and zoom in, but I can not zoom in or translate on the red portions that are not shaded

while zooming in within a view box, the zoomed in view gets rendered even out side the view box and overlays other views

I set scalable={false} as prop of PinchZoomView component - but it still zooming regardless value

"react": "16.0.0",
"react-native": "0.51.0"
"react-native-pinch-zoom-view": "^0.1.3"

Thanks for the library, seems to work well.

I am seeing that if I use PinchZoomView, change to a different view, and come back the PinchZoomView keeps its zoom/scroll position. Is there a way to reset the position to the default?

Great tool!

I would love to be able to animate the zoom back to its originally rendered scale & position. I imagine it'd be pretty easy to add this as a method but I'm pretty new to React so I'm posting here in case anyone else wants to try. I might take a crack at it in the next couple months if not. :)

Possible to not let translate out of margins, limit in some way to not go over width and height. I will try to explain with an image.

*phone width

Hi,
Library is so helpful.

Components description:I've an Image and Rect(of SVG) inside PinchZoomView tag.
Issue: on press is not working while we are zooming the image for more than 1.5X or 2X. Is there a possibility of restricting the scale of zoom to a particular value. because click on working and moreover screen is flickering instead of getting selected.

thanks in advance :)

I am wrapping an image in pinch-zoom-view... Nothing is happening!

Could not find a declaration file for module "react-native-pinch-zoom-view". 'c:/Users/User/project/node_modules/react-native-pinch-zoom-view/index'
I try "npm install @types/react-native-pinch-zoom-view" - not working.
I try create file index.d.ts with "declare module 'react-native-pinch-zoom-view';" Error is gone, but <PinchZoomView><SvgXml bla-bla-bla /></PinchZoomView> - not zoomable.
[email protected]
Expo sdk 35
react 16.8.3

Hi. I think you need to publish this update to npm! Thanks.

I'm having an issue where, for large canvases, zooming changes the apparent pan location. In fact, offsetX stays 0 which the PinchZoomView has become smaller, and converges onto its center:
In this example the PinchZoomView has a width and height of 2500. The objects in the view are about 200x400.

I'm working on a fix which would require the user to supply height/width of the PinchZoomView as props, then update the OffsetX using the width, OffsetX, and current scale in the equation, but this equation is difficult to think about.

I think the component would be improved if the objects being zoomed in on stay in focus when zooming.

Hopefully this is possible :D

_handleMoveShouldSetPanResponder = (e, gestureState) => {
    return this.props.scalable && gestureState.dx > 2 || gestureState.dy > 2 || gestureState.numberActiveTouches === 2;
}

should be

_handleMoveShouldSetPanResponder = (e, gestureState) => {
    return this.props.scalable && (gestureState.dx > 2 || gestureState.dy > 2 || gestureState.numberActiveTouches === 2);
}

First of all, thanks for this awesome lib! It was the first I found that truly uses only RN, and I searched a lot...

So now for the issue, I need zoom for an image inside a Modal and that doesnt seem to work. 😭

I have tested it outside and had no problems whatsoever, but <PinchZoomView> wont zoom if inside <Modal> tags.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I was getting an Invariant Violation error.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-pinch-zoom-view/index.js b/node_modules/react-native-pinch-zoom-view/index.js
index da7d6c4..d98595c 100644
--- a/node_modules/react-native-pinch-zoom-view/index.js
+++ b/node_modules/react-native-pinch-zoom-view/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, PanResponder, ViewPropTypes } from 'react-native';
+import { View, StyleSheet, PanResponder } from 'react-native';
+import ViewPropTypes from 'deprecated-react-native-prop-types';
 
 // Fallback when RN version is < 0.44
 const viewPropTypes = ViewPropTypes || View.propTypes;

This issue body was partially generated by patch-package.

Is it possible to center the zooming to where the fingers are pinching?

Hi Guys

Am facing an issue with zoom out.How can I fix the zoom out value in react-native-pinch-zoom-view.
I tried many but I couldn't figure it out.Could you please help me, guys.It's going zoom out too much.How can i handle this.
Actually am zooming the View not an image.In View am displaying html Content through then react-native-render-html plugin.It contains image or content(text).

Great library.
Just to let you know that it now raises a warning regarding react lifecycle method componentWillMount. It is being deprecated.

Is it possible to zoom to a particular point location within view without using pinch gesture and later pinch can be used to zoom out of the state...