title: Animating width of <Rect /> in react-native-svg
body: <p>I have simple animation interpolation going on for <code>&lt;Rect /&gt;</code> element, however I see no changes on my ui, as if width is staying 0.</p>
  
  <p>I manually added my end value to the component as <code>width={149.12}</code> and it displayed it correctly, hence I am a bit confused now to why it is not picking up same value from animation?</p>
  
  <p>react-native@0.57.1</p>
  
  <p>react-native-svg@7.03</p>
  
  <p>Targeting iOS 12</p>
  
  <p>Here is full implementation, in essence a mana and health bar that take in current value and total value i.e. 50 and 100 should display half width for the rect. (Example uses typescript, but answer can be in plain js if needed)</p>
  
  <pre><code>import * as React from 'react'
  import { Animated } from 'react-native'
  import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
  import { deviceWidth } from '../services/Device'
  
  const barWidth = deviceWidth * 0.3454
  const barHeight = barWidth * 0.093
  const AnimatedRect = Animated.createAnimatedComponent(Rect)
  
  /**
   * Types
   */
  export interface IProps {
    variant: 'MANA' | 'HEALTH'
    currentValue: number
    totalValue: number
  }
  
  export interface IState {
    width: Animated.Value
  }
  
  /**
   * Component
   */
  class HealthManaBar extends React.Component&lt;IProps, IState&gt; {
    state = {
      width: new Animated.Value(0)
    }
  
    componentDidMount() {
      const { currentValue, totalValue } = this.props
      this.animate(currentValue, totalValue)
    }
  
    componentDidUpdate({ currentValue, totalValue }: IProps) {
      this.animate(currentValue, totalValue)
    }
  
    animate = (current: number, total: number) =&gt;
      Animated.timing(this.state.width, {
        toValue: current !== 0 ? current / total : 0,
        duration: 400
      }).start()
  
    render() {
      const { variant } = this.props
      const { width } = this.state
  
      return (
        &lt;Svg width={barWidth} height={barHeight}&gt;
          &lt;Defs&gt;
            &lt;LinearGradient
              id={`HeathManaBar-gradient-${variant}`}
              x1="0"
              y1="0"
              x2="0"
              y2={barHeight}
            &gt;
              &lt;Stop
                offset="0"
                stopColor={variant === 'HEALTH' ? '#EC561B' : '#00ACE1'}
                stopOpacity="1"
              /&gt;
              &lt;Stop
                offset="0.5"
                stopColor={variant === 'HEALTH' ? '#8D1B00' : '#003FAA'}
                stopOpacity="1"
              /&gt;
              &lt;Stop
                offset="1"
                stopColor={variant === 'HEALTH' ? '#9F3606' : '#007C97'}
                stopOpacity="1"
              /&gt;
            &lt;/LinearGradient&gt;
          &lt;/Defs&gt;
          &lt;AnimatedRect
            x="0"
            y="0"
            rx="3"
            ry="3"
            width={width.interpolate({
              inputRange: [0, 1],
              outputRange: [0, barWidth]
            })}
            height={barHeight}
            fill={`url(#HeathManaBar-gradient-${variant})`}
          /&gt;
        &lt;/Svg&gt;
      )
    }
  }
  
  export default HealthManaBar
  </code></pre>
  
  <p>Related library: <a href="https://github.com/react-native-community/react-native-svg" rel="noreferrer">https://github.com/react-native-community/react-native-svg</a></p>