title: How would I animate the width of a button based on percentage, and the same for it's backgroundColor?
body: <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>