How to make svg animation with Animated in react-native

Question

ReactNative:

Answer 1

Use setNativeProps for Much Better Performance.

I did some more tinkering and found a more performant method that makes use of addListener and setNativeProps.

Constructor

constructor(props) {
  super(props);

  this.state = { circleRadius: new Animated.Value(50) };

  this.state.circleRadius.addListener( (circleRadius) => {
    this._myCircle.setNativeProps({ r: circleRadius.value.toString() });
  });

  setTimeout( () => {
    Animated.spring( this.state.circleRadius, { toValue: 100, friction: 3 } ).start();
  }, 2000)
}

Render

render() {
  return(
    
  )
}

Result

And this is what the animation looks like when the 2 second (2000 millisecond) timeout triggers.

So, the main thing you needed to change was using setNativeProps instead of using setState in your listener. This makes a native call and bypasses re-calculating the entire component, which in my case was very complex and slow to do.

Thanks for leading me towards the listener approach!