title: React Native - why does my image button flash on Android?
body: <p>I have a simple image button, which changes its image onTouchStart and onRelease. On iOs, it works like expected, but on Android the button flashes, when the image changes.
  It looks like, if the image has to be loaded again everytime I'm touching it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>class MyApp extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;View style={ styles.container }&gt;
                  &lt;ImageButton
                      style={ styles.button }/&gt;
              &lt;/View&gt;
          );
      }
  }
  class ImageButton extends React.Component {
  
      constructor(props: {}) {
          super(props);
  
          this.image = {
              normal: require('./img/button.png'),
              highlight: require('./img/button-touched.png')
          };
  
          this.state = {
              image: this.image.normal
          };
      }
  
      onTouchStart() {
      
          // do some stuff
          
          // set the highlighted image
          this.setState({
              image: this.image.highlight
          });
      }
  
      onTouchEnd() {
          this.setState({
              image: this.image.normal
          })
      }
  
      onTouchCancel() {
          this.setState({
              image: this.image.normal
          });
      }
  
      componentWillReceiveProps(nextProps) {
          this.setState({
              image: nextProps.image.normal
          });
      }
  
      render() {
          return (
              &lt;View style={ this.props.style }
                    onStartShouldSetResponder={ () =&gt; true }
                    onResponderGrant={ this.onTouchStart.bind(this) }
                    onResponderRelease={ this.onTouchEnd.bind(this) }
                    onResponderTerminate={ this.onTouchCancel.bind(this) }
                    onResponderReject={ this.onTouchCancel.bind(this) }&gt;
                  &lt;Image style={ styles.image } source={ this.state.image } resizeMode="stretch" /&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#E4E4E4',
      },
      button: {
          backgroundColor: 'transparent',
      },
  });
  
  AppRegistry.registerComponent('schwein', () =&gt; Schwein);</code></pre>
  </div>
  </div>
  </p>