[Bug]: CropZoom not cropping as expected

[Uros787]

Summary

Im creating picture crop with skia and react-native-zoom-toolkit. I've managed to get fixed 9:16 resolution with overlay and configuration.

The issue comes after user tries to crop the image if image is not fully within 9:16 resolution parameter. When its in the resolution frame it works properly and everything is fine. As seen in the video

https://github.com/user-attachments/assets/d81ce300-ea9e-4a1a-9b06-c73ea87f3f5e

Crop function:

const crop = async (ref: React.RefObject < CropZoomType > ) => {
    const result = ref.current?.crop()
    if (result === undefined) {
        return
    }

    const actions = []
    actions.push({
        crop: result.crop
    })

    const cropResult = await manipulateAsync(localUri, actions)
    const newAssets = selectedAssets.map((asset) => {
        if (asset.id === selectedAsset.id) {
            return {
                ...asset,
                ...cropResult
            }
        }
        return asset
    })
    setSelectedAssets(newAssets)
}

Im trying to understand if this is something package related, or if this is the issue with the code i've written. If we take the provided crop example from package, and try to zoom out with circle overlay so that picture is not fully in the circle - would it work or would it also throw this error?

Expected behaviour would be for the picture to be cut out from the sides that are out of the resolution frame

Environment

"react-native-zoom-toolkit": "^3.1.0", "react-native": "0.74.5", "expo": "^51.0.0", "react-native-reanimated": "~3.10.1", "react-native-gesture-handler": "~2.16.1"

Steps to Reproduce

No response

[Glazzes]

Hello @Uros787, I've read your issue severeal times already and I have trouble trying yo understand what's that you want.

If you mean the image should render it such a way it fits your SVG hole, then you need to set CropZoom's cropSize property to be equals to the dimensions of your SVG hole.

If you mean like it should crop regardless or whether the images fits the frame or not, it will not happen, the way the image renders as well as how crops are achieved is dictated by cropSize property, so dynamic crops are not achievable, it's certainly easy to achieve but not in the context of this component.

[Uros787]

Hi @Glazzes Thanks for the response. The second paragraph is what i meant more likely.

Understandably if image is not in the highlighted overlay it should not crop it at all. But if horizontal image is in the highlighted overlay and lets say 20 pixels of the image on both sides are out of the highlighted overlay horizontally(like on the video i provided where i zoom in a little bit), i would expect crop to still work but only cut out those 20 pixels on the sides.

If package doesnt support that as you mention, how would you recommend i approach this issue?

[Glazzes]

i would expect crop to still work but only cut out those 20 pixels on the sides

It does work not that way, the overlay component is nothing but a visual representation of the cropping area provided by the developer, it does not play any role in the cropping calculations as these ones are dictated by cropSize, which in your case clearly differs from the dimensions used to render the overlay.

@Uros787 Althought it looks like you want a static cropping area, it is in fact a dynamic cropping area relative to zoom scale, this thing is not achievable because of CropZoom's static nature.

Recommending a proper course of action is difficult to tell... Your use case is 100% achievable but it requires some modifications to this component because of the dynamic nature of what you need, it's pretty much the same until that intermediate step in which the image is not fully covered.

I don't really know to provide guidance to deal with that, sorry.

[Uros787]

I see. Thanks a lot.

Is there a way to check if image is currently fully in the highlighted area(read allegeable for crop)?

[Glazzes]

No, as I said before, because the overlay dimensions is not used for any type of calculations, with the current tools offered by this library you can not achieve your goal, best you can do is something like this:

https://github.com/user-attachments/assets/83bd25e2-e066-4f89-b7ba-beb416306f41

[Glazzes]

@Uros787 Someone recently approached me with a very similar use case to yours, I managed to provide a solution, so if you still need exactly what you wanted let me know.

[Uros787]

@Glazzes That would be great, thanks