Help using viewBox to zoom in / out programmatically

Hello, I am using react-native-svg along with React Native Animated library to programmatically zoom in / out of an SVG using the viewBox. The SVG has about 150 elements which I am using to click on and zoom into that area. I am running into problems with the zooming / easing not performing well. I have not been able to get things to work by setting useNativeDriver to true. I can only get it working with that set to false. I believe that could be causing performance issues. Here is the code I am using.

const AnimatedSVG = Animated.createAnimatedComponent(Svg);
const App: () => Node = () => {
  const [widthValue, setWidthValue] = React.useState(1920);
  const [heightValue, setHeightValue] = React.useState(1080);
  const widthAnimated = React.useRef(new Animated.Value(1920)).current;
  const heightAnimated = React.useRef(new Animated.Value(1080)).current;

  widthAnimated.addListener((e) => setWidthValue(e.value));
  heightAnimated.addListener((e) => setHeightValue(e.value));

  const Segments = () => {
    return (
      <React.Fragment>
        <G id="segments">
            <Path onPress={(e) => segmentClick(e, 'segment63')} opacity={styles.circleGen6.opacity} fill={colorLuminance(styles.circleGen6.color, -0.10)} d="M1616.387,982.739l131.277,88.548c6.572-9.725,12.967-19.579,19.184-29.556l-134.475-83.622C1627.192,966.422,1621.864,974.635,1616.387,982.739z"/>
               {/Other paths removed for readbility/}
          </G>
      </React.Fragment>
    );
  };

  const segmentClick = (event, pathTarget) => {
      Animated.parallel([
        Animated.timing(widthAnimated, {
          toValue: 400,
          duration: 100,
          useNativeDriver: false,
          easing: Easing.linear,
        }),
        Animated.timing(heightAnimated, {
          toValue: 600,
          duration: 100,
          useNativeDriver: false,
          easing: Easing.linear,
        }),
      ]).start();
  };

  return (
      <View ref={viewRef} style={styles.container}>
          <AnimatedSVG x="0px" y="0px" viewBox={` x="0" y="10" ${widthValue} ${heightValue}`} >
            <Segments/>
          </AnimatedSVG>
      </View>
    );
};

export default App;

software-mansion / react-native-svg

Help using viewBox to zoom in / out programmatically #1630