title: How do I transition from one image to another by changing state in React-Native
body: <p>I have two images with little difference between them and each corresponding to a particular state. I need to smoothly transition from one to the other when I change the state so that the effect feels like only the part which is different in the two images has undergone animation,the rest of the image staying as it is.
  <a href="https://i.stack.imgur.com/HrVOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HrVOe.png" alt="First"></a></p>
  
  <p><a href="https://i.stack.imgur.com/MKDJP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MKDJP.png" alt="Second"></a></p>
  
  <p>I want it to work so that when I render the second image on stateChange, only the rod like part in the second image appears to fade in,the rest remaining still.</p>
  
  <p>I think this can be achieved without using any animation libraries like <code>react-transition-group</code> probably by using some of the life cycle methods in React and obviously, the AnimatedAPI. The major issue that I am facing is that when I update the state I have no control over the previous image that was rendered. I somehow want the previously rendered image to stay until newly rendered Component appears and does its animation. Here is what I tried to do. I have this ImageLoader Component which renders an image while providing a fading-in animation to it. </p>
  
  <pre><code>class ImageLoader extends React.Component {
    constructor(){
      super()
      this.opacity= new Animated.Value(0)
     }
  
      componentDidUpdate(){
     {this.onLoad()}
  
     } 
  
      onLoad = () =&gt; {
        this.opacity.setValue(0);
        Animated.timing(this.opacity, {
            toValue: 1,
            duration: 500,
            useNativeDriver: true,
        }).start();
     }
  
    render() {
      return (
        &lt;Animated.Image onLoad={this.onLoad}{...this.props}style={[
            {opacity: this.opacity,}, this.props.style,
         ]} 
       /&gt;
      );
    }
   }
  
  
  
  export default class App extends React.Component {
   state={
   no:1,
  }
  
    render() {
    let Dun=()=&gt;{return this.state.no==1?
     &lt;ImageLoader source={require('./assets/img1.PNG')}/&gt;: &lt;ImageLoader 
  
       source={require('./assets/img2.PNG')}/&gt;
      }
     const calc=()=&gt;{
     this.setState((state)=&gt;({no:Math.abs(state.no-1)}));
  }
  return (
    &lt;View style={styles.container}&gt;
      &lt;View style={{height:100,marginLeft:50}}&gt;
  
      {Dun()}
  
      &lt;Button onPress={()=&gt;{calc()}}&gt; Press&lt;/Button&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  );
  }
  }
  </code></pre>