I’ve implemented a complex svg zooming functionality for the application I’m working, it was working fine with below coad

render() {
    const { canvasHeight, canvasWidth, viewStyle, canvasStyle, children } = this.props;

    return (
      <View
        ref={(v) => (this.mainViewRef = v)}
        style={[{ flex: 1 }, viewStyle]}
        onLayout={this._onLayout}
        {...this.prInstance.panHandlers}
      >
        <Animated.View
          style={{
            width: canvasWidth,
            height: canvasHeight,
            transform: [
              { translateX: tx },
              { translateY: ty },
              { scale: scaleAnimation },
            ],
            ...canvasStyle,
          }}
        >
          <SvgView
            style={{
              width: canvasWidth,
              height: canvasHeight,
            }}
          >
            {children}
          </SvgView>
        </Animated.View>
      </View>
    );
  }

pan pinch all gustures working soomthely and fine, but only problem with above code is when I zooming I’m losing the quilty of the svg,

So I changed my code as below

import Svg, { G } from 'react-native-svg';
const SvgView = Animated.createAnimatedComponent(Svg);
const SvgGroup = Animated.createAnimatedComponent(G);

render() {
    const { canvasHeight, canvasWidth, viewStyle, canvasStyle, children } = this.props;

    return (
      <View
        ref={(v) => (this.mainViewRef = v)}
        style={[{ flex: 1 }, viewStyle]}
        onLayout={this._onLayout}
        {...this.prInstance.panHandlers}
      >
        <Svg width={canvasWidth} height={canvasHeight}>
          <SvgGroup
            style={{
              transform: [
                { scale: scaleAnimation },
                { translateX: tx },
                { translateY: ty },
              ],
              ...canvasStyle,
            }}
          >
            {children}
          </SvgGroup>
        </Svg>
      </View>
    );
  }

now I’m not losing the qulity of the SVG, but every time I’m zooming in I’m losing the view point, the problem what happening is SvgGroup is scaling up than the canvasWidth and canvasHeight, doese anyone have any solution for this?