Zoom Scale Limits

[OmelDM]

Description

In my application, I'm using CartesianChart to display data. I want to prevent users from zooming in too close or zooming out too far, as this can make the chart unreadable.
It would be great if the PinchTransformGestureConfig could be enhanced to include properties for setting minimum and maximum scale values for both the x and y axes.

Proposal

Extend the PinchTransformGestureConfig interface with the following properties:

export type PinchTransformGestureConfig = {
    enabled?: boolean;
    dimensions?: Dimension | Dimension[];
    maxScaleX?: number;
    maxScaleY?: number;
    minScaleX?: number;
    minScaleY?: number;
};

[keithluchtel]

@OmelDM we can look into adding this. In the meantime, you can manually add limits if the user goes outside of your defined range. Reference the code from one of the demo screens: https://github.com/FormidableLabs/victory-native-xl/blob/main/example/app/pan-zoom.tsx

  useAnimatedReaction(
    () => {
      return state.panActive.value || state.zoomActive.value;
    },
    (cv, pv) => {
      if (!cv && pv) {
        const vals = getTransformComponents(state.matrix.value);
        k.value = vals.scaleX;
        tx.value = vals.translateX;
        ty.value = vals.translateY;

        k.value = withTiming(1);
        tx.value = withTiming(0);
        ty.value = withTiming(0);
      }
    },
  );

  useAnimatedReaction(
    () => {
      return { k: k.value, tx: tx.value, ty: ty.value };
    },
    ({ k, tx, ty }) => {
      const m = setTranslate(state.matrix.value, tx, ty);
      state.matrix.value = setScale(m, k);
    },
  );

I think you could modify this snippet to do some scale detection and then return it to your desired value if it's outside that range.