title: How to create a full screen ImageBackground in react native?
body: <p>I have a react native app with a single Signin component. I just need to add a full screen ImageBackground component. <strong>The problem is, the image only get the hight and width as pixels. It doesn't response for 100%.</strong> I tried with width : 'auto' and width : null but those are also not working. How can I get the image in full screen size?</p>
  
  <p>Signin.js</p>
  
  <pre><code>const styles = StyleSheet.create({
    bgStyles: {
      alignContent: 'center',
      alignItems: 'center',
      height: '100%',
      width: '100%',
      flex: 1
    },
  });
  
  const Signin = () =&gt; {
    return (
        &lt;ImageBackground
          style={styles.bgStyles}
          source={require('../../../public/static/images/w.jpg')}
          resizeMode='contain'
        &gt;
          &lt;Text&gt;TEXT&lt;/Text&gt;
          &lt;Text&gt;TEXT&lt;/Text&gt;
          &lt;Text&gt;TEXT&lt;/Text&gt;
        &lt;/ImageBackground&gt;
    );
  };
  </code></pre>
  
  <p>Result before adding resizeMode = 'contain':</p>
  
  <p><a href="https://i.stack.imgur.com/7CFlc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7CFlc.png" alt="enter image description here"></a></p>
  
  <p>Result after adding resizeMode = 'contain':</p>
  
  <p><a href="https://i.stack.imgur.com/sfWdW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sfWdW.png" alt="enter image description here"></a></p>