title: How to stretch a static image as background in React Native?
body: <p>I'd like to use a background image in my react native app,
  the image is smaller than the screen, so I have to stretch it.</p>
  
  <p>but it doesn't work if the image is <strong>loaded from asset bundle</strong></p>
  
  <pre class="lang-jsx prettyprint-override"><code>var styles = StyleSheet.create({
    bgImage: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'stretch',
      resizeMode: 'stretch',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    }
  });
  
  &lt;Image source={require('image!background')} style={styles.bgImage}&gt;
    &lt;Text style={styles.welcome}&gt;
      Welcome to React Native!
    &lt;/Text&gt;
  &lt;/Image&gt;
  </code></pre>
  
  <p>it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Ppm9Z.png" alt="enter image description here"></p>
  
  <p>however, it works fine for a remote image, through <code>source={{uri: 'background-image-uri'}}</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/RzNYq.png" alt="enter image description here"></p>