title: Full screen background image in React Native app
body: <p>I'm trying to set a full background image on my login view.</p>
  
  <p>I found that question here in Stackoverflow: <a href="https://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native/">What's the best way to add a full screen background image in React Native</a></p>
  
  <p>So I did it like there, but it didn't work:</p>
  
  <p><a href="https://i.stack.imgur.com/xfmhQ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/xfmhQ.jpg" alt="enter image description here"></a></p>
  
  <pre><code>var login = React.createClass({
    render: function() {
      return (
        &lt;View style={ styles.container }&gt;
          &lt;Image source={require('../images/login_background.png')} style={styles.backgroundImage} /&gt;
          &lt;View style={ styles.loginForm }&gt;
            &lt;Text&gt;TEST&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  });
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  
    backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
    },
  
    loginForm: {
    },
  });
  </code></pre>
  
  <p>I don't know what I'm doing wrong. Any help would be appreciated.</p>
  
  <p><strong>Edit:</strong> Here is the app, in case you guys want to take it a look -> <a href="https://rnplay.org/apps/cm295Q" rel="noreferrer">Full size background image example on rnplay.org</a>. I don't know how to do it editable :/</p>
  
  <p>Thanks :)</p>