zoom plan?

[weixingsun]

as we known svg is vectorial, so it'll be super cool to support zooming, right?

[Introvertuous]

Until animations are implemented you can achieve something similar with the react native animated library. example (note it is smoother than it appears):

class Blarg extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      scale: new Animated.Value(0)
    }
    this.animate = this.animate.bind(this);
  }

  componentDidMount() {
    this.animate();
  }

  animate() {
    Animated.sequence([
      Animated.timing(this.state.scale,
        {
          toValue:1,
          duration:2000
        }),
      Animated.timing(this.state.scale,
        {
          toValue:0,
          duration:2000
        })
    ]).start(this.animate)
  }

  render () {
    return (
      <View>
        <Animated.View style={{transform:[{scale:this.state.scale}]}}>
        <Svg height="100" width="100">
          <Path x='50' y='60' d="M23.70-49.04Q33.40-49.04 39.45-42.10Q45.49-35.16 45.49-23.98Q45.49-12.80 39.45-5.89Q33.40 1.02 23.70 1.02Q13.99 1.02 7.89-5.91Q1.79-12.83 1.79-23.98Q1.79-35.16 7.89-42.10Q13.99-49.04 23.70-49.04M23.70-43.00Q19.76-43.00 17.88-38.34Q16.00-33.68 16.00-23.98Q16.00-14.17 17.86-9.56Q19.72-4.96 23.70-4.96Q27.63-4.96 29.48-9.53Q31.32-14.10 31.32-23.98Q31.32-33.75 29.46-38.37Q27.60-43.00 23.70-43.00Z" stroke="red"/>
        </Svg>
        </Animated.View>
      </View>
    )
  }
}

[ridwan85]

Based on your code. manage to made an example of something like this

[msand]

I've made a library for zoom-and-pan https://github.com/msand/zoomable-svg Similar logic could be used to add https://svgwg.org/svg2-draft/interact.html#ZoomAndPanAttribute