Currently the new scale is automatically calculated based on a ratio (width / height) and is clamped (1.4 to 1.5).

It would be worth it to allow to pass a props "scaleStep" to override such value. We could also imagine a minScale and maxScale props for other purpose that could also impact the clamped values.

Thanks for the package. is there any plan to support Typescript or even rewrite the package with Typescript?

Hi, I'm using this library to zoom images.
I get the error while testing on a Motorola G52 with Android 12.
Works well on iphone simulator.

I have a fix for it. I can send a PR.

Basically when the gesture starts event.translationX and event.translationY have non zero values on Android, the value depends on how much zoom there is. The value on iphone simulator is always 0, which is what it is expected by the library.

The fix consists on listening to Gesture.Pan().onStart() to grab the initial values of event.translationX and event.translationY and use them as offsets for Gesture.Pan().onUpdate() and Gesture.Pan().onEnd()
And it works perfectly because if the initial value is 0 then we have the same result as now, but if the value is non zero it fixes the glitch.

Hi, thank you for this library, it's exactly what I need!
For my purposes, I need to know when an image is zoomed in and zoomed out. So, I would need something like a callback.
Looking at the source code, I saw both the useZoomGesture hook and the animationFunction prop, but I didn't understand how to use them.
So I'm asking for your help on this.
I don't want to customize or rewrite the entire animation, I just need to know when the zoom is activated or deactivated.
Ideally, I would like to have two callbacks: at the beginning of the animation and at the end of the animation.

Thanks!

Hello 👋

I get the following error with the latest version :

It seems that there is a problem with the animationFunction type.

I think it can be fixed with the following type :

animationFunction?: typeof withTiming;

The PR is already ready if you're ok with that.

I'm trying to use with typescript but I got this issue.

Version used:
"react-native-reanimated": "^2.12.0"
"react-native-gesture-handler": "^2.8.0"

as title

Thanks for the awesome project.

Could you share the code that you shown in the video?

It's okay if you could not.
Then, can you tell me what you used for sliding pages?

Thanks in advance!

hello. When using pinch zoom, is there a way to prevent the pinch zoom from being smaller than the initial scale?

Hi, thanks for great library, could you support a list of images, thanks so much

Hello coder team :)

I tried using this lib, but when i wanted to show your component, with an image within it, i get this error:
Transform with key of "scale" must be a number: {"scale": 1}

I use
"typescript": "4.8.4"
"react-native": "0.72.4",
reanimated 3.3.0
"react-native-gesture-handler": "2.16.2",
"react-native-zoom-reanimated": "^1.4.5"

I hope your able to resolve the issue :)

"react-native-zoom-reanimated": "^1.0.6",
"react-native-reanimated": "^1.13.1",
"react-native-gesture-handler": "^1.6.1",

Hi,

I am having trouble with integrating FastImage library with yours.
Only white color is displayed. For example with react-native-pdf-light i have no problem, it works as expected
Is there something I can do to make it work?

Thank you

Current style definitions are wrong

export interface ZoomProps {
  style?: StyleProp<ViewProps>;
  contentContainerStyle?: StyleProp<ViewProps>;
  ...
}

It should be

export interface ZoomProps {
  style?: StyleProp<ViewStyle>;
  contentContainerStyle?: StyleProp<ViewStyle>;
  ...
}

Pinch to zoom here only zooms in at the center of your screen, have you interacted with focal points to zoom at the position you pinch at?

On ios its working fine but on android its not working at all..

Hi, thank you for great package :)

Is there a way to reduce the bounciness? Or even remove it, the default settings are kinda too much for my purpose.

Thank you in advance

I use Reanimated 3 in the project so when I try to install the lib it fails.

But I see this from package:

"devDependencies": {
    "react-native-reanimated": "^3.2.0",
},
"peerDependencies": {
    "react-native-reanimated": "^2.0.0"
}

Should peerDependencies be bumped to v3 also?

Hello,

I noticed on Android that the double tap for zooming out does not work.

How to reproduce it:
Zoom in on a FastImage (in my case) and then try to zoom out using double tap. It does not work, tap is ignored.

I have checked the code and I found out why and how it might be fixed.

Why this happens?
The Pan gesture is triggered instead of Tap gesture when the picture is zoomed in.

How could it be fixed?
Replace return Gesture.Race( Gesture.Simultaneous(pinchGesture, panGesture), tapGesture )

with return Gesture.Race( Gesture.Simultaneous(pinchGesture, panGesture, tapGesture) )

I'm not used to the Gesture implementation, but it seems that not allowing for tap simultaneously with pinch & pan creates this situation. I am using Android 13. I'm not 100% sure if that's the only solution, however I don't think it hurts allowing for double tap while simultaneously zooming if, if anyone would want to do so for any reason, the behaviour works fine from what I tested.

I would have created a PR for this, but I don't have write access to it.

Let me know what you think.