title: Show image in 4:5 ratio and fit inside container view in react native
body: <p>I am not aware of the image ratio uploaded by user upfront but I need to display all images in 4:5 ratio i.e  </p>
  
  <pre><code>image width=device window width size 
  image height=(device window width size)*5/4
  </code></pre>
  
  <p>I used the above calculation for displaying my image inside container view  but the image is cropped. If I use resize mode, the image is distorted.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;View style={styles.container}&gt;
        &lt;Image style={styles.fixedRatio} source={{ uri: this.props.navigation.state.params.uri }}/&gt;
      &lt;/View&gt;
  
      container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
      },
      fixedRatio: {
        marginLeft:-10,
        marginRight:-10,
        backgroundColor: 'red',
        flex: 1,
        aspectRatio: 1,
        width: deviceWidth,
        height: deviceWidth*5/4
      },
  </code></pre>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>As per @marson answer, I changed the code like below</p>
  
  <p>
            
          </p>
  
  <p>I set background color to differentiate image. Now the images are not get cropped. But doesn't fit inside the view</p>
  
  <pre><code>&lt;View style={{ backgroundColor: 'blue', aspectRatio:4/5, alignSelf:'center', width: '100%'}}&gt;
     &lt;Image resizeMode={'contain'} style={{width:'100%', height:'100%'}} source={{ uri: this.props.navigation.state.params.uri }}/&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/PF57z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PF57z.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/Ruj5K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ruj5K.png" alt="enter image description here"></a></p>