I have an image (sometimes squared, sometimes different width/height), and I want to create a square image of it. But I want the user to choose which part of the image is in the new image (not necessarily the center part). So I created a image viewer with gesture-handler and reanimated to scale and pan an image within a rectangle. I have created a working example: expo snack
The problem is, now you can pan the image without boundaries, so sometimes the black background is visible. I don't want this.
I have tried this for 3 days calculating the boundaries based on the translateX/Y and the scale, but I cannot find the solution. Can anyone point me in the right direction?