How would I animate the width of a button based on percentage, and the same for it's backgroundColor? : <p>I have some <code>&lt;AnimatedButton /&gt;</code></p>

<p>I want to animate it to go from 100% width to 40% width depending on a prop that is a boolean called <code>isFullWidth</code>.</p>

<p>I have:</p>

<pre><code>class AnimatedButton extends Component {
    constructor(props) {
      super(props);
      this.state = { width: new Animated.Value(100) };
    }
    toggleWidth() {
      const endWidth = this.props.isFullWidth ? 40 : 100;

      Animated.timing(this.state.width, {
        toValue: endWidth,
        duration: 200,
        easing: Easing.linear,
      }).start();
    }

    render() {
      &lt;TouchableOpacity
       style={{ width: `${this.state.width}%` }}
       onPress={this.props.onPress}
      &gt;
       // more stuff
      &lt;/TouchableOpacity&gt;
    }
}
</code></pre>

<p>The problem is that it just jumps into the appropriate percentage without animating. I tried setting the width to just <code>this.state.animatedValue</code> and rather than use percentage, just use pixels, e.g. 150 to 400 and back, and it works fine as expected.</p>

<p>Same question applies for going from say <code>rgba(220, 100, 50, 0.8)</code> to <code>rgba(30, 70, 30, 1.0)</code> and back?</p>
