Анимационная ширина in react-native-svg

у меня есть простая анимационная интерполяция для <Rect /> элемент, однако я не вижу никаких изменений в моем пользовательском интерфейсе, как будто ширина остается 0.

Я вручную добавил свое конечное значение компонента как width={149.12} и он отобразил его правильно, поэтому я немного смущен, почему он не набирает то же значение из анимации?

react-native@0.57.1

react-native-svg@7.03

таргетинг на iOS 12

вот полная реализация, в сущность Мана и бар здоровья, которые принимают текущее значение и общее значение, т. е. 50 и 100, должны отображать половину ширины прямой кишки. (Пример использует typescript, но ответ может быть в обычном js при необходимости)

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<IProps, IState> {
  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) =>
    Animated.timing(this.state.width, {
      toValue: current !== 0 ? current / total : 0,
      duration: 400
    }).start()

  render() {
    const { variant } = this.props
    const { width } = this.state

    return (
      <Svg width={barWidth} height={barHeight}>
        <Defs>
          <LinearGradient
            id={`HeathManaBar-gradient-${variant}`}
            x1="0"
            y1="0"
            x2="0"
            y2={barHeight}
          >
            <Stop
              offset="0"
              stopColor={variant === 'HEALTH' ? '#EC561B' : '#00ACE1'}
              stopOpacity="1"
            />
            <Stop
              offset="0.5"
              stopColor={variant === 'HEALTH' ? '#8D1B00' : '#003FAA'}
              stopOpacity="1"
            />
            <Stop
              offset="1"
              stopColor={variant === 'HEALTH' ? '#9F3606' : '#007C97'}
              stopOpacity="1"
            />
          </LinearGradient>
        </Defs>
        <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})`}
        />
      </Svg>
    )
  }
}

export default HealthManaBar

связанная библиотека:https://github.com/react-native-community/react-native-svg