title: Image flickers on first load in ReactNative
body: <p>I am trying to build a ReactNative Application with an animated button. The problem is that this animation does not work correctly the first time after the App is started. There is some white flickering. But after the animation ran wrong the first time everything works as expected:</p>
  
  <p><a href="https://i.stack.imgur.com/Fjs3F.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Fjs3F.gif" alt="Animation of the problem."></a></p>
  
  <p>I have already tried to preload the image in several ways, but without any success.</p>
  
  <p>This is my minimal working example, note that if there are several different images the flickering occurs if a new image is loaded (e.g. I have two blue buttons and after I tapped the first one, the second one will work fine, but if I then tap an orange button it once again flickers for the first time, at least if I have not tapped another orange button after app start.):</p>
  
  <pre><code>import React, { Component } from 'react';
  import {StyleSheet, Text, TouchableWithoutFeedback, View, Image, ScrollView, 
  Button, BackHandler} from 'react-native';
  
  export default class Touchables extends Component {
    constructor(props) {
      super(props);
      this.state = {alarm1: (&lt;Image source={require("./assets/alarmoff.png")} 
    style={styles.imageButton}/&gt;),
  
      }
    }
  
    componentWillMount(){
    //trying to preload all Images, but it does not help.
      (&lt;Image source={require("./assets/alarmon.png")} style= 
        {styles.imageButton}/&gt;)
    }
  
    render() {
      return (
        &lt;ScrollView style={styles.contentContainer}&gt;
  
       &lt;View style={{flex: 3, flexDirection: 'row'}}&gt;
          &lt;View style={styles.container}&gt;
            &lt;TouchableWithoutFeedback onPressIn={() =&gt; this.setState({alarm1: 
               &lt;Image source={require("./assets/alarmon.png")} style={styles.imageButton}/&gt;})} onPressOut={() =&gt; this.setState({alarm1:  &lt;Image source={require("./assets/alarmoff.png")} style={styles.imageButton}/&gt;})}&gt;
              &lt;View style={styles.button}&gt;
                {this.state.alarm1}
              &lt;/View&gt;
            &lt;/TouchableWithoutFeedback&gt;
            &lt;Text style={styles.text}&gt;This button flickers on first click. Restart App completly to see the issue. Reloading is not enough.&lt;/Text&gt;
          &lt;/View&gt;
         &lt;/View&gt;
         &lt;View&gt;
          &lt;Button
           onPress={() =&gt; BackHandler.exitApp()}
           title="Exit App"
           color="#841584"
           accessibilityLabel="Android only I guess."
          /&gt;
         &lt;/View&gt;
  
       &lt;/ScrollView&gt;
     );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 2,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 30
   },
   button: {
      backgroundColor: '#fff',
      borderRadius: 20,
      padding: 10,
      marginBottom: 20,
      shadowColor: '#303838',
      shadowOffset: { width: 0, height: 5 },
      shadowRadius: 10,
      shadowOpacity: 0
    },
    contentContainer: {
      paddingVertical: 20,
      flex: 1,
      backgroundColor: '#fff',
    },
   text:{
      color: '#000',
      marginBottom: 30
   },
   imageButton: {
     flex: 1,
     width: 240,
     height: 200,
     marginBottom: -15,
     marginTop: 10,
     resizeMode: 'cover'
   }
  });
  </code></pre>
  
  <p>So my question is how can I stop the image from flickering after app start?</p>
  
  <p>The full version of the little demo app I have build to show my problem is available on my <a href="https://github.com/FrankenApps/AlarmButton" rel="noreferrer">Github Repository</a></p>