title: React Native Animated to scale an image
body: <p>I have 2 issues with the <code>Animated</code> API. </p>
  
  <p><strong>1st:</strong> I am able to show the Image from left to right with the following code. I want to scale the Image from position <code>X=40 (leftPadding), Y=100(topPadding), height:20, width:20</code> to <code>X=20, Y=10, height:250, width:300</code>. How do I achieve this?</p>
  
  <p>My code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, Text, Image, Animated, Easing, View, Button } from 'react-native';
  
  class MyTestComp extends Component {
    componentWillMount() {
      this.animatedValue = new Animated.Value(0);
    }
    buttonPress(){
    this.animatedValue.setValue(0);
      Animated.timing(this.animatedValue,{
        toValue:1,
        duration:1000,
        Easing: Easing
      }).start()
    }
  
    render() {
  
      const translateX = this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [-500, 1]
      })
  
      const transform = [{translateX}];
  
      return (
        &lt;View&gt;
          &lt;Text&gt;MyTestComp&lt;/Text&gt;
          &lt;Animated.View style={transform}&gt;
          &lt;Image
            source={require('./assets/17.jpg')}
            style={{width:300, height:250}}
          /&gt;
          &lt;/Animated.View&gt;
          &lt;View style={{marginTop:10}}&gt;
            &lt;Button title="Click Me" onPress={()=&gt; this.buttonPress()} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
  export default MyTestComp;
  </code></pre>
  
  <p><strong>2nd:</strong> Everytime I run the animation, I'm getting an exception: </p>
  
  <p><a href="https://i.stack.imgur.com/qHIci.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qHIci.png" alt="enter image description here"></a></p>
  
  <p>I'm not able to find any documentation on this. How do I use the <code>transform</code> prop.</p>
  
  <p>Many thanks.</p>