Ensure Image Stays within Container During Zooming

[belwalshubham]

https://github.com/Glazzes/react-native-zoom-toolkit/assets/61574835/e0dd7381-f34a-4b7d-8d0d-de3b18568d3f

Summary

I'm encountering an issue where the height of the image increases when zooming using the react-native-zoom-toolkit library. However, the expected behavior is to maintain a fixed height for the image within its container, even when zooming in.

Issue

When I zoom in on the image, the text below the image overlaps with it. but, expected behavior would be, image should stay within its container even after zooming, without overlapping the below text.

https://github.com/Glazzes/react-native-zoom-toolkit/assets/61574835/a09fe539-158d-4cb1-863e-67de1f3d9554

Steps to Reproduce

1. Import the ResumableZoom component from react-native-zoom-toolkit.
2. Wrap an Image component with ResumableZoom.
3. Attempt to zoom in on the image.

[Glazzes]

Making a random guess from what I see, I'd try out the following:

• Wrapping ResumableZoom in a component with its same style properties, plus overflow property set to "hidden"

  <View style={{flex: 1, justifyContent: "center", alignItems: "center", overflow: "hidden"}}>
  <ResumableZoom>
  <SomeImageHere />
  </ResumableZoom>
  </View>
  <Text>Random text here</Text>

If this doesn't fix your issue, please provide an expo snack (https://snack.expo.dev/) with the layout you're building.

[belwalshubham]

Hi @Glazzes the issue fixed now, thanks a lot for your response also image can be made static in the frame? currently I can reduce the image in the frame and can also move minimized image in the frame.

![Uploading Screenshot 2024-04-09 at 8.19.43 PM.png…]()

[Glazzes]

@belwalshubham If you want the image to not be scaled below one, set scaleMode property to ScaleMode.CLAMP, and if you do not want the image to be dragged you can disable the pan gesture by setting panEnabled property to false.

[belwalshubham]

@Glazzes When I zoom out the image, it continues to shift from its original position within the container despite its size remaining unchanged. How can I resolve this issue?

[Glazzes]

@belwalshubham It's difficult to tell without a video showcasing this issue, provide the proper footage and please make sure it's a smooth video, an expo snack of what you're building would be a great addition as well.

[belwalshubham]

@Glazzes In the video provided, when zooming out the image using two fingers on a mobile device, it's observed that the image can be easily dragged up and down, resulting in white empty space being displayed. However, this behavior is not desired. The expected behavior is that the image should remain fixed within its container and not be draggable to any position.

Uploading 954a54f6-7f63-46c9-8aea-69d675d8dd01.mp4…

[belwalshubham]

@Glazzes If you're unable to view the video above, please refer to the issue at the top where I shared the initial video. The image is not fixed within frame it can be slided horizontally and move within the frame, how to fix that ?

[Glazzes]

@belwalshubham At the moment dragging up and down it's an intentional behaviour because of the nature of the algorithmin I've crafted, as far as I know you can drag with both fingers only if panWithPinch property is set to true, setting it to false should probably fix the issue.

[belwalshubham]

Thanks @Glazzes this works!

[Glazzes]

Glad to know it worked!