title: React Native - Fit image to screen
body: <p>I just want to fit an image of any size to the phone screen, so it just stays there as a background. I have the same issue with a logo I'm trying to put in the footer, I can't get it to fit in the it's view container.</p>
  
  <p>I've tried many solutions I found in similar questions, using resizeMode and many width/height values, but nothing seems to work. My image is always displayed the same way.</p>
  
  <p>Code for the image component:</p>
  
  <pre><code>import React from 'react';
  import { View, Image } from 'react-native'; 
  
  
  const Workspace = (props) =&gt; {
  
  return (
    &lt;View 
    style = {styles.workspaceStyle}&gt;
      &lt;Image
      source={props.img}
      resizeMode = 'contain'/&gt; 
      {props.children}
    &lt;/View&gt;
   );
  };
  const styles = {
    workspaceStyle: {
      flex: 1
   }
  }
  
  export default Workspace;
  </code></pre>
  
  <p>My app.js render and style code:</p>
  
  <pre><code>render() { 
      return (
          &lt;View style = {{flex: 1}}&gt;
  
            &lt;Workspace 
              img={require('./images/quarto.png')}/&gt;
  
            &lt;ScrollView&gt;
              &lt;Header&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
              &lt;/Header&gt;
            &lt;/ScrollView&gt;
  
            &lt;ScrollView style = {{flexDirection: 'row'}}&gt;
              {this.sideMenuShow()}
            &lt;/ScrollView&gt;
  
            &lt;Footer&gt;
              &lt;View style = {styles.logoContainerStyle}&gt;
                &lt;Image
                  style = {styles.logoStyle}
                  source = {require('./images/magicalStage.png')}
                  resizeMethod = "scale"
                  /&gt;
              &lt;/View&gt;
              &lt;Text style = {{color: 'white', marginTop: 5, marginBottom: 2}}&gt;teste, teste, teste, teste&lt;/Text&gt;
            &lt;/Footer&gt;
  
          &lt;/View&gt;
      );
    }
  }
  
  const styles = {
    logoContainerStyle: {
      marginRight: 5,
      marginLeft: 5,
      marginTop: 2,
      marginBottom: 3,
      width: "20%"
    },
  
    logoStyle: {
     paddingLeft: 2,
     paddingRight: 2 
    }
  }
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT:</p>
  
  <p><a href="https://i.stack.imgur.com/oc2KH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oc2KH.png" alt="Original picture"></a></p>
  
  <p><a href="https://i.stack.imgur.com/hfTuE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hfTuE.png" alt="This is what the app is looking like"></a></p>