Feature Request: Implement 'Snap Back' prop for Zoom Functionality

[TDanks2000]

Is your feature request related to a problem? Please describe. When using the zoom feature, it automatically zooms back out after zooming in, which can be frustrating when wanting to focus on a specific area for a longer duration.

Describe the solution you'd like Introduce a "snap back" property that retains the zoom level even after zooming in, ensuring that the view remains at the zoomed-in level until intentionally zoomed out by the user. The default setting for this property should be 'true'.

Describe alternatives you've considered One alternative solution might be implementing a toggle button that allows users to manually lock the zoom level once they've zoomed in, preventing the automatic zoom-out behavior. However, the proposed "snap back" property would offer a more seamless and user-friendly experience.

Additional context This feature is especially beneficial for tasks that involve detailed examination or precise adjustments in a particular area. It improves user control and enhances the user experience when focusing on specific elements without constant readjustment due to automatic zoom-out behavior.

[TwistedMinda]

Made this patch for preventing to snap back:

diff --git a/node_modules/@likashefqet/react-native-image-zoom/src/hooks/useGestures.ts b/node_modules/@likashefqet/react-native-image-zoom/src/hooks/useGestures.ts
index a05ec42..e9ee10a 100644
--- a/node_modules/@likashefqet/react-native-image-zoom/src/hooks/useGestures.ts
+++ b/node_modules/@likashefqet/react-native-image-zoom/src/hooks/useGestures.ts
@@ -39,6 +39,7 @@ export const useGestures = ({

   const scale = useSharedValue(1);
   const initialFocal = { x: useSharedValue(0), y: useSharedValue(0) };
+  const lastScale = useSharedValue(0)
   const focal = { x: useSharedValue(0), y: useSharedValue(0) };
   const translate = { x: useSharedValue(0), y: useSharedValue(0) };

@@ -51,6 +52,7 @@ export const useGestures = ({
     focal.y.value = withTiming(0);
     translate.x.value = withTiming(0);
     translate.y.value = withTiming(0);
+    lastScale.value = 0
   }, [
     focal.x,
     focal.y,
@@ -59,6 +61,7 @@ export const useGestures = ({
     scale,
     translate.x,
     translate.y,
+    lastScale
   ]);

   const onInteractionStarted = () => {
@@ -119,18 +122,20 @@ export const useGestures = ({
     .enabled(isPinchEnabled)
     .onStart(
       (event: GestureStateChangeEvent<PinchGestureHandlerEventPayload>) => {
-        runOnJS(onPinchStarted)();
-        initialFocal.x.value = event.focalX;
-        initialFocal.y.value = event.focalY;
+        if (!isPinching.current) {
+          runOnJS(onPinchStarted)();
+          initialFocal.x.value = event.focalX;
+          initialFocal.y.value = event.focalY;
+        }
       }
     )
     .onUpdate((event: GestureUpdateEvent<PinchGestureHandlerEventPayload>) => {
-      scale.value = clamp(event.scale, minScale, maxScale);
+      scale.value = clamp(event.scale + lastScale.value, minScale, maxScale);
       focal.x.value = (center.x - initialFocal.x.value) * (scale.value - 1);
       focal.y.value = (center.y - initialFocal.y.value) * (scale.value - 1);
     })
-    .onEnd(() => {
-      runOnJS(onPinchEnded)();
+    .onEnd((event) => {
+      lastScale.value = scale.value - 1
     });

   const animatedStyle = useAnimatedStyle(() => ({

[lzfxxx]

@TwistedMinda Could u submit a pr

[ctTushar]

is this feature available now ?

[likashefqet]

🎉 Version 3.0.0 of @likashefqet/react-native-image-zoom has been released with some exciting new features! 🚀

Feel free to update to the latest version to explore these additions. If you have any more suggestions or ideas for improvements, please feel free to share.

Thank you! 🙌

[OwenMelbz]

@likashefqet is there a prop to turn this feature off/on? thanks :)

[likashefqet]

@likashefqet is there a prop to turn this feature off/on? thanks :)

Absolutely! Starting from version 3.0.0, the @likashefqet/react-native-image-zoom library introduced the isDoubleTapEnabled property:

Enables or disables the double tap feature. When enabled, this feature prevents automatic reset of the image zoom to its initial position, allowing continuous zooming. To return to the initial position, double tap again or zoom out to a scale level less than 1.

Setting it to false disables this feature. You can find detailed information in the documentation under the ImageZoom Props section.

If you have any further questions or need assistance, feel free to ask!

[OwenMelbz]

@likashefqet is there a prop to turn this feature off/on? thanks :)

Absolutely! Starting from version 3.0.0, the @likashefqet/react-native-image-zoom library introduced the isDoubleTapEnabled property:

Enables or disables the double tap feature. When enabled, this feature prevents automatic reset of the image zoom to its initial position, allowing continuous zooming. To return to the initial position, double tap again or zoom out to a scale level less than 1.

Setting it to false disables this feature. You can find detailed information in the documentation under the ImageZoom Props section.

If you have any further questions or need assistance, feel free to ask!

Thanks for the fast reply, I think this conflicts with our "liking" system, when we double tap the image we "like" or "unlike" the image, but if we enable double tap it zooms in/out as well :D I guess no way to disable that?

Thanks!

[likashefqet]

@OwenMelbz Unfortunately, there's no direct way to disable the zoom feature tied to double tapping at the moment.

Would you mind opening a feature request for this? It could potentially be addressed in a future update.

Additionally, if you're interested in finding a quick fix, you might want to consider patching the package locally to meet your specific needs. Feel free to email me if you need some assistance with that.

Thanks for bringing this to my attention!

[OwenMelbz]

@OwenMelbz Unfortunately, there's no direct way to disable the zoom feature tied to double tapping at the moment.

Would you mind opening a feature request for this? It could potentially be addressed in a future update.

Additionally, if you're interested in finding a quick fix, you might want to consider patching the package locally to meet your specific needs. Feel free to email me if you need some assistance with that.

Thanks for bringing this to my attention!

Sure, here's a request for it, hopefully it is clear! https://github.com/likashefqet/react-native-image-zoom/issues/55

We're in no hurry right now, our users are already used to the snap back so isn't high on priority list, but is something we'd like to address eventually :)

Thanks!